ADR-0061: フォーカスの表示を、DADS の黄と黒の 2 重の表示から、墨の 2px の 1 重の輪にする¶

Status¶

承認

フォーカスの表示の色と形を決め直す必要がある。

フォーカスの色は、DADS の @digital-go-jp/design-tokens 2.1.0 の値を使うと決めている。
DADS の表示は、要素に接する黄色の 2px の輪と、その外の黒の 4px の枠の 2 重の表示で、ダークのテーマでも替えない。
フォーカスの表示には動きを付けず、検索の欄だけは、標準の輪の代わりに緑の筆の線を左から 1 回引くと決めている。
- ADR-0028: 操作できる要素と重なる面の角を 2px で丸め、重なる面にずらした影を付け、罫を引く動きを筆の線にする
運営者は、黄と黒のフォーカスの表示が、和の感じに合わないと判断した。
運営者は、カタログのボタン、リンク、タブ、入力欄に、DADS の表示と、緑、藍、墨の 1 重の輪を当てた試作を、ライトとダークで比べて選んだ。
WCAG 2.2 の達成基準 1.4.11 は、フォーカスの表示に、隣接する色とのコントラスト比 3:1 以上を求める。
達成基準 2.4.13（AAA）は、2px 以上の太さと、フォーカスの前後の同じ画素のコントラスト比 3:1 以上を求める。
- 出典: Understanding SC 2.4.13: Focus Appearance

フォーカスの表示を、要素から 2px 離して引く、墨の 2px の 1 重の輪にする。
コードを動かす画面の、詰めたペイン、木の行の中の名前の欄、分割の幅を変える SplitPane の仕切りに引く輪の位置と、そのユーティリティは、ADR-0066 が決める。

輪の色は、文字と同じ墨にする。
- ライトは sumi-900、ダークは sumi-25 を指すセマンティックトークン focus を 1 つ置き、テーマごとに替える。
- 墨は、差し色の役割（主の色、リンク、情報、現在地、エラー）のどれとも重ならず、罫で区切る版面の色だからである。
太さは 2px にする。
- ヘッダーの下と表の頭の墨の罫と同じ太さで、輪で囲んだ要素が重く見えないためである。
- 2.4.13 の下限の 2px を満たす。
表示は、テーマ変数のファイルの focus-ring のユーティリティ 1 つで書く。
- 黄と黒のプリミティブトークンは消す。
検索の欄は、例外のまま、緑の筆の線を引く。
- 墨の下罫だけで組んだ欄を輪で囲むと、罫の版面が崩れるためである。
輪と、輪を引く要素の背景になる面（surface、surface-subtle、surface-raised、primary-surface、code-surface）の組を、コントラストのチェックに入れる。

使い捨ての試作で、カタログの実物のコンポーネントに案を当て、Chromium で測った。

墨の輪と面のコントラスト比は、surface でライト 17.25:1、ダーク 16.28:1、surface-subtle でライト 15.94:1、ダーク 14.86:1 だった。
緑の輪は、主のボタンの面と同じ色（1.00:1）で、2px の隙間でしかボタンと区別できなかった。
藍の輪は、外部のリンクの文字と同じ色だった。
DADS の黄と黒の 2 重の表示は、ライトでは黒の枠だけが、ダークでは黄色の輪だけが、面に対して 3:1 を超えた。
Safari と Firefox での確認はしていない。

選択肢	強み	弱み
採用: 墨の 2px の 1 重の輪	全ての面でコントラスト比が最も高い。差し色の役割と重ならない。罫で区切る版面の色である	墨の罫と同じ色なので、輪の形でしかフォーカスと分からない。ダークでは白い枠に見える。1 重の輪は、輪と明るさの近い面では見えにくい
墨の 3px の 1 重の輪	2px より見つけやすい	入力欄やボタンが、太い墨の枠の箱に見える
緑（主の色）の 1 重の輪	検索の欄の緑の筆の線と色がそろい、フォーカスの色が 1 つになる	主のボタンの面と同じ色で、ボタンの枠が太くなったように見える。リンクと選んだタブの罫と同じ色である
藍の 1 重の輪	主の色と色相が分かれ、フォーカスだけの色になる	藍は外部のリンクと情報の色である。ダークでは主のボタンの面との差が明るさに出ない
DADS の黄と黒の 2 重の表示のまま	どの面の上でも、どちらかの輪が見える。DADS に沿う	黄と黒が、和の感じに合わない