🎨 Palette: ヘッダーのインタラクティブ要素にキーボードフォーカス時のスタイルを追加

Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>

Author: google-labs-jules[bot]

.jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-07-19 - ヘッダーのキーボードアクセシビリティ改善
+**Learning:** Tailwind CSS で作成されたインタラクティブ要素（ナビゲーションリンク、ログインボタン等）において、デフォルトのフォーカスリングが表示されない、または視認性が低い問題がありました。キーボードユーザーにとって、フォーカスリングの欠如は現在位置を見失う原因となり、致命的なアクセシビリティ問題を引き起こします。特に、ダークモード時のコントラスト不足が課題でした。
+**Action:** インタラクティブな要素（`<button>`、`<Link>` など）には、必ず `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2` （および対応する `dark:` バリアント）を適用し、すべての背景色において明確なフォーカスインジケータが表示されるように設計する。

apps/web/src/components/header.tsx

@@ -22,7 +22,7 @@ export function Header() {
         <div className="flex min-w-0 items-center gap-6">
           <Link
             href="/"
-            className="text-base font-semibold tracking-tight text-gray-950 transition-colors hover:text-gray-700 dark:text-gray-50 dark:hover:text-gray-300"
+            className="rounded text-base font-semibold tracking-tight text-gray-950 transition-colors hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2 dark:text-gray-50 dark:hover:text-gray-300 dark:focus-visible:ring-gray-100 dark:focus-visible:ring-offset-gray-950"
           >
             OpenShelf
           </Link>
@@ -38,7 +38,7 @@ export function Header() {
                     key={item.href}
                     href={item.href}
                     aria-current={isActive ? "page" : undefined}
-                    className={`rounded-full px-3 py-1.5 transition-colors ${
+                    className={`rounded-full px-3 py-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2 dark:focus-visible:ring-gray-100 dark:focus-visible:ring-offset-gray-950 ${
                       isActive
                         ? "bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900"
                         : "text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
@@ -70,7 +70,7 @@ export function Header() {
               <button
                 type="button"
                 onClick={logout}
-                className="rounded-full border border-gray-300 px-3 py-1.5 text-sm text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-50"
+                className="rounded-full border border-gray-300 px-3 py-1.5 text-sm text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus-visible:ring-gray-100 dark:focus-visible:ring-offset-gray-950"
               >
                 ログアウト
               </button>
@@ -79,7 +79,7 @@ export function Header() {
             <button
               type="button"
               onClick={login}
-              className="rounded-full bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-700 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200"
+              className="rounded-full bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200 dark:focus-visible:ring-gray-100 dark:focus-visible:ring-offset-gray-950"
             >
               GitHubでログイン
             </button>