A fully accessible React modal built according WAI-ARIA Authoring Practices Sample in 2020

A fully accessible React modal built according WAI-ARIA Authoring Practices Sample in 2020


tutorials -

react-aria-modal

A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.

This module provides a "smart" minimally styled component to wrap you "dumb" fully styled component. It provides the following features, while giving you complete control of the content:

  • Focus is trapped within the modal: Tab and Shift+Tab will cycle through the modal's focusable nodes without returning to the main document beneath.
  • Escape will close the modal.
  • Scrolling is frozen on the main document beneath the modal.
  • When the modal closes, focus returns to the element that was focused just before the modal activated.
  • The dialog element has an ARIA role of dialog (or alertdialog).
  • The dialog element has an ARIA attribute designating its title, either aria-label or aria-labelledby.
  • By default, clicking on the modal's underlay (outside the dialog element) will close the modal (this can be disabled).
  • The modal is appended to the end of document.body instead of its taking up its source-order position within the React component tree.

"Flexible" mostly means that this module provides absolutely minimal inline styles — just enough to get the thing working — but does not provide "complete" modal styling that would get in your way. You get to (have to) style the dialog yourself. (Maybe make a fancy-looking modal module that others could use, which depends on this one behind the scenes?)

GitHub

Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff