Tabs III

Requirements

• Accept fixed items with unique value, label, and panel fields, an optional defaultValue, a unique groupId, and a required label for the tablist’s accessible name. Values and group IDs are suitable for use in HTML IDs; items stay fixed after mount.
• Initialize selection to defaultValue when it matches an item; otherwise select the first item. Preserve the root data-testid equal to groupId. An empty group renders its root without a tablist, tab buttons, or tab panels.
• For each populated group, render a container with role="tablist", aria-label equal to label, and aria-orientation="horizontal". The supplied names are Frontend topics and More frontend topics.
• Render each label as a button with type="button", role="tab", and data-value equal to its item value. Set its id to groupId + "-tab-" + value and aria-controls to groupId + "-panel-" + value.
• Set aria-selected="true" on exactly the selected tab and "false" on all other tabs. Use a roving tabindex: the selected tab has tabindex="0" and every other tab has tabindex="-1".
• Keep every panel mounted with role="tabpanel", id equal to groupId + "-panel-" + value, and aria-labelledby equal to its tab’s id. Display exactly the selected panel; set the HTML hidden attribute on inactive panels. IDs remain stable when selection changes.
• The visible text-only panel has tabindex="0" so keyboard users can reach its content. Inactive panels have tabindex="-1" or omit tabindex, and are hidden from the page’s tab sequence.
• Automatically select a tab whenever it receives focus. Clicking a tab must select it and move focus to that tab, including when a click is invoked programmatically.
• When a tab receives ArrowRight or ArrowLeft, prevent the default action and focus and activate the next or previous tab, wrapping at either end. Home and End also prevent their default action and focus and activate the first and last tab.
• Leave ArrowUp and ArrowDown unhandled for normal horizontal-page scrolling. Leave Ctrl-, Alt-, or Meta-modified navigation unhandled. Shift may retain ordinary navigation behavior or be ignored.
• Keep native Tab and Shift+Tab traversal, native Enter and Space button activation, and unrelated keys. Do not intercept these keys or trap focus inside the tablist.
• Each group maintains independent selection and focus navigation. Repeated activation must preserve one selected tab and one visible panel without adding duplicate elements.
• Preserve the supplied content, group IDs, labels, file paths, and CSS files. Use aria-selected for active styling, visible focus indicators, and hidden-panel styling. Do not use an existing tabs component library.
• Vertical orientation, disabled tabs, dynamically changing items, deletion, controlled selection, and asynchronous panel loading are outside this exercise.

Examples

Input: Initial render
Output: Primary selects HTML; secondary selects CSS. Each selected tab has tabindex 0 and exposes its matching text panel.

Input: Focus primary HTML, then press ArrowRight
Output: Focus moves to CSS, CSS becomes selected, and the primary CSS panel becomes visible. The secondary group stays on CSS.

Input: Focus primary HTML, then press ArrowLeft
Output: Focus wraps to JavaScript and its panel becomes visible.

Input: Press End, then Home in a populated group
Output: End focuses and activates the last tab; Home focuses and activates the first.

Input: Press Tab while a tab is focused
Output: Normal browser traversal moves to the visible text panel, then continues through the rest of the page.

Input: Empty items
Output: The empty root contains no tablist, tabs, or panels.