24Implement a simple tab switcher with HTML, CSS and JavaScript

Implement createTabs(container, tabs). tabs is an array of { label, content }. Render an accessible tab switcher into container and return { select(index), selectedIndex }.

const api = createTabs(document.getElementById("root"), [
  { label: "HTML", content: "Structure" },
  { label: "CSS", content: "Presentation" },
  { label: "JavaScript", content: "Behaviour" },
]);
api.select(2); // shows the JavaScript panel

Requirements

• Render a role="tablist" with one <button role="tab"> per item, and one role="tabpanel" per item.
• Link them: each tab has aria-controls pointing at its panel's id, and each panel has aria-labelledby pointing at its tab. Ids must be unique, even with several tab switchers on the page.
• The selected tab has aria-selected="true"; others "false". Only the selected panel is visible (use hidden).
• Clicking a tab selects it.
• Keyboard: ArrowRight and ArrowLeft select and focus the next or previous tab, wrapping around; Home and End go to the first and last tab.
• Only the selected tab is in the Tab order (tabIndex 0); the others have tabIndex -1.