@zohodesk/a11y
Version:
In this Package, We Provide Some Basic Components For Accessibility.
32 lines (31 loc) • 1 kB
JavaScript
import { useEffect } from 'react';
import { applyFocusStyle, getFocusArr, preventDOMAvailabllityAndFocus, removeFocusStyle, customAttributes } from '../utils/focusScopeUtil';
const {
focusContainer: focusContainerEle
} = customAttributes;
export default (_ref => {
let {
contentRef,
needAutoFocus = false,
onFocus
} = _ref;
useEffect(() => {
let {
autoFocusEle
} = getFocusArr(contentRef());
let focusContainer = contentRef() && (contentRef().querySelector(`[${focusContainerEle}=true]`) || contentRef().closest(`[${focusContainerEle}=true]`));
let focusableEl = autoFocusEle || focusContainer || contentRef() && contentRef();
if (needAutoFocus && focusableEl) {
setTimeout(() => {
preventDOMAvailabllityAndFocus(focusableEl, onFocus, true);
applyFocusStyle({
ele: focusableEl
});
}, 300);
} else if (focusableEl) {
removeFocusStyle({
ele: focusableEl
});
}
}, [needAutoFocus]);
});