From da81b1a8b36460bbaa76cecc390714a2eec790b6 Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Thu, 18 Apr 2024 15:40:22 +0200
Subject: [PATCH] fix: fix focus ring

---
 src/components/card/common/card-action.scss   |  3 ++-
 .../header/common/header-action.scss          |  5 +---
 src/components/menu/common/menu-action.scss   | 23 ++++++++-----------
 .../navigation/common/navigation-action.scss  |  3 ++-
 4 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/card/common/card-action.scss b/src/components/card/common/card-action.scss
index 17f420761f..9ae136c6e3 100644
--- 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
index 5c03fd6dec..7d1baac3ab 100644
--- 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
index 747f42a286..ff6d6a186c 100644
--- 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
index 4c0b96e765..45f1b00f67 100644
--- 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;
   }
 }