fix: issue with focus states in safari, fixed multiple focus states accross the application

Approved-by: Anton Gunnarsson

apps/scandic-web/components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css

@@ -22,6 +22,6 @@
 }
 
 .link:focus-visible {
-  outline: 2px auto var(--Border-Interactive-Focus);
+  outline: 2px solid var(--Border-Interactive-Focus);
   outline-offset: -4px;
 }

apps/scandic-web/components/Carousel/carousel.module.css

@@ -17,10 +17,6 @@
   min-width: 0;
 }
 
-.item:focus-visible {
-  outline: 2px auto var(--Border-Interactive-Focus);
-  outline-offset: 1px;
-}
 .buttonWrapper {
   position: absolute;
   top: 50%;

apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css

@@ -10,11 +10,6 @@
   border-width: 0;
   padding: var(--Space-x05) 0;
 
-  &:focus-visible {
-    outline: 2px auto var(--Border-Interactive-Focus);
-    outline-offset: 1px;
-  }
-
   &.loading {
     cursor: progress;
   }

apps/scandic-web/components/Header/MainMenu/MenuLink/menuLink.module.css

@@ -12,11 +12,6 @@
     background-color: var(--Surface-Primary-Hover);
   }
 
-  &:focus-visible {
-    outline: 2px auto var(--Border-Interactive-Focus);
-    outline-offset: 1px;
-  }
-
   &:not(:hover) .arrowIcon {
     opacity: 0;
   }

packages/booking-flow/lib/components/BookingCodeFilter/bookingCodeFilter.module.css

@@ -24,7 +24,7 @@
   cursor: pointer;
 }
 .radio[data-focus-visible]::before {
-  outline: 1px auto var(--Border-Interactive-Focus);
+  outline: 1px solid var(--Border-Interactive-Focus);
 }
 
 .radio {

packages/design-system/lib/components/ChipButton/chip-button.module.css

@@ -61,10 +61,3 @@
 .medium {
   height: 32px;
 }
-
-.Default:focus,
-.Outlined:focus,
-.FilterRounded:focus {
-  outline-offset: 4px;
-  outline-color: var(--Border-Interactive-Focus);
-}

packages/design-system/lib/components/ContentCard/contentCard.module.css

@@ -47,6 +47,22 @@
 }
 
 .link {
+  display: block;
   text-decoration: none;
   color: inherit;
+  position: relative;
+
+  &:focus-visible {
+    outline: none;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0px;
+      border: 2px solid var(--Border-Interactive-Focus);
+      border-radius: var(--Corner-Radius-md);
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
 }

packages/design-system/lib/normalize.css

@@ -21,7 +21,7 @@ ul {
 }
 
 *:focus-visible {
-  outline-color: var(--Border-Interactive-Focus);
+  outline: 2px solid var(--Border-Interactive-Focus);
   outline-offset: 2px;
 }
 

packages/design-system/package.json

@@ -228,8 +228,8 @@
   "dependencies": {
     "@material-symbols/svg-400": "0.40.2",
     "@scandic-hotels/common": "workspace:*",
-    "sonner": "^2.0.3",
+    "class-variance-authority": "^0.7.1",
-    "class-variance-authority": "^0.7.1"
+    "sonner": "^2.0.3"
   },
   "peerDependencies": {
     "@babel/core": "^7.27.4",