ハンズオン（第7部）: 実務的な管理画面に仕上げる

第23〜27章の UI パターンを Relay に順に適用し、管理画面の基本機能を備えた教材に仕上げます。

この部の到達状態

• URL に連動した検索・絞り込みができる
• ページネーション、「もっと読む」、無限スクロールが選べる
• フォーム UX が a11y 込みで整う（422 再描画、フォーカス移動、aria 属性）
• 新規作成モーダル、タブ、ドロップダウンが動く
• 通知トーストが出る（他ユーザーの操作によるリアルタイム通知を含む）

作る・変える

第23章（検索）→ 第24章（ページネーション）→ 第25章（フォーム UX）→ 第26章（モーダル等）→ 第27章（通知）の順に、Relay へ適用します。

完成条件

• 検索条件が URL で共有・リロードできる
• 第7部 a11y チェックリスト（フォーカス・aria-live・キーボード操作）を満たす

Relay の現在地

Relay が管理画面の基本機能を備えた教材になった状態。 以降は保守（第8部）とモバイル展開（第9部）です。

アクセシビリティの確認

• ラベルと入力が対応し、同時に開いたフォームでも ID が重複しない。
• タブ・ドロップダウン・ダイアログをキーボードだけで開閉できる。
• エラーの件数だけでなく本文を読め、エラーサマリへフォーカスが移る。
• ダイアログを閉じると起点へフォーカスが戻る。
• 検索中に入力フォーカスを奪わず、IME の変換途中で送信しない。
• 結果の全文ではなく件数を読み上げ、通知を重要情報の唯一の表示にしない。
• 追記はボタンでも操作でき、ページ送り方式へ切り替えられる。

自動テストに加え、ブラウザのキーボード操作とスクリーンリーダーで確認します。ARIA 属性があるだけで使いやすさを保証できるわけではありません。