Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 18.4 — Accessible Interactive Components
React · Example 1 of 4

Tabs with roving tabindex and arrow keys

Exactly one tab is ever in the Tab order, and it's always the selected one. Arrow keys wrap around. The panel has tabIndex={0} because it contains no focusable element, so keyboard users can still reach (and scroll) it. CSS styles the tabs straight from aria-selected.

Dialogs, disclosures, tabs, menu buttons and comboboxes each have a standard keyboard pattern in the WAI-ARIA Authoring Practices; build them with the right roles, states and keys, prefer native elements where they exist, and reach for a tested headless library for the hard ones.

Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.

Ready for more? This phase has 6 hands-on exercises with automatic checks.

Practice questions

Write the code in the editor, run it, then open the model answer to compare.

01

Write an accessible Accordion from three disclosures where opening one closes the others.

02

Add Home and End support to the menu button example.

Explain it without notes

01

Describe the keyboard interaction of the WAI-ARIA tabs pattern and how roving tabindex implements it in React.

02

When would you use a disclosure, a menu button and a combobox? Give a native alternative for each where one exists.

03

Why does a combobox use aria-activedescendant instead of moving focus into the list?

04

What does a headless component library give you, and name two.

Tabs with roving tabindex and arrow keys

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

start       | focus: Overview | selected: Overview | in Tab order: [ 'Overview' ]
ArrowRight  | focus: Specs    | selected: Specs    | in Tab order: [ 'Specs' ]
ArrowRight  | focus: Reviews  | selected: Reviews  | in Tab order: [ 'Reviews' ]
ArrowRight  | focus: Overview | selected: Overview | in Tab order: [ 'Overview' ]
ArrowLeft   | focus: Reviews  | selected: Reviews  | in Tab order: [ 'Reviews' ]
End         | focus: Reviews  | selected: Reviews  | in Tab order: [ 'Reviews' ]
Home        | focus: Overview | selected: Overview | in Tab order: [ 'Overview' ]