aria-modal-polyfill

Acts as a polyfill for 'aria-modal' by watching for added modals and hiding the rest of the tree.

install	`yarn add @react-aria/aria-modal-polyfill`
version	3.0.0
usage	`import {watchModals} from '@react-aria/aria-modal-polyfill'`

View repository

GitHub

View package

NPM

Introduction#

Certain browser + screen reader combinations do not implement aria-modal correctly, allowing users to navigate outside of the modal. This watches a container for aria-modal nodes and hides the rest of the dom from screen readers when one is open use the aria-hidden package.

API#

watchModals(
  (selector: string
)): void

How to use#

Include this once in your application at the top level before modals are rendered.

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

You can also pass it a selector string, by default it will watch body, which is where most applications should have their provider.

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