Tabs: can't navigate to the next tab using the keyboard
omaxel opened this issue · comments
The user is not able to switch between tabs by using the tab key followed by enter. The elements which represent the tabs (<label>) are not focusable.
We should consider using the "roving tabindex" technique.
https://web.dev/control-focus-with-tabindex/#create-accessible-components-with-%22roving-tabindex%22
What do you think?
The roving tabindex technique requires JavaScript since the component needs to listen for keypress events (e.g. arrow up).
After reviewing the behavior of tabs, I believe the real problem relies on labels' keyboard interactions (pressing enter or space) not being reflected to the linked radio button. As proof of this, I made the labels focusable by adding tabindex=0. Pressing the enter or the space key after focusing one of the labels, doesn't affect the state of the related radio button.
In order to solve the problem, I think we should remove display: none from the radio buttons allowing focus on them. We still need to hide them from the UI by using other techniques.
With this approach:
- it's possible to navigate between tabs using left and right arrow keys; the same interaction provided by radio buttons;
- clicking a label will check and focus the related radio button;
- labels can also display the outline (or any other focus indicator) based o the focused radio button.
You can find a preview in the image below:
Also, note how the focus ring disappears when I click outside of the element, like on any native element.
What do you think?
You did it! Great work.
At this point, you could self-assign this issue and go ahead in the dedicated branch.
Thank you!
Fixed in 9de70ac