ADR-0068: ハイコントラストのとき、選んだタブの下の罫を、筆の線の形でなく全幅の帯にする¶

Status¶

承認

Context¶

Windows のハイコントラスト（forced-colors: active）で、選んだタブを見分けられる形を決める必要がある。

• 選んだタブの下の罫は、筆の線の形（入りが太く、終わりを払う）にして、左から 1 回引くと決めている。
  • ADR-0028: 操作できる要素と重なる面の角を 2px で丸め、重なる面にずらした影を付け、罫を引く動きを筆の線にする
• 筆の線の形は、罫の要素に mask を当てて作る。罫の高さは 4px（density="compact" は 3px）で、終わりへ向かって細くなる。
• ハイコントラストでは、ブラウザが背景の色を消し、色をシステムの色に置き換える。タブの文字は全て同じ色になり、選んだタブを示す手がかりは、この罫だけになる。
• 罫を CanvasText で塗っても、先が細る形のままでは、細く見えて、選んだタブを見分けにくい。
• ハイコントラストのコンポーネントの扱いは、forced-* のユーティリティで、システムの色を theme.css に置いている（packages/ui/DESIGN.md の「ハイコントラスト」）。

Decision¶

• ハイコントラストのときだけ、選んだタブの下の罫から筆の線の形（mask）を外し、タブの幅いっぱいの、同じ高さの帯にする。色は CanvasText にする。
• 通常の表示は変えない。筆の線の形、左から 1 回引く動き、高さは、ADR-0028 のままである。
• テーマ変数のファイルに、forced-solid のユーティリティを足す。forced-colors: active のときだけ mask: none にする。Tabs の罫に付ける。
• 対象は Tabs の選んだタブの罫だけにする。筆の線の形を使うほかの要素には広げない。
  • 検索の欄のフォーカスの罫は、フォーカスしている間に出る補助の表示で、フォーカスの輪が別にある。
  • ダイアログの上端の罫は、飾りである。
  • ナビの今いるページの印と、パンくずリストの hover の線は、同じ見えにくさがありうる。確認していない（未確認）。必要になったときに、同じ forced-solid を付ける。
• 理由は、ハイコントラストの利用者が、選んだタブを見分けられることを、筆の線の形より優先するためである。筆の線の形は、ふだんの画面の和の感じとして残す。

左から 1 回引く動きは、ハイコントラストでも変えない。
ハイコントラストでは、ナビの今いるページの印と、選んだタブの罫は、形がそろわない。

Verification¶

• コンポーネントのテスト（Tabs.forced-colors.test.tsx）で、Chromium を forced-colors: active にして、次の 2 つを確認した。
  • 罫の mask-image が none である。
  • 罫が背景の色と違う色で塗られる。
• forced-solid を外すと、このテストが失敗することも確認した。
• カタログの Tabs の story を、Chromium の forced-colors: active を再現して、ライトのテーマで改修前後を撮った。
  • 改修前は、罫が細く出て、選んだタブを見分けにくかった。
  • 改修後は、帯がタブの下に全幅で出た。
• Windows の実機のハイコントラストの設定、ダークのテーマ、Safari、Firefox は確認していない（未確認）。

Considered Options¶

Consequences¶

Positive¶

• ハイコントラストで、選んだタブを、罫の太さと色で見分けられる。
• 通常の表示は変わらない。

Negative¶

• 筆の線の形の罫を使う要素のうち、Tabs だけがハイコントラストで形を替える。ほかの要素との扱いが揃わない。
• forced-solid のユーティリティが 1 つ増える。