Fully Accessible And Flexible React Modal Component

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. (Although, sadly, you can still mess with the scrolling using a touch screen.)
  • 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.

Preview:

Fully Accessible And Flexible React Modal Component

Download Details:

Author: davidtheclark

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/davidtheclark/react-aria-modal

License: MIT

You Might Be Interested In:

Add Comment