-
Notifications
You must be signed in to change notification settings - Fork 810
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React Modal generates three ARC Toolkit errors when modal is open #962
Comments
@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 #988. |
@diasbruno do you have an update on this thread? Can you also explain the purpose of the CC: @Fordi |
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
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 toaria-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.The text was updated successfully, but these errors were encountered: