🐛 Select get focus-outline when clicked in firefox, as focus-visible …

…were ignored previously (#3415)

.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.

@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;

@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;