refactor: ♿ [Code Review] 既存コンポーネントの focus-visible:outline-none も outline-hidden に統一

[genzouw]

背景

PR #383 のレビュー（CodeRabbitAI）で、Tailwind CSS v4 における focus-visible:outline-none は単純に outline-style: none を適用するため、forced-colors（ハイコントラスト）モードでアウトラインが失われてしまうとの指摘がありました。Tailwind v4 では代わりに focus-visible:outline-hidden を使うことで、見た目は隠しつつ強制カラーモードではアウトラインを維持できます。

レビューコメント: #383 (comment)
レビュアー: coderabbitai
優先度: medium (accessibility)

指摘内容

Tailwind v4 では focus-visible:outline-none ではなく focus-visible:outline-hidden を使用すべき（forced-colors モードでもアウトラインを保持し、アクセシビリティを維持するため）。

Issue化した理由

• 本PR 🎨 Palette: Add focus-visible styles to custom buttons for keyboard accessibility #383 のスコープは「カスタムボタンへの focus-visible スタイルの新規追加」であり、PR内で新たに追加した 10 箇所については本PR内で outline-hidden に置換済み。
• 一方、既存コードベースには本PR以前から focus-visible:outline-none を使用していた箇所が複数のコンポーネントに散在しており、これらまで本PRに含めると変更スコープが本PRの目的から大きく拡大するため、本Issueに切り出した。

対応方針（案）

以下の既存コンポーネントの focus-visible:outline-none を focus-visible:outline-hidden に一括置換する。

• frontend/src/components/MobileSidebar.tsx
• frontend/src/components/AdminLayout.tsx
• frontend/src/components/Layout.tsx
• frontend/src/components/FormSchemaBuilder.tsx

検証方法:

1. grep -rn "focus-visible:outline-none" frontend/src/ の結果が空になることを確認
2. 主要なボタン/リンクをキーボード Tab で巡回しフォーカスリングが表示されること
3. macOS の「コントラストを上げる」/ Windows のハイコントラストテーマで、フォーカス時にアウトラインが残ることを確認

関連PR

Refs #383

[github-actions]

🤖 AI トリアージ結果:

ご提案

このIssueは既存のコンポーネントでのアクセシビリティ向上に関するもので、確かに重要な改善点です。focus-visible:outline-none を focus-visible:outline-hidden に置換することによって、強制カラーモードでの視認性を確保することは良いアプローチです。

対応するラベル

• enhancement（機能改善）
• accessibility（アクセシビリティ向上）

対応方針

提案されたように、指定されたコンポーネントのfocus-visible:outline-noneをfocus-visible:outline-hiddenに一括置換することをお勧めいたします。これにより、アクセシビリティに関する指摘に対応し、ユーザー体験の向上につながるでしょう。

検証方法の確認

検証方法も具体的で信頼性が高いと思います。変更後は必ずこれらの検証を実施してください。また、PR #383での指摘を反映することも忘れずに行ってください。

感謝の言葉

この重要な指摘に感謝いたします。アクセシビリティ改善は私たちのプロダクトにとって重要ですので、引き続き改善に取り組んで参りましょう。