Reverse trap

[eduardodallmann]

trafficstars

Hello, how to prevent the elements inside from getting the focus? Allow all elements of the page to receive focus, except for what is inside the component. Basically how to reverse the focus trap? Like this: https://www.starbucks.com/developer/pattern-library/components/prevent-focus/

[theKashey]

Sounds like a little different use case. From the starbucks: this time they have one major A11y limitation: They don't prevent screen readers from navigating to items that are tabbable outside the focus trap/loop. - that's why other packages, like react-focus-on and aria-hidden were created - to "hide" everything but the active lock.

However all these libraries (and this one) are designed to keep only "location" and block the rest, while you are asking for 🤷‍♂️ reverse logic :) Technically you can listen to onFocus inside some specific area you don't want to be focused and on focus use logic exposed from focus-lock to calculate the next focusable element (like the next elements which shall be focused if the some area is disabled. However, I could not give you any example.

Let me think about how this can be properly addressed.

[tamlyn]

I'm looking for this too. My use case is a multi step form where one section is disabled until the previous section is complete.

[theKashey]

That's another very good use case. But probably a little complicated as well - one should not only disable focus, but hide that area from screen readers as well as disable pointer events. Everything in "reverse"

[stale[bot]]

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.