[material-ui][Tabs] Keyboard navigation does not work with unselected tabs about material-ui HOT 4 CLOSED

Welp, it seems that my expectation doesn't match the ARIA, and, therefore of others.

Closing.

from material-ui.

Hey @MonstraG, thanks for opening this issue! I suspect this might have more to do with the Tabs demo within the docs than with the component itself. Using arrow keys to navigate around the Tab List and space/enter to activate a Tab worked fine for me in an isolated environment. Can you test it out here?

from material-ui.

Can you test it out here?

Item two and three are still not tab (↹) -reachable. (I cannot switch to Item two by just using tab (↹) or enter)

Using arrow keys to navigate

In both stackblitz and docs website, if I focus (active) Item one with tab (↹), I can then use arrow keys to switch to Item two or Item three, but I still would expect to be able to do so by tabbing (↹).

(added (↹) everywhere to differentiate between tab (↹) the keyboard key, and tab the interface element)

from material-ui.

Gotcha! I'm afraid, though, that as per the ARIA Authoring Practices Guide, if you've entered the TabList (or, in Material UI, Tabs) via the Tab key, and thus are focused on the active tab item, tabbing away shouldn't navigate you through the other items, but rather from the list to the content panels.

So, it seems like Material UI is behaving correctly. Take a look at other accessibility-focused projects such as Radix, React Aria, and Headless UI, which follow the same guidelines. The correct behavior is that you can traverse through the tab items via arrow keys.

from material-ui.