Mini build: keyboard-accessible tabs
Turn the three plain buttons into an accessible tabs widget following the WAI-ARIA tabs pattern (automatic activation):
A container with role="tablist" and aria-label="Plans"; each button role="tab" with aria-selected and aria-controls → its panel's id; each panel role="tabpanel" with aria-labelledby → its tab's id, hidden unless selected. Build ids with useId.
Roving tabindex: only the selected tab has tabIndex={0}; the others have -1.
Keys (on a focused tab): ArrowRight and ArrowLeft select and focus the next/previous tab, wrapping around; Home and End select and focus the first/last tab. Clicking a tab still selects it.
What Check tests
- A labelled tablist with three tabs
- Free is selected and is the only tab in the Tab order
- Tabs and panels point at each other, and only the selected panel shows
- ArrowRight selects and focuses Pro
- ArrowLeft twice from Pro wraps around to Team
- Home and End jump to the first and last tab
- Clicking a tab still selects it
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.