Interaction between modals and aria-hidden #6506
Unanswered
acdha
asked this question in
Accessibility
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
We had an interesting issue reported regarding the modal component's use of
aria-hidden. The page had a structure like this, where the modal is not a direct descendent of<body>:The current JavaScript hides every element matching
body > *:not(.usa-modal-wrapper):not([aria-hidden])"which causes that tree to become this:This produces what appears to be an invalid state where the active dialog is a child of an
aria-hiddenelement. Some browser and screen reader combinations (e.g. Chrome with NVDA) appear to ignore that and read the dialog anyway while others behave oddly (e.g. Safari + VoiceOver will not read the page and while you can use the keyboard navigation shortcuts (VO+Shift+Arrow) to announce the button group, it doesn't follow the normal navigation flow and the dialog text never read).Some possible solutions:
aria-modal, which has solid browser support and is appealing for not needing to hide everything else, but would be the biggest change in terms of the need to test all of the various supported browser, OS, and assistive technology permutations.aria-hiddenon everything which is a parent of the modal. This seems error prone and potentially significant from a performance standpoint so I do not think this makes sense.<body>element.Beta Was this translation helpful? Give feedback.
All reactions