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?

Uh oh!

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

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions