switch has new focus

digdir · Jun 6, 2024 · 4c654b7 · 4c654b7
1 parent 51ef18b
commit 4c654b7
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/packages/css/switch.css b/packages/css/switch.css
@@ -155,10 +155,22 @@
     opacity: var(--ds-disabled-opacity);
   }
 
-  .fds-switch__input:focus-visible + .fds-switch__label .fds-switch__track {
+  /*   .fds-switch__input:focus-visible + .fds-switch__label .fds-switch__track {
     outline: var(--dsc-switch-focus-border-width) solid var(--ds-focus-outer);
     outline-offset: var(--dsc-switch-focus-border-width);
     box-shadow: 0 0 0 var(--dsc-switch-focus-border-width) var(--ds-focus-inner);
+  } */
+
+  /**
+ * Apply a focus outline on an element when it is focused with keyboard
+ */
+  .fds-switch:has(.fds-switch__input:focus-visible) {
+    --dsc-focus-border-width: 3px;
+
+    outline: var(--dsc-focus-border-width) solid var(--ds-focus-outer);
+    outline-offset: var(--dsc-focus-border-width);
+    box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-focus-inner);
+    border-radius: var(--ds-border-radius-md);
   }
 
   .fds-switch__input:not([readonly]):checked + .fds-switch__label .fds-switch__track {