fix: fix focus ring

sbb-design-systems · Apr 18, 2024 · da81b1a · da81b1a
1 parent b8a2889
commit da81b1a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 19 deletions.
diff --git a/src/components/card/common/card-action.scss b/src/components/card/common/card-action.scss
@@ -19,6 +19,7 @@
   inset: 0;
   border-radius: var(--sbb-card-border-radius);
   cursor: pointer;
+  outline: none;
 
   // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components.
   // Handle focus when on the host (button variant)
@@ -27,7 +28,7 @@
   }
 
   // Handle focus on the action (link variant)
-  :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) :focus-visible & {
+  :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &:focus-visible {
     @include sbb.focus-outline;
   }
 }
diff --git a/src/components/header/common/header-action.scss b/src/components/header/common/header-action.scss
@@ -72,10 +72,7 @@
   padding-inline: var(--sbb-header-action-padding-inline);
   cursor: pointer;
   user-select: none;
-
-  // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
-  outline: none !important;
+  outline: none;
 
   &::before {
     position: absolute;

diff --git a/src/components/menu/common/menu-action.scss b/src/components/menu/common/menu-action.scss
@@ -44,6 +44,16 @@
   }
 }
 
+:is(.sbb-menu-button, .sbb-menu-link) {
+  text-decoration: none;
+  display: block;
+  width: 100%;
+  color: var(--sbb-menu-action-color);
+  padding: var(--sbb-spacing-fixed-1x) var(--sbb-menu-action-outer-horizontal-padding);
+  cursor: var(--sbb-menu-action-cursor);
+  outline: none;
+}
+
 .sbb-menu-action__content {
   @include sbb.text-xs--regular;
 
@@ -78,19 +88,6 @@
   }
 }
 
-:is(.sbb-menu-button, .sbb-menu-link) {
-  text-decoration: none;
-  display: block;
-  width: 100%;
-  color: var(--sbb-menu-action-color);
-  padding: var(--sbb-spacing-fixed-1x) var(--sbb-menu-action-outer-horizontal-padding);
-  cursor: var(--sbb-menu-action-cursor);
-
-  // Use !important here to not interfere with Firefox focus ring definition
-  // which appears in normalize css of several frameworks.
-  outline: none !important;
-}
-
 .sbb-menu-action__icon {
   display: flex;
   min-width: var(--sbb-size-icon-ui-small);

diff --git a/src/components/navigation/common/navigation-action.scss b/src/components/navigation/common/navigation-action.scss
@@ -59,6 +59,7 @@ sbb-icon {
   hyphens: auto;
   text-align: left;
   color: var(--sbb-navigation-action-color);
+  outline: none;
 
   @include sbb.if-forced-colors {
     transition: none;
@@ -85,7 +86,7 @@ sbb-icon {
   }
 
   // Handle focus on the action (link variant)
-  :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) :focus-visible & {
+  :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &:focus-visible {
     @include navigation-action-focus-outline;
   }
 }