search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
13.08k stars 1.14k forks source link

`ariaHideOutside` on pages with many dom elements has very slow performance #7377

Open SlexAxton opened 1 week ago

SlexAxton commented 1 week ago

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 commented 6 days ago

This was fixed by @majornista in https://github.com/adobe/react-spectrum/pull/4773, but then reverted in https://github.com/adobe/react-spectrum/pull/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.