UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

49 lines (48 loc) 2.26 kB
"use strict"; 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 {}; });