How to trap tab focus in element but allow tabbing to browser UI?

[Ambient-Impact]

Hi there. Apologies if this has been answered elsewhere (searched but couldn't find anything): is there an easy way to trap keyboard focus like ally.maintain.tabFocus does, but allowing tabbing to the browser UI?

I've been using ally.maintain.disabled, but it seems a bit heavy handed and can cause a noticeable delay on pages that have many elements. I'm working on an offcanvas component which covers part of the document like a modal dialog, and I'd prefer to trap tabbing and use ally.maintain.hidden rather than ally.maintain.disabled for performance.

[rodneyrehm]

Hey there,

https://allyjs.io/tutorials/accessible-dialog.html#trapping-focus-inside-the-dialog and https://allyjs.io/tutorials/accessible-dialog.html#reacting-to-kbdtabkbd-and-kbdshift-tabkbd try to explain this.

But you're already on the right track - ally.maintain.disabled is what you need. If the performance hit is too much, you might want to have a look at wicg-inert. I've been using that in my VueJS based projects for the past 2 years…

[Ambient-Impact]

Ah, thanks. Do you find that the wicg-inert polyfill is significantly faster than ally.maintain.disabled?

[rodneyrehm]

I haven't benchmarked it. But as I recall their implementation it should be faster. Afair they chose to ignore some obscure cases allowing them to go with a faster implementation (than literally testing every node in the document).

[Ambient-Impact]

I see. I'll have to give that a try sometime. Thanks!