Merge pull request #1146 from lumapps/fix_list-item_display_focus_rin…

…g_even_when_not_marked_as_highlighted fix(list-item): display focus ring even when not marked as highlighted
lumapps · Jul 25, 2024 · 8a3e478 · 8a3e478
2 parents e7d9aa8 + c09103b
commit 8a3e478
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- `ListItem`: display keyboard focus ring even when not highlighted
 - `Message`: changed spacing between icon and text from 16 to 8
 
 ## [3.7.4][] - 2024-06-20

diff --git a/packages/lumx-core/src/scss/components/list/_mixins.scss b/packages/lumx-core/src/scss/components/list/_mixins.scss
@@ -29,6 +29,11 @@
 
     cursor: pointer;
 
+    &[data-focus-visible-added] {
+        outline: 2px solid lumx-color-variant("dark", "N");
+        outline-offset: -2px;
+    }
+
     &:hover,
     &[data-focus-visible-added] {
         @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
@@ -44,11 +49,6 @@
 
     @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
 
-    &[data-focus-visible-added] {
-        outline: 2px solid lumx-color-variant("dark", "N");
-        outline-offset: -2px;
-    }
-
     &:active {
         @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
     }