Accordion II — UI Challenge | FineFrontend

Practice workspaceSign in

React/Accordion IImedium

00:00

Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.

User interface challenge

Accordion II

medium20 min

Build a reusable accordion whose native heading buttons reveal and hide their associated panels. Each group starts fully collapsed, permits at most one expanded item, and can return to having no expanded item.

Add accessible expanded state and stable links between each header and panel. The supplied demo includes two populated groups, an empty group, and a single-item group. Keep state independent for every instance and complete the markup starters.

Requirements

Accept fixed items with unique value, label, and content fields and a unique groupId. Values and group IDs are safe to use in the required HTML IDs. Preserve the root data-testid equal to groupId.
Start every item collapsed. Clicking a closed header opens its associated panel and closes any other open panel in that group. Clicking the open header closes it, leaving the group fully collapsed.
Render each header as a native button with type="button", the item label, and data-value equal to the item value. Wrap it in an h3 with that button as the heading's only element. Preserve the demo's h1 page title and h2 group headings.
Give every header the stable id groupId + "-header-" + item.value. Set aria-controls to groupId + "-panel-" + item.value and aria-expanded to the string "true" when its panel is open or "false" when closed. The supplied CSS styles aria-expanded.
Keep every panel mounted with data-panel equal to its item value and the item's content. Give it id groupId + "-panel-" + item.value, role="region", and aria-labelledby equal to its associated header ID.
Use the native hidden attribute for every closed panel and remove it from the open panel. At most one panel per group may be visible; a fully collapsed group has no visible panels.
Preserve header and panel IDs across toggles and keep IDs unique across groups. Store state in each component instance so actions in one group do not change another.
Leave every header enabled and collapsible. Do not use aria-disabled or aria-pressed. Keep native button Tab, Shift+Tab, Enter, and Space behavior, with every header in the ordinary tab sequence.
An empty items list renders the group root without headers, buttons, or panels. A single item can repeatedly open and close.
Preserve the supplied demo items and all four groups. Keep styles in the separate supplied CSS file and implement the accordion without an existing accordion component library.
Custom arrow-key navigation, roving tabindex, focus management, controlled props, dynamic item replacement, and asynchronous content are outside this stage's scope.

Examples

Example 1

Input: Initial render
Output: All six headers have aria-expanded="false" and all six mounted panels are hidden. The empty group has no headers or panels.

Example 2

Input: Click HTML, then CSS in primary
Output: HTML first opens. CSS then opens, its header has aria-expanded="true", and the HTML panel becomes hidden. Other groups stay collapsed.

Example 3

Input: Click the open CSS header
Output: The CSS panel is hidden and all primary headers have aria-expanded="false".

Example 4

Input: The item with value html in group primary
Output: Header ID: primary-header-html. aria-controls: primary-panel-html. That region has id primary-panel-html and aria-labelledby="primary-header-html".

Example 5

Input: Click Angular in single twice
Output: Its region opens and then closes. The primary and secondary groups retain their own state.

All groups start collapsed. A populated group can show one associated panel or none. Headers and panels retain their stable IDs and accessibility links through every change.

What the tests check

Preserves four groups and native heading buttons
Renders correctly named native buttons
Starts with every primary header collapsed
Starts with secondary and single headers collapsed
Keeps all six panels mounted and hidden initially
Gives every header a stable unique ID and matching control
Labels every region with its associated header
Clicking HTML expands its associated panel
Clicking the open HTML header collapses the whole group
Clicking CSS replaces the open HTML panel
Clicking JavaScript replaces the open CSS panel
Returning to HTML restores its content and expanded state
Preserves ID relationships through switches and collapse
Repeated switches keep at most one expanded panel
Keeps expanded headers collapsible without disabled or pressed state
Keeps every header in the ordinary tab sequence
Focusing a collapsed header does not expand it
Primary toggles leave the secondary group collapsed
Secondary toggles preserve the primary expanded panel
Secondary headers support switching and complete collapse
Empty items preserve a root without headers or panels
A single item opens with matching expanded state and region links
A single item repeatedly opens and closes independently
Repeated group actions retain every mounted panel and its content

References

WAI-ARIA Accordion Pattern

ComponentsStateEventsAccessibilityHeading and button semanticsExpanded stateHeader and panel relationshipsMounted hidden panelsIndependent instances

Back

Preparing your workspace…