Tabs in JavaScript

Tabs show several tab buttons but only one panel: the panel of the selected tab. One number in state, the index of the selected tab, decides everything else: which button says it is selected, which text the panel shows, and where the keyboard goes.

Screen readers learn the pattern from roles: role="tablist" around the buttons, role="tab" on each button, aria-selected on the chosen one, and role="tabpanel" on the panel. The keyboard pattern: the Tab key stops only on the selected tab (tabIndex 0, the others -1), and ArrowRight and ArrowLeft move between the tabs, wrapping around at the ends.

An attribute that follows state, on another component:

const [open, setOpen] = useState(false);
<button aria-expanded={open} onClick={() => setOpen(!open)}>Menu</button>

Wrapping uses the remainder %: with 4 photos, (3 + 1) % 4 is 0, back to the first. Going left, (0 - 1) % 4 is -1 in JavaScript, so add the length first: (0 - 1 + 4) % 4 is 3, the last photo.

The check opens the page, clicks a tab and presses the arrow keys. Your page must show:

> open the page
    button: Details (selected)
    button: Delivery
    button: Reviews
    tab panel "Details"
      text: A blue mug for tea or coffee, $12.
> click "Delivery"
    button: Delivery (selected, focused)
    tab panel "Delivery"
      text: Orders leave the shop within 2 days.
> press ArrowRight   →  button: Reviews (selected, focused)
> press ArrowRight   →  button: Details (selected, focused)   (wraps around)
> press ArrowLeft    →  button: Reviews (selected, focused)   (wraps back)

Your task: the TABS list and the tab buttons are already in src/App.jsx. Add the active state, the tab panel, and aria-selected, tabIndex and a click on each tab. Then write handleKeyDown, which moves the selection with the arrow keys, wrapping at both ends, and moves the focus to the new tab.

Assignment
Follow the Coding Tutorial to build tabs that switch on a click and with the arrow keys, and that a screen reader can follow.

Hint
Every tab attribute compares index with active. In handleKeyDown, work out next first, then set it as active and focus that tab's button by its id.