Tabs III

Make the accessible tabs keyboard-navigable the way the ARIA Authoring Practices Guide specifies: the whole tablist is a single Tab stop, and once focus is on it, the arrow keys move between tabs (Home/End jump to the ends). This is the roving tabindex pattern — exactly one tab is tabbable at a time, and focus follows the selection.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

The ARIA tabs from before, now with roving tabindex and Arrow/Home/End key handling.

Examples

Tab into the tablist → lands on the SELECTED tab (one stop, not three)
ArrowRight           → next tab (wraps from last to first), focus + panel follow
ArrowLeft            → previous tab (wraps from first to last)
Home / End           → first / last tab
Tab again            → leaves the tablist (into the panel), not the next tab

Roving tabindex:  selected tab → tabIndex 0;  all others → tabIndex -1

Notes

• Roving tabindex. Only the selected tab has tabIndex={0}; the rest are -1. So Tab enters the tablist once (onto the selected tab) and the next Tab leaves it — arrows handle movement within.
• Arrow keys move selection. On the tablist's keydown, ArrowRight/Left change the selected index (wrapping), Home/End go to the ends; preventDefault so the page doesn't scroll.
• Focus follows selection. After a keyboard move, focus the newly selected tab (keep a ref per tab) — otherwise focus is left on a now--1 element.
• Premium / hard. Combines refs, roving tabindex, and keyboard handling on top of the full ARIA contract.