Machine Coding: Accessible Tabs Compound Component

1import React, { createContext, useContext, useState, useRef, KeyboardEvent, ReactNode } from 'react';
2
3interface TabsContextValue {
4  activeIndex: number;
5  setActiveIndex: (idx: number) => void;
6  tabCount: number;
7  registerTab: () => number;
8}
9
10const TabsContext = createContext<TabsContextValue | null>(null);
11
12function useTabs() {
13  const ctx = useContext(TabsContext);
14  if (!ctx) throw new Error('Tabs compound subcomponents must be rendered inside <Tabs>');
15  return ctx;
16}
17
18// 1. Root Tabs Container
19export function Tabs({
20  defaultIndex = 0,
21  children,
22}: {
23  defaultIndex?: number;
24  children: ReactNode;
25}) {
26  const [activeIndex, setActiveIndex] = useState(defaultIndex);
27  const tabCounter = useRef(0);
28
29  const registerTab = () => {
30    const idx = tabCounter.current;
31    tabCounter.current += 1;
32    return idx;
33  };
34
35  return (
36    <TabsContext.Provider value={{ activeIndex, setActiveIndex, tabCount: tabCounter.current, registerTab }}>
37      <div className="tabs-root">{children}</div>
38    </TabsContext.Provider>
39  );
40}
41
42// 2. TabList with Keyboard Navigation
43export function TabList({ children }: { children: ReactNode }) {
44  const { activeIndex, setActiveIndex } = useTabs();
45  const listRef = useRef<HTMLDivElement>(null);
46
47  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
48    const tabs = listRef.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]');
49    if (!tabs || tabs.length === 0) return;
50
51    let newIndex = activeIndex;
52
53    switch (e.key) {
54      case 'ArrowRight':
55        e.preventDefault();
56        newIndex = (activeIndex + 1) % tabs.length;
57        break;
58      case 'ArrowLeft':
59        e.preventDefault();
60        newIndex = (activeIndex - 1 + tabs.length) % tabs.length;
61        break;
62      case 'Home':
63        e.preventDefault();
64        newIndex = 0;
65        break;
66      case 'End':
67        e.preventDefault();
68        newIndex = tabs.length - 1;
69        break;
70      default:
71        return;
72    }
73
74    setActiveIndex(newIndex);
75    tabs[newIndex]?.focus();
76  };
77
78  return (
79    <div ref={listRef} role="tablist" onKeyDown={handleKeyDown} className="tab-list">
80      {children}
81    </div>
82  );
83}
84
85// 3. Tab Button with Roving tabindex
86export function Tab({ index, children }: { index: number; children: ReactNode }) {
87  const { activeIndex, setActiveIndex } = useTabs();
88  const isSelected = activeIndex === index;
89
90  return (
91    <button
92      role="tab"
93      aria-selected={isSelected}
94      tabIndex={isSelected ? 0 : -1}
95      onClick={() => setActiveIndex(index)}
96      className={`tab-button ${isSelected ? 'active' : ''}`}
97    >
98      {children}
99    </button>
100  );
101}
102
103// 4. TabPanel
104export function TabPanel({ index, children }: { index: number; children: ReactNode }) {
105  const { activeIndex } = useTabs();
106  if (activeIndex !== index) return null;
107
108  return (
109    <div role="tabpanel" tabIndex={0} className="tab-panel">
110      {children}
111    </div>
112  );
113}