Switch Control and Scanning

// Roving Tabindex for switch scanning-friendly Tab panels
import React, { useState } from "react";

export function ScanningRovingTabs({ tabs }) {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleKeyDown = (index, e) => {
    let nextIndex = index;
    if (e.key === "ArrowRight") nextIndex = (index + 1) % tabs.length;
    if (e.key === "ArrowLeft") nextIndex = (index - 1 + tabs.length) % tabs.length;
    
    if (nextIndex !== index) {
      setActiveIndex(nextIndex);
      // Focus the newly active tab programmatically
      document.getElementById(`tab-trigger-${nextIndex}`)?.focus();
    }
  };

  return (
    <div className="border border-border rounded-md bg-card p-4">
      {/* Tablist grouping reduces scanning stops to 1 instead of N triggers */}
      <div role="tablist" aria-label="Benefits categories" className="flex border-b border-border mb-4">
        {tabs.map((tab, i) => (
          <button
            key={tab.id}
            id={`tab-trigger-${i}`}
            role="tab"
            aria-selected={activeIndex === i}
            // Only the active item is in the natural tab order (tabIndex=0)
            tabIndex={activeIndex === i ? 0 : -1}
            onClick={() => setActiveIndex(i)}
            onKeyDown={(e) => handleKeyDown(i, e)}
            className={`px-4 py-2 text-sm font-semibold border-b-2 -mb-px transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
              activeIndex === i ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>
      
      <div role="tabpanel" id={`tab-panel-${activeIndex}`} className="text-sm text-muted-foreground p-2">
        {tabs[activeIndex].content}
      </div>
    </div>
  );
}