Tabs: can't navigate to the next tab using the keyboard

[omaxel]

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.

[zetareticoli]

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?

[omaxel]

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?

[zetareticoli]

You did it! Great work.

At this point, you could self-assign this issue and go ahead in the dedicated branch.

Thank you!

[zetareticoli]

Fixed in 9de70ac