Tabs

MediumDOM Manipulation20 min5 tests

Build an accessible tab interface with three tabs (Home, Profile, Settings) where clicking a tab marks it selected and shows its content in a panel.

Create a tabbed interface with three tab buttons labeled Home, Profile, and Settings, plus a single content panel below them.

Requirements:

Render the three tabs as real button elements.
The currently active tab button must have aria-selected="true"; the inactive tab buttons must have aria-selected="false".
Home is active on initial render, so the panel shows the Home content and Home is selected.
Clicking a tab makes it the active tab: it gets aria-selected="true", the previously active tab goes back to aria-selected="false", and the panel updates to show the clicked tab's content.
Render the panel with data-testid="tabpanel" (and role="tabpanel") containing the active tab's content text.

Use the exact panel content strings:

This exercises controlled state, conditional rendering, and accessible tab semantics — all with plain React state and no timers.

Requirements

Render three button elements labeled Home, Profile, and Settings
The active tab button has aria-selected="true"; inactive tab buttons have aria-selected="false"
Home is the active tab on initial render and its content shows in the panel
Clicking a tab selects it and shows that tab's content in the panel (data-testid="tabpanel")
Use the exact content strings: 'Welcome to the Home tab', 'This is your Profile', 'Adjust your Settings here'

Hints (4)

Track the active tab id with a single useState value, defaulting to the Home tab.
Store tabs as an array of { id, label, content } objects and map over them to render the buttons; render one panel for the active tab.
On each button set aria-selected={tab.id === activeId} so exactly one tab is selected at a time.
Give each tab a real <button> so getByRole('button', { name }) finds it, and give the panel data-testid="tabpanel" so getByTestId can read it.

Nykaa · CRED · Google · Delhivery · Meesho · Atlassian