reactjs
React Modal generates three ARC Toolkit errors when modal is open
Summary:
ARC Toolkit is used for covering accessibility defects. When a modal is open, the data-react-modal-body-trap elements each generate the error "Non-active element in tab order", and the app root generates the error "aria-hidden used on parent of focusable"
Steps to reproduce:
Pre-req: have ARC toolkit installed
- browse to https://codesandbox.io/s/9xnen
- Open the rendered project in a new window
- Click to open the modal
- In your dev tools, open ARC Toolkit and click "Run tests"
Expected behavior:
No new errors generated
Link to example of issue:
Sandbox starter: https://codesandbox.io/s/9xnen
Additional notes:
For the "Non-active element in tab order" errors, I was able to suppress them by adding aria-hidden to the body traps. I'm not sure what the solution for setting #root to aria-hidden would be. I was able to suppress the error and keep the button out of the tab order by setting #root[disabled], but I don't know that suppresses all the screen reader content below it.
@Fordi This problem happens because you are setting the app element to the #root, which contains all your application. The correct way is to create and adjacent element to place the modals.
<div id="app" />
<div id="modals" />
This is on the roadmap for v4. See https://github.com/reactjs/react-modal/issues/988.
@diasbruno do you have an update on this thread?
Can you also explain the purpose of the <div data-react-modal-body-trap="" tabindex="0" style="position: absolute; opacity: 0;"></div> DOM elements?
CC: @Fordi
