aria-hidden strategy outdated with aria-modal="true"
naomiaro opened this issue · 4 comments
Describe the bug
"Applying the aria-modal property to the dialog element replaces the technique of using aria-hidden on the background for informing assistive technologies that content outside a dialog is inert."
https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html#rps_label
To Reproduce
- Go to https://react-bootstrap.github.io/react-overlays/api/Modal
- Click onOpen Modal
aria-hiddenis added to the background content withid="___gatsby"
Expected behavior
aria-hidden should not be added to the background content with id="___gatsby"
Screenshots
If applicable, add screenshots to help explain your problem.
Environment (please complete the following information)
- Operating System: [macOS]
- Browser, Version [Chrome 90]
- react-overlays Version [Current on the docs website]
We do both to cover all the bases, last I checked aria-modal wasn't super well supported by SRs. Is this causing a problem or a heads up?
Using MacOS for all:
It's causing some axe errors to be reported when using axe run on the content (both chrome plugin/cypress-axe use etc)
I'm noticing an issue with the focus trap, but perhaps unrelated.
Chrome 90 on this demo using "Launch Demo Modal":
https://react-bootstrap.github.io/components/modal/#modals-live
The focus trap works better when I have VoiceOver enabled. Without VoiceOver enabled, You can tab through to the save changes button, and then start shift tabbing back. Past the top right x for close window, the modal will scroll the background content of the page and the focus is on an unknown item at this point.
I can create a separate ticket for the focus trap issues with more details if needed.
Vue Bootstrap modals seem to follow the focus trap more of W3
https://bootstrap-vue.org/docs/components/modal
The focus trap behavior is intentional in how focus can shift out of the window and back in
? A modal shouldn't allow focus outside of its focusable content while it is open though. The behaviour is different here than all other modal libraries I've compared to. Only a dialog that's not a modal should allow focus to shift outside to the main window.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role
Dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with).
https://reactcommunity.org/react-modal/accessibility/#keyboard
https://van11y.net/downloads/modal/demo/index.html
https://bootstrap-vue.org/docs/components/modal
https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html#rps_label
http://reactcommunity.org/react-modal/examples/minimal/