@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
43 lines (42 loc) • 1.95 kB
JavaScript
import React from 'react';
import { createElemPropsHook } from '@workday/canvas-kit-react/common';
import { usePopupModel } from './usePopupModel';
/**
* This hook will hide all sibling elements from assistive technology. Very useful for modal
* dialogs. This will set `aria-hidden` for sibling elements of the provided PopupModel's
* `state.stackRef` element and restore the previous `aria-hidden` to each component when the
* component is unmounted. For example, if added to a Modal component, all children of
* `document.body` will have an `aria-hidden=true` applied _except_ for the provided `stackRef`
* element (the Modal). This will effectively hide all content outside the Modal from assistive
* technology including Web Rotor for VoiceOver for example.
*
* This should be used on popup elements that need to hide content (i.e. Modals).
*/
export const useAssistiveHideSiblings = createElemPropsHook(usePopupModel)(model => {
const visible = model.state.visibility !== 'hidden';
React.useEffect(() => {
var _a, _b;
if (!visible) {
return;
}
const siblings = [
...(((_b = (_a = model.state.stackRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.children) || []),
].filter(el => el !== model.state.stackRef.current);
const prevAriaHidden = siblings.map(el => el.getAttribute('aria-hidden'));
siblings.forEach(el => {
el.setAttribute('aria-hidden', 'true');
});
return () => {
siblings.forEach((el, index) => {
const prev = prevAriaHidden[index];
if (prev) {
el.setAttribute('aria-hidden', prev);
}
else {
el.removeAttribute('aria-hidden');
}
});
};
}, [model.state.stackRef, visible]);
return {};
});