From 471538297363c381d2f1121327be77b67154034f Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 2 May 2024 11:41:46 +0200 Subject: [PATCH] =?UTF-8?q?refactor:=20Radio=20og=20Checkbox=20bruker=20:f?= =?UTF-8?q?ocus=20for=20bedre=20synlighet=20n=C3=A5r=20de=20blir=20lenket?= =?UTF-8?q?=20til=20fra=20ErrorSummary?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/angry-numbers-tell.md | 5 + @navikt/core/css/form/radio-checkbox.css | 124 +++++------------------ 2 files changed, 28 insertions(+), 101 deletions(-) create mode 100644 .changeset/angry-numbers-tell.md diff --git a/.changeset/angry-numbers-tell.md b/.changeset/angry-numbers-tell.md new file mode 100644 index 0000000000..4db2f6f3c2 --- /dev/null +++ b/.changeset/angry-numbers-tell.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-css": patch +--- + +Checkbox, Radio: Erstatter `:focus-visible` med `:focus` for bedre UX brukt sammen med ErrorSummary. diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css index 56dc5a18af..62fdf869c6 100644 --- a/@navikt/core/css/form/radio-checkbox.css +++ b/@navikt/core/css/form/radio-checkbox.css @@ -70,8 +70,8 @@ height: calc(1.25rem - 0.25rem); } -.navds-checkbox__input:focus-visible + .navds-checkbox__label::before, -.navds-radio__input:focus-visible + .navds-radio__label::before { +.navds-checkbox__input:focus + .navds-checkbox__label::before, +.navds-radio__input:focus + .navds-radio__label::before { outline: 2px solid transparent; outline-offset: 2px; box-shadow: @@ -80,33 +80,13 @@ 0 0 0 4px var(--a-border-focus); } -@supports not selector(:focus-visible) { - .navds-checkbox__input:focus + .navds-checkbox__label::before, - .navds-radio__input:focus + .navds-radio__label::before { - outline: 2px solid transparent; - outline-offset: 2px; - box-shadow: - 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), - 0 0 0 4px var(--a-border-focus); - } -} - -.navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before, -.navds-radio__input:hover:focus-visible + .navds-radio__label::before { +.navds-checkbox__input:hover:focus + .navds-checkbox__label::before, +.navds-radio__input:hover:focus + .navds-radio__label::before { box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)), 0 0 0 4px var(--a-border-focus); } -@supports not selector(:focus-visible) { - .navds-checkbox__input:hover:focus + .navds-checkbox__label::before, - .navds-radio__input:hover:focus + .navds-radio__label::before { - box-shadow: - 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)), - 0 0 0 4px var(--a-border-focus); - } -} - .navds-checkbox__input:indeterminate + .navds-checkbox__label::after { content: ""; position: absolute; @@ -163,24 +143,14 @@ background-position: 0.25rem center; } -.navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before, -.navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before { +.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before, +.navds-checkbox__input:checked:focus + .navds-checkbox__label::before { box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)), 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus); } -@supports not selector(:focus-visible) { - .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before, - .navds-checkbox__input:checked:focus + .navds-checkbox__label::before { - box-shadow: - 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)), - 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), - 0 0 0 4px var(--a-border-focus); - } -} - .navds-radio__input:checked + .navds-radio__label::before { box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)), @@ -188,40 +158,23 @@ background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected)); } -.navds-radio__input:checked:focus-visible + .navds-radio__label::before { +.navds-radio__input:checked:focus + .navds-radio__label::before { box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)), inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus); } -@supports not selector(:focus-visible) { - .navds-radio__input:checked:focus + .navds-radio__label::before { - box-shadow: - 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), - inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), - 0 0 0 4px var(--a-border-focus); - } -} - .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label, .navds-radio__input:hover:not(:disabled) + .navds-radio__label { color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover)); } -.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible) - + .navds-checkbox__label::before, -.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before { +.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before, +.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before { box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)); } -@supports not selector(:focus-visible) { - .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before, - .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before { - box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)); - } -} - .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before, .navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before { background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle)); @@ -235,63 +188,32 @@ } .navds-checkbox--error - > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate) + > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before, -.navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before { +.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before { box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus); } -@supports not selector(:focus-visible) { - .navds-checkbox--error - > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate) - + .navds-checkbox__label::before, - .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before { - box-shadow: - 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), - 0 0 0 4px var(--a-border-focus); - } -} - .navds-checkbox--error - > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible) + > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before, -.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before { +.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before { background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle)); box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)); } .navds-checkbox--error - > .navds-checkbox__input:focus-visible:hover:not(:disabled):not(:checked):not(:indeterminate) + > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before, -.navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before { +.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before { background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle)); box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus); } -@supports not selector(:focus-visible) { - .navds-checkbox--error - > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) - + .navds-checkbox__label::before, - .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before { - background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle)); - box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)); - } - - .navds-checkbox--error - > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate) - + .navds-checkbox__label::before, - .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before { - background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle)); - box-shadow: - 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), - 0 0 0 4px var(--a-border-focus); - } -} - .navds-checkbox--disabled, .navds-radio--disabled { opacity: 0.3; @@ -323,16 +245,16 @@ > .navds-checkbox__input:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before, .navds-checkbox--readonly - > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus-visible) + > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before, .navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before, -.navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus-visible) + .navds-radio__label::before { +.navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus) + .navds-radio__label::before { background-color: var(--__ac-radio-checkbox-readonly-bg); box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border); } -.navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before, -.navds-radio--readonly > .navds-radio__input:focus-visible + .navds-radio__label::before { +.navds-checkbox--readonly > .navds-checkbox__input:focus + .navds-checkbox__label::before, +.navds-radio--readonly > .navds-radio__input:focus + .navds-radio__label::before { --__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus); } @@ -362,8 +284,8 @@ } @media (forced-colors: active) { - .navds-checkbox__input:focus-visible + .navds-checkbox__label::before, - .navds-radio__input:focus-visible + .navds-radio__label::before { + .navds-checkbox__input:focus + .navds-checkbox__label::before, + .navds-radio__input:focus + .navds-radio__label::before { outline-color: highlight; } @@ -395,7 +317,7 @@ background-color: var(--__ac-radio-checkbox-high-contrast-text); } - .navds-radio__input:checked:focus-visible + .navds-radio__label::before { + .navds-radio__input:checked:focus + .navds-radio__label::before { border: 1px solid var(--__ac-radio-checkbox-high-contrast-bg); outline: 2px solid highlight; outline-offset: 2px; @@ -406,7 +328,7 @@ color: highlight; } - .navds-checkbox__input:focus-visible + .navds-checkbox__label::before { + .navds-checkbox__input:focus + .navds-checkbox__label::before { outline: 2px solid var(--__ac-radio-checkbox-high-contrast-highlight); }