MAIDR Documentation - v3.75.0
    Preparing search index...
    • Scopes a disablePortal MUI modal's aria-hidden bookkeeping to its own parent element.

      When a modal opens, MUI's ModalManager marks every child of the modal's container aria-hidden="true" except the modal itself, so a screen reader reads the modal and nothing behind it. That container defaults to document.body, which is right for a portalled modal but wrong for a disablePortal one: MAIDR renders its dialogs inside the host page's chart wrapper, so the body child MUI hides is an ancestor of the dialog. The dialog hides itself, along with the chart it was opened from, and nothing inside it — controls, live regions — is announced while it is open.

      Pointing container at the modal root's own parent restores the intended behaviour: the modal's siblings are hidden, the modal is not.

      Note that MUI reads container once when the modal opens and reuses the element it resolved to when restoring aria-hidden on close, so this assumes the modal root keeps the same parent for as long as it is open — true of every caller here, whose JSX structure is static. A caller that re-parents an open modal would leave the original parent's children hidden.

      Returns ModalContainer

      The ref to attach to the modal root and the value for MUI's container prop. Both identities are stable across renders.

      const { modalRef, container } = useModalContainer();
      return <Dialog ref={modalRef} container={container} disablePortal open />;