[improvement] Focus and hover highlight

[Andyou007]

// This file includes untranslated text (ja).

Subject

Improve forcus and hover highlight over the repository.

Css

ダークモード対応の設計方針

[[README.md]] のFAQ相当(色付き背景には黒/白のうち明度差が確保できる方の文字・線を使い、さらに反対色で縁取りを付ける)は、config.cssではすでに --rgb-ink / --rgb-border がライト⇄ダークで黒⇔白に自動反転する形で実装済み。この既存の仕組みにそのまま乗せる。

• --color-focus(黄色)から内側(コンポーネント本体側)はライト/ダーク共通。黄色は明度が高いため、地の文字色 --color-ink はテーマを問わず据え置く(config.cssのFAQコメント通り、黄色はborder/icon/fill専用でテキストには使わない)。
• 輪郭(コンポーネントとページ背景の間の境界)だけがテーマ依存。ライトモードは黄→ink(黒)→background(白)の3層、ダークモードは黄→ink(黒→白に反転済み)の2層で足りる。

/* フォーカス時もfocus color(黄色)でfill出来ないボックス要素: input */
input, textarea {
    border: 0.125rem solid var(--color-border);
    padding-block: calc(((var(--md-box-height) - var(--md-line-height)) / 2) - 0.125rem);
}
input:user-invalid, textarea:user-invalid { /* focus時は無効 */
    border: 0.125rem solid rgb(var(--rgb-error));
}
input:focus-visible, textarea:focus-visible {
    border-width: 0.25rem;
    padding-block: calc(((var(--md-box-height) - var(--md-line-height)) / 2) - 0.25rem);
    outline: 0.0625rem solid var(--color-focus);
}

/* フォーカス時にfocus color(黄色)でfill出来るボックス要素: button[outline, fill] */
[data-type="outline"] {
    border: 0.125rem solid var(--color-border);
    padding-block: calc(((var(--md-box-height) - var(--md-line-height)) / 2) - 0.125rem);
}
[data-type="fill"] {
    border: none;
    padding-block: calc((var(--md-box-height) - var(--md-line-height)) / 2);
}
[data-type="outline"]:focus-visible, [data-type="fill"]:focus-visible {
    background-color: var(--color-focus);
    border: 0.25rem solid var(--color-border);
    padding-block: calc(((var(--md-box-height) - var(--md-line-height)) / 2) - 0.25rem);
}

[data-type="outline"]:hover {
    background-color: var(--color-emphasis-active);
}
[data-type="outline"]:active {
    background-color: var(--color-emphasis-active);
}
[data-type="fill"]:hover {
    background-color: var(--color-emphasis-fill-active);
}
[data-type="fill"]:active {
    background-color: var(--color-emphasis-fill-active);
}

/* フォーカス時にfocus color(黄色)でfill出来るインライン要素(下線付き) */
a, [data-type="text"], [data-type="rule"] {
    background-color: var(--color-background);
    border: none;
    box-decoration-break: clone;
    color: var(--color-emphasis);
    text-decoration-color: currentColor;
    text-decoration-line: underline;
    text-decoration-thickness: 0.0625rem;
}
a:focus-visible, [data-type="text"]:focus-visible, [data-type="rule"]:focus-visible {
    background-color: var(--color-focus);
    border-color: var(--color-focus);
    color: var(--color-ink);
    text-decoration-thickness: 0.125rem;
}

GOV.UK Design System (一部Kelp)

要素	フォーカス	ホバー	フォーカス+ホバー併存時
input	枠の黒太線化(inset box-shadow)+その外に黄色outline(3px)	なし	(hoverなしなのでフォーカス表現のみ)
button	黄色ボーダー+黄色inset box-shadow(1px内枠)。hover/activeを伴わない場合のみ黄色フィル+黒下線が追加	濃い色に背景変化	黄色フィルは外れ、濃い色背景+黄色内枠の組み合わせに切り替わる
link	黄色帯(background-color)+黒下線(box-shadow)、通常下線は非表示化	濃い色+下線太線化	両ルールは技術的には併存するが、フォーカスの黄色帯が視覚的に支配的でホバー効果はほぼ見えない

設計思想: 状態ごとに専用の見た目を作り込む「状態別デザイン」型。特にbuttonは:focus:not(:active):not(:hover)という排他セレクタでフォーカス単体とフォーカス+ホバー併存を明確に描き分けている。

Focus

• govuk-focused-text(リンク等テキスト): outline: 3px solid transparent(色は透明のプレースホルダー) + background-color: 黄色 + box-shadow: 0 -2px focus, 0 4px 黒(ライトモード)。下線の代わりに背景色+box-shadowで「マーカーで塗った」ような表現。text-decoration: none で通常の下線を消す。
• govuk-focused-box(ボックス): outline: 3px solid transparent + box-shadow: 0 0 0 4px focus, 0 0 0 8px 黒(ライトモード)(二重リング、全方向)。
• govuk-focused-form-input(入力枠): outline: 3px solid + outline-color: focus + outline-offset: 0(要素の外にはみ出させない) + box-shadow: inset 0 0 0 <border-width> input-border。
• outline: ... solid transparent という一貫パターンは、Windows高コントラストモード(forced-colors)でユーザーが色を強制上書きした際にも、透明な outline が可視色に置き換わってフォーカスが見えるようにするためのフォールバック(_focused.scss冒頭コメント)。
• src/css/config/base.css:108-121: :is(button, [href], input, select, textarea, summary, [tabindex]):focus-visible に対し outline-color/style/width/offset をまとめて適用(Kelp)。
• invalid状態(forms.css:176)は --focus-ring-color: var(--color-invalid) に差し替え(Kelp)。

forced-colors: active

• accordion(components/accordion/_mixin.scss)には forced-colors: active 時の個別対応があり、フォーカス時に子要素の背景色を transparent に強制して二重着色を防ぐ処理がある(300-350行目付近)。
• 代わりに forced-colors: active(Windows高コントラストモード/ユーザーカスタムカラー)への対応が複数コンポーネント(accordion, checkboxes, header, radios, tag, footer, skip-link, warning-text)に存在。
• _focused.scss 冒頭のコメントで「ユーザーがダークモード等で色を上書きすると背景色やbox-shadowが消えるため、可視色に置き換わる透明outlineを必ず用意する」という設計思想が明記されている。