@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
49 lines (48 loc) • 2.26 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useAssistiveHideSiblings = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const usePopupModel_1 = require("./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).
*/
exports.useAssistiveHideSiblings = (0, common_1.createElemPropsHook)(usePopupModel_1.usePopupModel)(model => {
const visible = model.state.visibility !== 'hidden';
react_1.default.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 {};
});