@workday/canvas-kit-react/popup/lib/hooks/useAssistiveHideSiblings.ts

The parent module that contains all Workday Canvas Kit React components

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(() => {
    if (!visible) {
      return;
    }

    const siblings = [
      ...((model.state.stackRef.current?.parentElement?.children || []) as HTMLElement[]),
    ].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 {};
});