Skip to content

The interview workspace

Practice

Overview01 Question bank02 Review03

● LOCAL WORKSPACE
Progress saved in this browser

Overview Questions Review

Machine coding Frontend components

4 / 31

Build tabs

EasyP1BuildStatus

Build a tabs component in React.

Time box: 40 to 50 minutes. Get the ARIA pattern and keyboard behaviour right before styling.

Requirements

0 / 7

Renders a tab list and a panel per tab; clicking a tab shows its panel
Works uncontrolled with defaultValue and controlled with value and onChange
Follows the ARIA tabs pattern: role="tablist", role="tab" with aria-selected and aria-controls, role="tabpanel" with aria-labelledby
Roving tabindex: only the selected tab has tabIndex=0; Tab moves into the panel, not through every tab
Arrow Left and Right move focus (and select) with wrap-around; Home and End jump to the first and last tab
Panels are lazy: a panel renders its content the first time it is selected and stays mounted afterwards (or unmounts, via a keepMounted prop)
Disabled tabs are skipped by keyboard navigation

Stretch goals

0 / 3

Only after every requirement works.

Vertical orientation with Arrow Up and Down
Manual activation mode: arrows move focus, Enter or Space selects
Sync the active tab with the URL hash

Hints

Workspace

Your files are saved in this browser as you type.

When every requirement works, mark it complete to count it as solved.

Solution notes

How a strong candidate structures it, and what interviewers check.

Your notesSaved automatically