Reactでモーダルを閉じたあと、元のボタンにフォーカスを戻す方法

開いたあと: {"focus":"input「タイトル」","focusVisible":true}
Esc キーを押したあと: {"focus":"body","focusVisible":false}
  モーダルの数: 0
そのあと Tab キーを1回押したあと: {"focus":"button「メニュー」","focusVisible":true}

import { useEffect, type RefObject } from 'react';

// モーダルが表示されたら中へフォーカスを移し、
// 閉じたら（アンマウントされたら）、開く前にフォーカスがあった要素へ戻す
export function useReturnFocus(
  initialFocusRef: RefObject<HTMLElement | null>,
  fallbackRef?: RefObject<HTMLElement | null>,
) {
  useEffect(() => {
    // 中へフォーカスを移す前に、いまフォーカスがある要素を覚えておく
    const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
    initialFocusRef.current?.focus();

    return () => {
      // 元の要素が画面から消えていたら、代わりの要素へ
      if (previous?.isConnected) previous.focus();
      else fallbackRef?.current?.focus();
    };
  }, [initialFocusRef, fallbackRef]);
}

import { useId, type ReactNode, type RefObject } from 'react';
import { createPortal } from 'react-dom';
import { useReturnFocus } from './useReturnFocus';

export type ModalProps = {
  title: string;
  onClose: () => void;
  // 開いたときにフォーカスを移す要素
  initialFocusRef: RefObject<HTMLElement | null>;
  // 開く前の要素が消えていたときに、フォーカスを移す要素
  fallbackRef?: RefObject<HTMLElement | null>;
  children: ReactNode;
};

export function Modal({ title, onClose, initialFocusRef, fallbackRef, children }: ModalProps) {
  const titleId = useId();
  useReturnFocus(initialFocusRef, fallbackRef);

  return createPortal(
    <div className="backdrop">
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        className="modal"
        onKeyDown={(e) => {
          if (e.key === 'Escape') onClose();
        }}
      >
        <h3 id={titleId}>{title}</h3>
        {children}
      </div>
    </div>,
    document.body,
  );
}

{editing && (
  <Modal title="タイトルを編集" onClose={() => setEditing(null)} initialFocusRef={inputRef}>
    <input ref={inputRef} aria-label="タイトル" value={draft} onChange={(e) => setDraft(e.target.value)} />
    {/* 「キャンセル」と「保存」のボタン */}
  </Modal>
)}

開いたあと: {"focus":"input「タイトル」","focusVisible":true}
Esc キーを押したあと: {"focus":"button「猫の水飲みを編集」","focusVisible":true}
そのあと Tab キーを1回押したあと: {"focus":"button「猫の水飲みを削除」","focusVisible":true}

Enter キーで「キャンセル」を押したあと: {"focus":"button「猫の爪とぎを編集」","focusVisible":true}
マウスで「猫の寝床を編集」を押したあと: {"focus":"input「タイトル」","focusVisible":true}
マウスで「保存」を押したあと: {"focus":"button「猫の寝床と毛布を編集」","focusVisible":false}

// 中の入力欄の autoFocus で最初のフォーカスを移し、useEffect で元の要素を覚える版
export function ModalAutoFocusEffect({ title, onClose, children }: ModalProps) {
  useEffect(() => {
    const previous = document.activeElement as HTMLElement | null;
    return () => previous?.focus();
  }, []);
  return <Frame title={title} onClose={onClose}>{children}</Frame>;
}

開いたあと: {"focus":"input「タイトル」","focusVisible":true}
  覚えた要素: input「タイトル」
Esc キーを押したあと: {"focus":"body","focusVisible":false}

Enter キーで「削除する」を押したあと: {"focus":"body","focusVisible":false}
  一覧のタイトル: ["猫の爪とぎ","猫の寝床"]
そのあと Tab キーを1回押したあと: {"focus":"button「メニュー」","focusVisible":true}

<h2 ref={headingRef} tabIndex={-1}>記事の一覧</h2>

{deleting && (
  <Modal
    title={`「${deleting.title}」を削除しますか？`}
    onClose={() => setDeleting(null)}
    initialFocusRef={deleteRef}
    fallbackRef={headingRef}
  >
    {/* 「キャンセル」と「削除する」のボタン */}
  </Modal>
)}

Enter キーで「削除する」を押したあと: {"focus":"h2「記事の一覧」","focusVisible":true}
  一覧のタイトル: ["猫の爪とぎ","猫の寝床"]
そのあと Tab キーを1回押したあと: {"focus":"button「猫の爪とぎを編集」","focusVisible":true}

開いたあと: {"focus":"input「タイトル」","focusVisible":true}
Esc キーを押したあと: {"focus":"button「猫の水飲みを編集」","focusVisible":true}
  Tab キー 3 回で「猫の寝床を削除」へ
「猫の寝床」を削除したあと: {"focus":"h2「記事の一覧」","focusVisible":true}