ariaHideOutside on pages with many dom elements has very slow performance

[SlexAxton]

Provide your feedback here.

Unsurprisingly, on any popover that doesn't use isNonModal that uses ariaHideOutside to add aria-hidden to every other dom element gets very slow on large pages.

I have pages with a lot of content on them (like a diff page in github) that I want to be accessible via cmd-f. So I'm not eager to virtualize the content. When I open a menu on these pages, it sometimes takes more than 1 or 2 seconds for the menu to close because the main thread is frozen by going through and un-marking all of the items.

Additionally, if I end up needing to turn off this behavior my only mechanism is isNonModal. However, I do like some of the features of isNonModal={false} such as scroll locking, but I'd have to give those up in order to avoid the ariaHideOutside stuff.

Is there any middle ground? Would it be possible to mark just containing elements in a way that could be faster? Could we expose more granular control over ariaHideOutside vs isNonModal?

🔦 Context

No response

💻 Code Sample

No response

Version

3.35.1

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

If other, please specify

No response

What operating system are you using?

Mac OS X 14.5

[reidbarber]

This was fixed by @majornista in #4773, but then reverted in #4942 due to:

Issues found where you can no longer tab from a open Picker dropdown to adjacent focusable elements

We may want to revisit this at some point.

[devongovett]

I think we could probably add this back to ariaHideOutside as a mode that could be used when a popover/modal contains focus. In the case of a Select or ComboBox (which allow the user to tab away), we'd still need to use aria-hidden since inert would make the elements non-focusable.