aria-hidden strategy outdated with aria-modal="true"

[naomiaro]

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

1. Go to https://react-bootstrap.github.io/react-overlays/api/Modal
2. Click onOpen Modal
3. aria-hidden is added to the background content with id="___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]

[jquense]

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?

[naomiaro]

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

[jquense]

The focus trap behavior is intentional in how focus can shift out of the window and back in

[naomiaro]

? 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/