Why the active tab panel has tabindex="0"?

❓Question

I have a set of tabs and a set of corresponding tab panels. As in your basic example. I noticed that the active tab panel has tabindex="0" attribute. Why is this needed? This makes the active panel tabbable. So when I use tabs inside a dialog along with a focus lock that lets me tab through all the controls in the dialog, the active panel receives its own focus before all the controls in it, as I tab through the dialog. Is there a way to fix that? I use the same react-focus-lock library that you use internally, if this matters.

[chaance]

@coreylight If you pass tabIndex to the panel it will override what we set internally. If you pass null it will remove the tabIndex altogether (TypeScript will complain, but you can cast as any or ignore the line if you’d like).

I don’t think this is a great idea because of the aforementioned accessibility requirements. Another option would be to use onFocus and onPointerDown to figure out if the user is interacting with the scroller and, if so, re-focusing the input in that case. This is similar to how we manage focus in combobox when the user interacts with options in the popover.

[IanVS]

I had this question as well, why tab panels are a tab target. In a normal document flow, static content does not receive focus, and pressing tab jumps from one interactive element to another. I’m trying to learn more about accessibility, and am not proficient with assistive technologies. Is the reason the panel should be a target because it might have been hidden when the page first loaded, and therefore the tech won’t necessarily know it’s there unless it gets focus?