useModalOverlay breaks interaction of external overlay elements

[smitev]

Provide a general summary of the issue here

useModalOverlay sets by default in ariaHideOutside shouldUseInert: true.

That breaks interaction with external overlays not created with react-aria.
For example libraries for creating cookie consent dialogs that are loaded before the react-aria dialog.

🤔 Expected Behavior?

useModalOverlay should be have a prop to disable setting the inert (or aria-hidden) to the other HTML elements in the body.

😯 Current Behavior

At the moment you can't disable shouldUseInert on the ariaHideOutside used inside useModalOverlay

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

/

Version

/

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS Sequioa

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[devongovett]

Note that this was an accessibility issue before as well, just less visible. Previously we used aria-hidden instead of inert which would have hidden the element from screen readers. So not using inert isn't fully correct either. Also dialogs trap focus so those elements wouldn't have been reachable by keyboard either.

You can try applying data-react-aria-top-layer to those external elements to keep them interactive and visible to screen readers.

[smitev]

I agree, a18y wise before was also an issue, but at least only for screen readers. Now is blocking interactions fully.

data-react-aria-top-layer is not helpful for us, because we don't have code access / no exposed props to the cookie dialog library we use 😕

Btw. thanks for the amazing job your team is doing with React Aria. Highly appreciated!