Open
Description
Summary:
Many of the demos linked to from the README have accessibility issues:
- Minimal example - once the modal is opened,
aria-hidden="true"is set on the<body>. this also hides the modal itself (which is a child element of the<body>) from screen readers; when the modal is closed, focus is not returned explicitly to the "Trigger modal" button - Using setAppElement - same issues as the minimal example
- Using inline styles - when the modal is closed, focus is not returned explicitly to the "Trigger modal" button
- Customizing the default styles - while the
#1 modalis fine, when triggering#2 modalthe<body>is once again hidden witharia-hidden="true"and, as a result, the#2 modalis also hidden from screen readers
Steps to reproduce:
- Use a screen reader
- Open the codepen demos
- Open/close the various modals
Expected behavior:
- don't set
aria-hidden="true"on the<body>itself, as this will hide everything from screen readers, including the dialog - make sure that focus is returned to the button that first opened the modal
Review how the working demos like Using inline styles do it, and apply the same behavior to the broken demos.