react-aria-modal demo

☜ Return to the repository

When a modal is active, you should notice the following:

• 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.
• 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.
• Escape will close the modal.
• When the modal closes, focus returns to the element that was focused just before the modal activated.
• By default, clicking on the modal's underlay (outside the dialog element) will close the modal (this can be disabled).
• Scrolling is frozen on the main document beneath the modal. (Although, sadly, you can still mess with the scrolling using a touch screen.)
• The modal is appended to the end of document.body instead of its taking up its source-order position within the React component tree.

demo one

This modal

• has an invisible but still screen-reader-accessible title
• places initial focus on the deactivation button

demo two

This modal

• is vertically centered
• does not close when the underlay is clicked
• has a visible title (which is also used by the screen-reader)
• does not deliberately place focus, so the first element in the tab order receives focus
• has an internally scrolling region

demo three

This modal

• is tall enough that scrolling is required to see all of its content
• Uses focusDialog=true, so the focus trap still works but no focus outline is initially visible
• Uses escapeExits=false so the Escape key does not close the modal.

demo four

This modal's active/inactive state is controlled with the mounted prop instead of mounting and unmounting.

demo five

This modal uses some custom classes and special onEnter and onExit functions to enable nice transitions.