aria-hidden=true on body breaks Accessibility <body class="ReactModal__Body--open" aria-hidden="true">
Author: pauljadamCreated Mar 22, 2017Updated Jul 8, 2025
Labelsenhancement
Summary:
Screen reader users cannot interact with any modal content because aria-hidden=true is incorrectly placed on the body tag.
Steps to reproduce:
- Open a test modal, https://reactcommunity.org/react-modal/examples/minimal.html.
- Activate modal dialog.
- Check that aria-hidden=true is incorrectly placed on the body tag of the modal's html document.
Expected behavior:
Screen reader user is trapped inside the modal dialog.
Actual behavior:
Screen reader user can't interact with anything on the page at all because of aria-hidden=true on the body.
Source: reactjs/react-modal