Accessible tabs

Description

Create a reusable tabs component that follows the WAI-ARIA tabs pattern. Arrow keys move focus, Home and End jump to boundaries, and the active panel remains correctly labelled.

Requirements

The tab list, tabs, and tab panels expose their ARIA roles and reciprocal aria-controls and aria-labelledby relationships.
The first enabled tab is selected initially and only its associated panel is visible.
ArrowLeft and ArrowRight move focus and selection between tabs, wrapping at either end.
Home selects the first tab and End selects the last tab.
Changing tabs displays the matching panel and keeps that panel labelled by its active tab.

Keyboard navigation

Input

Focus the first tab and press ArrowRight

Expected output

Focus and selection move to the second tab

Constraints

Follow the ARIA tabs pattern
Support ArrowLeft, ArrowRight, Home, and End
Do not use an accessibility library

Hints

Hint 1

Model selection and keyboard focus explicitly, then connect every tab to exactly one panel.

Hint 2

Give only the active tab a zero tab index while the others remain reachable through arrow-key handling.

Hint 3

Normalize each navigation key into a target index, including wrapping and the Home and End boundaries.