watchModals

Acts as a polyfill for `aria-modal` by watching for added modals and hiding any surrounding DOM elements with `aria-hidden`.

Introduction#

Certain browser + screen reader combinations do not implement aria-modal correctly, which may unintentionally allow users to navigate outside of the modal. @react-aria/aria-modal-polyfill watches a container element for aria-modal nodes and hides the rest of the dom from screen readers with aria-hidden when one is open. See the aria-hidden package for more details. Most of the time you do not need this, it should only be necessary if your app is not mounted at the root of the page.

API#

How to use#

Include @react-aria/aria-modal-polyfill once in your application and call watchModals before any modals are rendered.

import {watchModals} from '@react-aria/aria-modal-polyfill';
watchModals();

By default, @react-aria/aria-modal-polyfill watches the document body, but you can also pass it a selector string if your modals are mounted in a different container.

watchModals('.my-modal-root');