How do you approach DOM: Activate a Tab (ARIA State)?

document.querySelectorAll('[role="tab"]') returns a NodeList; Array.from it so you can use forEach with an index.

What are common mistakes on DOM: Activate a Tab (ARIA State)?

An incomplete dependency array, which pins the effect to a stale closure. Mutating state in place instead of replacing it, so no re-render is scheduled. Never cleaning up the timer, listener or subscription on unmount.

gitGood.dev

← Back to problems

DOM: Activate a Tab (ARIA State)

EasyFrontend Frameworks

Description

> **Runs in a real DOM.** Each test seeds the page with a tab list before calling your function. The page has three `[role="tab"]` buttons and three `[role="tabpanel"]` panels in matching order. The first tab starts selected. Implement `activateTab(index)` so that the tab at `index` becomes the only selected tab: - `aria-selected` is `"true"` on that tab and `"false"` on the others - the `active` class is on that tab only - `tabindex` is `0` on that tab and `-1` on the others (roving tabindex) - every panel except the matching one has the `hidden` attribute If `index` is out of range, change nothing. Finally return `{ tabs, panelsHidden }` where `tabs` is the array of each tab's `aria-selected` attribute (strings) and `panelsHidden` is each panel's `hidden` property (booleans), both read back from the DOM.

Example 1

Input: index = 1

Output: {"tabs":["false","true","false"],"panelsHidden":[true,false,true]}

Example 2

Input: index = 0

Output: {"tabs":["true","false","false"],"panelsHidden":[false,true,true]}

Constraints

- Exactly 3 tabs and 3 panels, in document order. - index is an integer; treat anything outside 0..2 as a no-op.

DOM: Activate a Tab (ARIA State): approach, complexity and pitfalls

An easy frontend problem, graded against 5 test cases (2 of them hidden).

The pattern: Frontend

React and browser-platform problems - hooks, event handling, and rendering behaviour.

Reach for it when you see: A component, hook, or DOM-behaviour question rather than an algorithm.

If you are stuck

Show the 3-step hint ladder

document.querySelectorAll('[role="tab"]') returns a NodeList; Array.from it so you can use forEach with an index.
aria-selected is an attribute, so setAttribute('aria-selected', String(on)); hidden is a boolean property (panel.hidden = ...).
classList.toggle('active', on) adds or removes based on the boolean in one call.

The optimal approach

Show the approach: A tab has three pieces of state, and they must agree

Interviewers ask this because it is small and still exposes whether you know the difference between an *attribute* and a *property*, and whether you keep accessibility state in sync with the visual state:

- `aria-selected` is an attribute - screen readers read it; `setAttribute` with a string.

- `hidden` is a reflected boolean property; `panel.hidden = true` adds the attribute, `false` removes it.

- Roving tabindex (`0` on the active tab, `-1` on the rest) makes the tab list a single tab stop; arrow keys move between tabs.

Reading state back from the DOM at the end (rather than returning what you *think* you set) is how you would write a test for this in the real codebase too.

Time: O(tabs).

The full reference solution in every supported language stays in the editor above - reveal it there once you have had a real attempt.

What the tests check

Read off this problem's own test suite, so these are the cases a submission actually has to survive.

Negative numbers. The suite includes negative values. Running-sum, min/max seeding and any "initialise to zero" step need to handle them.
Zero. Zero appears in the input, which is the value most likely to break a truthiness check used in place of an explicit comparison.

Common Frontend mistakes

These apply to the pattern as a whole, not just this problem.

An incomplete dependency array, which pins the effect to a stale closure.
Mutating state in place instead of replacing it, so no re-render is scheduled.
Never cleaning up the timer, listener or subscription on unmount.