Skip to content

fix: Keyboard navigation in desktop-options tabs [#1135]

Marwan Zibaoui requested to merge 1135-options-tab-keyboard-a11y into next

To follow WAI-ARIA Guidelines on tabs, we should only make the current tab reachable through the Tab key. Siblings tabs should be reachable and activated with the arrow keys, and not with the tab key

This is achieved by setting all tabs tabindex to -1, except for the current tab that should have a tabindex of 0.

If you are interested in an alternative implementation of accessible tabs, check the keyboard behavior of the <Tabs> component of the react-aria component library by adobe.

In commit 2e25900c we changed the tabindex of the default tab to 0, which caused the problem. In that commit the initial tabindex was changed in the HTML but there was no change in the logic managing the tabindexes, leading me to believe it was a mistake.

Before/After:

CleanShot_2023-10-10_at_10.56.07

Related to #1135 (closed)

Edited by Marwan Zibaoui

Merge request reports