How to allow focusing elements of the browser (like address bar)

[buondevid]

Hi, we can't find any option to allow focusing stuff from the browser, like the address bar. We want to focus trap inside the page but we want to allow tabbing out from it to the address bar and other browser things. Is there a way?

Thank you

[stefcameron]

@buondevid Thanks for asking. Unfortunately, no, there's no way to let the tab key escape to the browser chrome outside of the DOM once the trap is active. You can allow clicking outside the trap, but that's with the mouse, not the tab key (see allowOutsideClick Focus-trap option), and even without that option enabled, with the mouse, you can always access the browser chrome (but if the option off, you don't be able to click on anything in the DOM that's outside the trap once it's active).

[buondevid]

ok thank you, we ended up dropping the library because of this, it wasn't fit for our use case

[stefcameron]

I'm glad I could help you make the right decision for your requirements! 🙂

[buondevid]

Also, if that might help you or anyone reading in the future, we noticed that the Focus Trap doesn't contain the Voice Over on an iPhone, meaning the Voice Over will read stuff outside the focus trap when you use the swipe to go to the next element. So yea, probably the library is not a good fit to meet these kind of accessibility requirements on mobile (we ended up using inert, but also the new dialog works well).