fix: no focus-outline when using mouse navigation

ISSUES CLOSED: #4393
fremtind · Dec 30, 2024 · aa3cd53 · aa3cd53
1 parent e1df3cc
commit aa3cd53
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 16 deletions.
diff --git a/packages/combobox/combobox.scss b/packages/combobox/combobox.scss
@@ -118,9 +118,11 @@ $_combobox-search-input-selection-color--inverted: color.scale(
             padding: var(--jkl-combobox-button-active-value-padding);
         }
 
-        &:has(:focus-visible) {
-            @include jkl.focus-outline;
-            background-color: var(--jkl-combobox-open-background-color);
+        @include jkl.keyboard-navigation {
+            &:has(:focus-visible) {
+                @include jkl.focus-outline;
+                background-color: var(--jkl-combobox-open-background-color);
+            }
         }
 
         &:has(.jkl-icon-button:focus-visible) {

diff --git a/packages/jokul/src/components/combobox/styles/combobox.scss b/packages/jokul/src/components/combobox/styles/combobox.scss
@@ -116,9 +116,11 @@ $_combobox-search-input-selection-color--inverted: color.scale(
             padding: var(--jkl-combobox-button-active-value-padding);
         }
 
-        &:has(:focus-visible) {
-            @include jkl.focus-outline;
-            background-color: var(--jkl-combobox-open-background-color);
+        @include jkl.keyboard-navigation {
+            &:has(:focus-visible) {
+                @include jkl.focus-outline;
+                background-color: var(--jkl-combobox-open-background-color);
+            }
         }
 
         &:has(.jkl-icon-button:focus-visible) {

diff --git a/packages/jokul/src/components/select/styles/select.scss b/packages/jokul/src/components/select/styles/select.scss
@@ -39,7 +39,7 @@
 
     @include jkl.reset-outline;
 
-    & *:focus {
+    & *:focus-visible {
         outline: none;
     }
 
@@ -113,10 +113,6 @@
             color: var(--jkl-color-text-default);
         }
 
-        &:focus {
-            @include jkl.focus-outline;
-        }
-
         &:hover {
             border-color: var(--jkl-color-border-input-focus);
             box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
@@ -125,6 +121,27 @@
                 transform: translateY(calc(-50% + #{jkl.rem(3px)}));
             }
         }
+
+        &:focus-visible {
+            outline: none;
+        }
+    }
+
+    @include jkl.keyboard-navigation {
+        &__search-input,
+        &__button {
+            &:focus-visible,
+            &:has(:focus-visible) {
+                @include jkl.focus-outline;
+            }
+        }
+
+        &:has(:focus-visible) {
+            .jkl-select__button,
+            .jkl-select__search-input {
+                @include jkl.focus-outline;
+            }
+        }
     }
 
     &__button {

diff --git a/packages/select/select.scss b/packages/select/select.scss
@@ -39,7 +39,7 @@
 
     @include jkl.reset-outline;
 
-    & *:focus {
+    & *:focus-visible {
         outline: none;
     }
 
@@ -113,10 +113,6 @@
             color: var(--jkl-color-text-default);
         }
 
-        &:focus {
-            @include jkl.focus-outline;
-        }
-
         &:hover {
             border-color: var(--jkl-color-border-input-focus);
             box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
@@ -125,6 +121,27 @@
                 transform: translateY(calc(-50% + #{jkl.rem(3px)}));
             }
         }
+
+        &:focus-visible {
+            outline: none;
+        }
+    }
+
+    @include jkl.keyboard-navigation {
+        &__search-input,
+        &__button {
+            &:focus-visible,
+            &:has(:focus-visible) {
+                @include jkl.focus-outline;
+            }
+        }
+
+        &:has(:focus-visible) {
+            .jkl-select__button,
+            .jkl-select__search-input {
+                @include jkl.focus-outline;
+            }
+        }
     }
 
     &__button {