diff --git a/.changeset/friendly-planes-taste.md b/.changeset/friendly-planes-taste.md new file mode 100644 index 0000000000..35ed94852d --- /dev/null +++ b/.changeset/friendly-planes-taste.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-css": patch +--- + +Select: Now shows focus-outline when ':focus' is set trough pointer or label in all browsers. Chrome and Firefox handles `:focus-visible` differently for 'select', previously causing outline-border not to show in Firefox. diff --git a/@navikt/core/css/darkside/form/select.darkside.css b/@navikt/core/css/darkside/form/select.darkside.css index 2102e5065b..28dd99b224 100644 --- a/@navikt/core/css/darkside/form/select.darkside.css +++ b/@navikt/core/css/darkside/form/select.darkside.css @@ -17,7 +17,7 @@ cursor: pointer; } - &:focus-visible { + &:focus { outline: 2px solid var(--ax-border-focus); outline-offset: 2px; border-color: var(--ax-border-accent-strong); @@ -71,7 +71,7 @@ } > * select:hover, - > * select:focus-visible { + > * select:focus { box-shadow: 0 0 0 1px var(--ax-border-danger-strong); border-color: var(--ax-border-danger-strong); } @@ -107,7 +107,7 @@ cursor: default; @media (forced-colors: active) { - &:is(:hover, :focus-visible) { + &:is(:hover, :focus) { background-color: ButtonFace; border-color: ButtonText; color: ButtonText; diff --git a/@navikt/core/css/form/select.css b/@navikt/core/css/form/select.css index ed39b8f6e2..e5ad882f43 100644 --- a/@navikt/core/css/form/select.css +++ b/@navikt/core/css/form/select.css @@ -22,7 +22,7 @@ box-shadow: none; } - .navds-select__input.navds-select__input.navds-select__input:focus-visible { + .navds-select__input.navds-select__input.navds-select__input:focus { outline: 2px solid highlight; outline-offset: 2px; } @@ -33,19 +33,12 @@ cursor: pointer; } -.navds-select__input:focus-visible { +.navds-select__input:focus { outline: none; border-color: var(--ac-select-active-border, var(--a-border-action-selected)); box-shadow: var(--a-shadow-focus); } -@supports not selector(:focus-visible) { - .navds-select__input:focus { - outline: none; - box-shadow: var(--a-shadow-focus); - } -} - .navds-select__container { position: relative; display: flex;