[ma91n]

close #472

#435 で入れたフォーカスリングは .vp-doc の中とスキップリンクだけに当たっていた。同じページを Tab で辿ると、本文に入るまで UA のリング、本文に入ると 2px のネイビーと 2 種類の輪郭が出る。所在の目印は 1 つ（技術ブログ #2686 / #2847）なので、サイト全体に広げた。

before

部品	フォーカスの見え方
ヘッダーのナビ・サイドバーの行・目次の行・ページャ・編集リンク	UA 既定（Chrome は outline: auto の青）
ボタン全般（base.css）	outline: 4px auto -webkit-focus-ring-color
検索ボタン（DocSearch-Button）	outline: 5px auto -webkit-focus-ring-color
検索モーダルの入力欄（input:focus）	outline: none（目印が無い）
本文・スキップリンク	2px ネイビー（#435）

input に目印が無いのは base.css の input:focus, textarea:focus, select:focus { outline: none } による。キーボードで検索を開くと、どこにフォーカスがあるか分からない状態だった。

after

a / button / input / summary / [tabindex] の :focus-visible に 2px のネイビー、outline-offset: 2px。暗い側は地の上でネイビーが 2.67 と非テキストの 3:1 に届かないので、文字の最上段（12.81）に替える（#437 と同じ）。

• [tabindex] から -1 を外している。サイドバーの器（nav[tabindex="-1"]）とスキップリンクの着地点を丸ごと囲まないため。Tab で辿れる 0 のもの（サイドバーの折りたたみ見出しとカレット）だけが対象
• 帯の高さ（64px）いっぱいの .VPNavBarMenuLink と .VPNavBarTitle .title だけ outline-offset: -2px で内側へ逃がす。外側だと輪郭が帯の外に出る
• #app を前置して、部品ごとの 4px auto / 5px auto / none に詰め（(1,1,1) 対 (0,2,0)）

:focus ではなく :focus-visible なのは #437 のまま。マウスで押したときには出ない。

確認

トップで Tab を押し続けて、輪郭が最後まで同じ形かを見る。

1. 本文へスキップ → ロゴ → ナビ（Guidelines）→ 検索 → テーマ切り替え → GitHub → サイドバー → 本文 → 目次 → ページャ
2. 検索を開いて（/ か 検索ボタン）、入力欄に輪郭が出るか
3. 990px 未満に狭めて、ハンバーガー → 引き出しの中
4. ライト・ダークの両方

🤖 Generated with Claude Code

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.