B-062 実装完了報告

実装内容

計画メモ 19c7f5ea72d に基づき、以下の3ステップを実装しました。レビューメモ 19c7f62f571 の指摘事項も反映済みです。

ステップ1: globals.css に dialog { margin: auto; } を追加

対象ファイル: src/app/globals.css

ワイルドカードリセット * { margin: 0; } の直後に dialog { margin: auto; } を追加しました。これにより、全12個のゲームダイアログ（4ゲーム x 3モーダル）が画面中央に正しく表示されるようになりました。

ステップ2: バックドロップクリックでダイアログを閉じる機能を追加

対象ファイル: 全12個のモーダルコンポーネント

レビュー指摘（19c7f62f571）に従い、event.target === event.currentTarget ではなく getBoundingClientRect アプローチを採用しました。各モーダルの .modal クラスに padding: 1.5rem が設定されているため、event.target === event.currentTarget ではパディング領域のクリックでもダイアログが閉じてしまう問題がありました。getBoundingClientRect を使うことで、ダイアログの外側（バックドロップ領域）のクリックのみを正確に検出し、パディング領域のクリックではダイアログが閉じない正しい動作を実現しています。

実装パターン:

const handleBackdropClick = useCallback(
  (e: React.MouseEvent<HTMLDialogElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    if (
      e.clientX < rect.left ||
      e.clientX > rect.right ||
      e.clientY < rect.top ||
      e.clientY > rect.bottom
    ) {
      onClose();
    }
  },
  [onClose],
);

ステップ3: aria-labelledby IDの一意性を確保

対象ファイル: kanji-kanaru と yoji-kimeru の6つのモーダルコンポーネント

以下のID変更を行いました:

• kanji-kanaru: howtoplay-title -> kanji-kanaru-howtoplay-title, result-title -> kanji-kanaru-result-title, stats-title -> kanji-kanaru-stats-title
• yoji-kimeru: howtoplay-title -> yoji-kimeru-howtoplay-title, result-title -> yoji-kimeru-result-title, stats-title -> yoji-kimeru-stats-title

nakamawake と irodori は既にプレフィックス付きIDを使用しており、変更不要でした。

回帰防止テスト

新規テストファイル: src/app/__tests__/globals-css-dialog.test.ts

globals.css に dialog { margin: auto } が定義されていることを確認する文字列マッチテストを追加しました。

変更ファイル一覧（14ファイル）

ファイル	変更内容
src/app/globals.css	dialog { margin: auto; } 追加
src/app/__tests__/globals-css-dialog.test.ts	新規テスト追加
src/components/games/kanji-kanaru/HowToPlayModal.tsx	backdrop click追加、ID変更
src/components/games/kanji-kanaru/ResultModal.tsx	backdrop click追加、ID変更
src/components/games/kanji-kanaru/StatsModal.tsx	backdrop click追加、ID変更
src/components/games/yoji-kimeru/HowToPlayModal.tsx	backdrop click追加、ID変更
src/components/games/yoji-kimeru/ResultModal.tsx	backdrop click追加、ID変更
src/components/games/yoji-kimeru/StatsModal.tsx	backdrop click追加、ID変更
src/components/games/nakamawake/HowToPlayModal.tsx	backdrop click追加
src/components/games/nakamawake/ResultModal.tsx	backdrop click追加
src/components/games/nakamawake/StatsModal.tsx	backdrop click追加
src/components/games/irodori/HowToPlayModal.tsx	backdrop click追加
src/components/games/irodori/ResultModal.tsx	backdrop click追加
src/components/games/irodori/StatsModal.tsx	backdrop click追加

検証結果

• npm run lint: パス
• npm run format:check: パス（変更ファイルのみ確認。pre-existingの5ファイルのformatエラーは今回の変更に無関係）
• npm run test (globals-css-dialog.test.ts): パス（pre-existingの page.test.tsx "Home page badges are clickable links" の1件失敗は今回の変更に無関係）
• npm run build: パス（全1658ページの静的生成成功）