Tabs

function TabsPattern({ activationMode = "automatic" }) {
  const [selected, setSelected] = useState(TABS[0].id);
  const [focused, setFocused] = useState(TABS[0].id);
  const tabRefs = useRef({});

  function moveFocus(index) {
    const tab = TABS[index];
    setFocused(tab.id);
    tabRefs.current[tab.id]?.focus();
    // Automatic activation: selecting follows focus immediately.
    if (activationMode === "automatic") setSelected(tab.id);
  }

  function onKeyDown(e) {
    const i = TABS.findIndex(t => t.id === focused);
    if (e.key === "ArrowRight") { e.preventDefault(); moveFocus((i + 1) % TABS.length); }
    if (e.key === "ArrowLeft")  { e.preventDefault(); moveFocus((i - 1 + TABS.length) % TABS.length); }
    if (e.key === "Home") { e.preventDefault(); moveFocus(0); }
    if (e.key === "End")  { e.preventDefault(); moveFocus(TABS.length - 1); }
    // Manual activation: arrowing only moves focus; Enter/Space commits it.
    if (activationMode === "manual" && (e.key === "Enter" || e.key === " ")) {
      e.preventDefault();
      setSelected(focused);
    }
  }

  return (
    <div role="tablist" aria-label="Account settings" onKeyDown={onKeyDown}>
      {TABS.map(tab => (
        <button
          key={tab.id}
          ref={el => (tabRefs.current[tab.id] = el)}
          role="tab"
          id={`tab-${tab.id}`}
          aria-selected={tab.id === selected}
          aria-controls={`panel-${tab.id}`}
          // Roving tabindex: only the focused tab is Tab-reachable.
          tabIndex={tab.id === focused ? 0 : -1}
          onClick={() => { setFocused(tab.id); setSelected(tab.id); }}
        >
          {tab.label}
        </button>
      ))}
      {TABS.map(tab => (
        <div
          key={tab.id}
          role="tabpanel"
          id={`panel-${tab.id}`}
          aria-labelledby={`tab-${tab.id}`}
          hidden={tab.id !== selected}
          tabIndex={0}
        >
          {tab.content}
        </div>
      ))}
    </div>
  );
}