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

Approved-by: Anton Gunnarsson

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",