Reactで、タブをキーボードで切り替えられるように作る方法

import { useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';

export type TabItem = {
  key: string;
  label: string;
  content: ReactNode;
};

type Props = {
  label: string;
  items: TabItem[];
  // automatic：矢印キーでフォーカスを移したタブをすぐに表示する
  // manual：矢印キーではフォーカスだけを移し、Enter か Space で表示する
  activation?: 'automatic' | 'manual';
  orientation?: 'horizontal' | 'vertical';
};

export function Tabs({ label, items, activation = 'automatic', orientation = 'horizontal' }: Props) {
  const id = useId();
  const tabId = (index: number) => `${id}-tab-${index}`;
  const panelId = (index: number) => `${id}-panel-${index}`;

  const [selectedIndex, setSelectedIndex] = useState(0);
  // フォーカスのあるタブ。Tab キーで止まるタブ（tabIndex=0）はこれに合わせる
  const [focusIndex, setFocusIndex] = useState(0);
  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);

  const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
  const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';

  function select(index: number) {
    setSelectedIndex(index);
    setFocusIndex(index);
  }

  function onKeyDown(event: KeyboardEvent<HTMLButtonElement>, index: number) {
    const last = items.length - 1;
    let next: number;
    switch (event.key) {
      case prevKey:
        next = index === 0 ? last : index - 1;
        break;
      case nextKey:
        next = index === last ? 0 : index + 1;
        break;
      case 'Home':
        next = 0;
        break;
      case 'End':
        next = last;
        break;
      default:
        return; // ほかのキー（横並びのときの ↑↓ など）はブラウザに任せる
    }
    event.preventDefault(); // ページのスクロールを止める
    tabRefs.current[next]?.focus();
    if (activation === 'automatic') select(next);
    else setFocusIndex(next);
  }

  return (
    <div className="tabs">
      <div
        role="tablist"
        aria-label={label}
        aria-orientation={orientation}
        onBlur={(event) => {
          // タブの並びからフォーカスが出たら、次に Tab キーで入ったときは選ばれているタブに止まるよう戻す
          if (!event.currentTarget.contains(event.relatedTarget)) setFocusIndex(selectedIndex);
        }}
      >
        {items.map((item, index) => (
          <button
            key={item.key}
            ref={(element) => {
              tabRefs.current[index] = element;
            }}
            type="button"
            role="tab"
            id={tabId(index)}
            aria-selected={index === selectedIndex}
            aria-controls={panelId(index)}
            // Tab キーで止まるのは、タブの並びの中で1つだけにする
            tabIndex={index === focusIndex ? 0 : -1}
            onClick={() => select(index)}
            onKeyDown={(event) => onKeyDown(event, index)}
          >
            {item.label}
          </button>
        ))}
      </div>
      {items.map((item, index) => (
        <div
          key={item.key}
          role="tabpanel"
          id={panelId(index)}
          aria-labelledby={tabId(index)}
          tabIndex={0}
          hidden={index !== selectedIndex}
        >
          {item.content}
        </div>
      ))}
    </div>
  );
}

- main:
  - button "前のボタン"
  - tablist "猫のお世話":
    - tab "ごはん"
    - tab "あそび"
    - tab "おふろ"
    - tab "おやすみ" [selected]
  - tabpanel "おやすみ":
    - paragraph: 窓ぎわのベッドで寝ます。
  - button "後のボタン"

Tab: フォーカス タブ「ごはん」 / aria-selected=true ごはん
Tab: フォーカス タブ「あそび」 / aria-selected=true ごはん
Tab: フォーカス タブ「おふろ」 / aria-selected=true ごはん
Tab: フォーカス タブ「おやすみ」 / aria-selected=true ごはん
Tab: フォーカス パネル（朝と夜の2回、決まった量をあげます。） / aria-selected=true ごはん
Tab: フォーカス 「後のボタン」 / aria-selected=true ごはん

Tab: フォーカス パネル（窓ぎわのベッドで寝ます。）
Tab: フォーカス 「後のボタン」
Shift+Tab: フォーカス パネル（窓ぎわのベッドで寝ます。）
Shift+Tab: フォーカス タブ「おやすみ」

Tab: フォーカス タブ「ごはん」 / aria-selected=true ごはん / tabindex 0,-1,-1,-1
→: フォーカス タブ「あそび」 / aria-selected=true あそび / tabindex -1,0,-1,-1
→: フォーカス タブ「おふろ」 / aria-selected=true おふろ / tabindex -1,-1,0,-1
→: フォーカス タブ「おやすみ」 / aria-selected=true おやすみ / tabindex -1,-1,-1,0
→: フォーカス タブ「ごはん」 / aria-selected=true ごはん / tabindex 0,-1,-1,-1
←: フォーカス タブ「おやすみ」 / aria-selected=true おやすみ / tabindex -1,-1,-1,0
Home: フォーカス タブ「ごはん」 / aria-selected=true ごはん / tabindex 0,-1,-1,-1
End: フォーカス タブ「おやすみ」 / aria-selected=true おやすみ / tabindex -1,-1,-1,0

タブで ↓: scrollY 40 / フォーカス タブ「ごはん」
タブで End: scrollY 0 / フォーカス タブ「おやすみ」

タブで ↓: scrollY 40 / フォーカス タブ「ごはん」
タブで End: scrollY 2870 / フォーカス タブ「おやすみ」

Tab: フォーカス タブ「ごはん」 / aria-selected=true ごはん
→: フォーカス タブ「あそび」 / aria-selected=true ごはん
→: フォーカス タブ「おふろ」 / aria-selected=true ごはん
Enter: フォーカス タブ「おふろ」 / aria-selected=true おふろ
→: フォーカス タブ「おやすみ」 / aria-selected=true おふろ
Space: フォーカス タブ「おやすみ」 / aria-selected=true おやすみ
Home: フォーカス タブ「ごはん」 / aria-selected=true おやすみ

Home: フォーカス タブ「ごはん」 / tabindex -1,-1,-1,0
Home のあと Tab: フォーカス タブ「おやすみ」 / tabindex -1,-1,-1,0
Tab: フォーカス パネル（窓ぎわのベッドで寝ます。） / tabindex -1,-1,-1,0
Shift+Tab: フォーカス タブ「おやすみ」 / tabindex -1,-1,-1,0
Shift+Tab: フォーカス 「前のボタン」 / tabindex -1,-1,-1,0

Home: フォーカス タブ「ごはん」 / tabindex 0,-1,-1,-1
Home のあと Tab: フォーカス パネル（窓ぎわのベッドで寝ます。） / tabindex -1,-1,-1,0
Tab: フォーカス 「後のボタン」 / tabindex -1,-1,-1,0
Shift+Tab: フォーカス パネル（窓ぎわのベッドで寝ます。） / tabindex -1,-1,-1,0
Shift+Tab: フォーカス タブ「おやすみ」 / tabindex -1,-1,-1,0

Tab: フォーカス タブ「ごはん」
↓: フォーカス タブ「あそび」
↓: フォーカス タブ「おふろ」
↑: フォーカス タブ「あそび」
→: フォーカス タブ「あそび」
←: フォーカス タブ「あそび」