Accordion III

Requirements

• Accept fixed items with unique value, label, and content fields, plus a unique groupId. Values and group IDs are suitable for HTML IDs. Items remain fixed after mount in this exercise.
• Preserve the root data-testid equal to groupId. Initially close all panels. Clicking a closed header opens its panel and closes any other open panel in that group; clicking the open header closes every panel in that group.
• Render each header as a native button with type="button", its item label, and data-value equal to its value. Wrap each button in an h3 whose only element child is that button. Preserve the supplied h1 page heading and h2 group headings.
• Give each button the stable id groupId + "-header-" + value and aria-controls equal to groupId + "-panel-" + value. Set aria-expanded to "true" only while that button's panel is open and "false" otherwise.
• Keep one panel per item mounted at all times with data-panel equal to its value, id groupId + "-panel-" + value, role="region", and aria-labelledby equal to that item's header ID. Use the native hidden attribute on closed panels and remove it from the open panel. IDs remain stable across interactions.
• Preserve each panel's content paragraph with data-content and its native link with href="#practice", data-content-link equal to its value, and text Practice followed by its label. Closed panels and their links must not participate in the page's normal keyboard traversal.
• Keep every header in the normal page Tab sequence, including closed headers. Native buttons already provide tabindex 0; an explicit tabindex="0" is also valid. Do not use a roving tabindex or move focus when a header simply receives focus.
• On an unmodified ArrowDown or ArrowUp from a header, prevent the default action and focus the next or previous header in that same group, wrapping at both ends. These wrapping arrow-key conventions are requirements of this challenge.
• On Home or End from a header, prevent the default action and focus that group's first or last header. Arrow keys, Home, and End must never open, close, or switch panels. Single-item groups keep focus on their only header; empty groups render no headers, panels, or links.
• Leave Ctrl-, Alt-, and Meta-modified navigation unhandled. Shift-modified navigation may be ignored or behave like ordinary navigation. Leave horizontal ArrowLeft and ArrowRight and unrelated keys unhandled.
• Keep native Enter and Space button activation and native Tab and Shift+Tab traversal. Do not prevent their default actions, add synthetic activation handlers, or trap focus. The visible practice link must be reachable in the page's Tab sequence.
• Keep expansion and focus navigation independent for each component instance. Repeated clicks and navigation must not duplicate panels, change IDs, or affect other groups. Use visible focus indicators and aria-expanded for expanded styling.
• Preserve the supplied primary, secondary, empty, and single fixtures and their group IDs. Keep styles in the supplied separate CSS files and implement the component without an accordion library.
• Disabled items, dynamically changing items, controlled expansion, multiple open panels, and asynchronous content are outside this exercise.

Examples

Input: Initial render
Output: All panels are mounted and hidden. Primary has HTML, CSS, and JavaScript headers; secondary has React and Vue; single has Angular; empty has no headers or panels.

Input: Click HTML, then CSS in the primary group
Output: Only primary CSS is expanded. Its panel shows CSS styles the page. and the Practice CSS link.

Input: With CSS open, focus HTML and press ArrowUp
Output: Focus wraps to JavaScript. CSS stays open and its header remains aria-expanded true.

Input: Press End, then Home in a populated group
Output: Focus moves to the last header, then the first header. The open panel does not change.

Input: Activate an open header with Enter or Space
Output: Native button activation closes that panel. The rest of the group stays closed.

Input: Press Tab from an open header
Output: The browser moves to its Practice link, then continues through the next focusable elements. Hidden-panel links are skipped.