React アプリケーションにおけるフォーカス管理ライブラリの比較

モーダルやサイドバーなど、画面の一部を一時的にロックして操作を制限する UI パターンでは、キーボードフォーカスがその領域内に閉じ込められる（フォーカストラップ）必要があります。これは WCAG 2.1 の Success Criterion 2.4.3 (Focus Order) や 2.1.2 (No Keyboard Trap) に準拠するために不可欠です。focus-lock、react-focus-lock、react-focus-trap はこの課題を解決する代表的な npm パッケージですが、設計思想や使用方法に明確な違いがあります。

🧱 アーキテクチャと依存関係

focus-lock は純粋な JavaScript ライブラリで、DOM 操作とフォーカス制御のロジックを提供します。React に依存せず、あらゆるフロントエンド環境で使用可能です。

// focus-lock: 手動で DOM 要素を指定
import { activateFocusTrap, deactivateFocusTrap } from 'focus-lock';

const trap = activateFocusTrap(document.getElementById('modal'));
// ... モーダルを閉じる際に
deactivateFocusTrap(trap);

react-focus-lock は focus-lock を内部で使用し、React のコンポーネントモデルに適合させたラッパーです。useEffect や createPortal との連携が組み込まれています。

// react-focus-lock: コンポーネントとして使用
import { FocusLock } from 'react-focus-lock';

function Modal() {
  return (
    <FocusLock>
      <div id="modal">
        <button>閉じる</button>
      </div>
    </FocusLock>
  );
}

react-focus-trap はゼロから React 向けに設計された独立実装で、外部依存なしにフォーカストラップ機能を提供します。

// react-focus-trap: コンポーネントまたはフック
import FocusTrap from 'react-focus-trap';

function Modal() {
  return (
    <FocusTrap>
      <div id="modal">
        <button>閉じる</button>
      </div>
    </FocusTrap>
  );
}

⚙️ 設定とカスタマイズ性

focus-lock は低レベル API のため、すべての動作を手動で制御する必要があります。例えば、フォーカス可能な要素の検出ロジックや、Tab キー押下時の挙動を細かく調整できますが、そのためのコードは開発者が記述する必要があります。

react-focus-lock は豊富なプロパティを提供します。returnFocus（閉じた後に元のフォーカス位置に戻す）、shards（複数の DOM 領域を1つのトラップとして扱う）、group（複数のトラップ間の優先順位制御）などが特徴です。

// react-focus-lock: 高度な設定例
<FocusLock 
  returnFocus 
  shards={[sidebarRef, modalRef]}
  group="modal-group"
>
  {/* コンテンツ */}
</FocusLock>

react-focus-trap はシンプルなオプションに焦点を当てています。active（有効/無効の切り替え）、focusTrapOptions（内部の focus-trap ライブラリへのオプション渡し）が主な設定項目です。

// react-focus-trap: 基本的な設定
<FocusTrap active={isOpen}>
  <div>{/* コンテンツ */}</div>
</FocusTrap>

🔄 ライフサイクルと React 統合

focus-lock は React のライフサイクルとは無関係のため、useEffect や useLayoutEffect で手動でアクティベート/デアクティベートする必要があります。アンマウント時のクリーンアップ漏れが発生しやすい点に注意が必要です。

// focus-lock + React: 手動統合
import { useEffect, useRef } from 'react';
import { activateFocusTrap, deactivateFocusTrap } from 'focus-lock';

function Modal({ isOpen }) {
  const modalRef = useRef();
  const trapRef = useRef();

  useEffect(() => {
    if (isOpen) {
      trapRef.current = activateFocusTrap(modalRef.current);
    }
    return () => {
      if (trapRef.current) {
        deactivateFocusTrap(trapRef.current);
      }
    };
  }, [isOpen]);

  return <div ref={modalRef}>{/* ... */}</div>;
}

react-focus-lock と react-focus-trap はどちらも React のマウント/アンマウント時に自動でフォーカストラップを管理します。ただし、react-focus-lock はポータル（ReactDOM.createPortal）内のコンテンツにも対応しており、より複雑な UI 構成をサポートします。

🌐 ポータル（Portal）対応

モーダルは通常、ReactDOM.createPortal を使って body 直下にレンダリングされます。この場合、フォーカストラップライブラリはポータル外の DOM 要素を正しく処理できる必要があります。

react-focus-lock はポータルをネイティブにサポートしています。FocusLock コンポーネントをポータル内に配置するだけで、正しく動作します。

// react-focus-lock + Portal
function Modal({ isOpen }) {
  if (!isOpen) return null;
  return createPortal(
    <FocusLock>
      <div>モーダルコンテンツ</div>
    </FocusLock>,
    document.body
  );
}

react-focus-trap もポータルに対応していますが、内部で MutationObserver を使用して DOM 変更を監視するため、極めて動的なコンテンツではパフォーマンスに影響が出る可能性があります。

focus-lock はポータルに対応していません。開発者が手動でポータルの DOM 要素を取得し、アクティベートする必要があります。

🛠️ 実用的な使用例

ユースケース 1: 単純なモーダル

基本的なモーダルで、開閉時にフォーカスを内部に閉じ込める必要がある場合。

• react-focus-trap が最も簡潔です。

import FocusTrap from 'react-focus-trap';

function SimpleModal({ isOpen, onClose }) {
  if (!isOpen) return null;
  return (
    <FocusTrap>
      <div role="dialog" aria-modal="true">
        <p>コンテンツ</p>
        <button onClick={onClose}>閉じる</button>
      </div>
    </FocusTrap>
  );
}

ユースケース 2: ネストされたモーダルとサイドバー

メインモーダルの上に確認ダイアログが表示され、さらに左側に固定サイドバーがある複雑な UI。

• react-focus-lock の shards と group 機能が活きます。

// サイドバーとモーダルを1つのトラップとして扱う
<FocusLock shards={[sidebarRef, modalRef]}>
  {/* ... */}
</FocusLock>

// 別のグループのトラップ（例：確認ダイアログ）
<FocusLock group="alert">
  {/* ... */}
</FocusLock>

ユースケース 3: 非 React 環境での使用

Vue.js や Svelte で同じフォーカス制御ロジックを使いたい場合。

• focus-lock が唯一の選択肢です。

// Vue の mounted / beforeUnmount で使用
mounted() {
  this.trap = activateFocusTrap(this.$refs.modal);
},
beforeUnmount() {
  deactivateFocusTrap(this.trap);
}

📌 まとめ：選択の指針

最終的には、プロジェクトの規模、UI の複雑さ、そして将来の拡張可能性を考慮して選択してください。アクセシビリティは「後から追加」ではなく「最初から設計」するものであることを忘れないでください。