feat: add focus behaviour to switch

Adding two extra color for active-switch and not-active-switch on focus(focus visible). the changing color only occurs on keyboard events (like tab)

Resolves: #12499

diff --git a/scss/components/_switch.scss b/scss/components/_switch.scss
index 9451777b3d6b9f46122961dd82d55aefa24d73b1..47b6dff939caa7ae14a5bad7575e31a8bceec86b 100644 (file)
--- a/scss/components/_switch.scss
+++ b/scss/components/_switch.scss
@@ -10,10 +10,18 @@
 /// @type Color
 $switch-background: $medium-gray !default;
 
+/// Background color of a switch on focus.
+/// @type Color
+$switch-background-focus: scale-color($switch-background, $lightness: -10%) !default;
+
 /// Background active color of a switch.
 /// @type Color
 $switch-background-active: $primary-color !default;
 
+/// Background active color of a switch on focus.
+/// @type Color
+$switch-background-active-focus: scale-color($switch-background-active, $lightness: -15%) !default;
+
 /// Height of a switch, with no class applied.
 /// @type Number
 $switch-height: 2rem !default;
@@ -140,6 +148,21 @@ $switch-cursor-disabled: not-allowed !default;
     }
   }
 
+
+  // Change the visual style when the switch is focused
+  input:focus-visible ~ & {
+    background: $switch-background-focus;
+
+    &::after {
+      background: $switch-paddle-background;
+    }
+  }
+
+  input:checked:focus-visible ~ & {
+    background: $switch-background-active-focus;
+  }
+
+
   // indicate a disabled switch
   input:disabled ~ & {
     cursor: $switch-cursor-disabled;