Merge pull request #12522 from Arash1381-y/switch/add-keyboard-focus-behaviour

feat: add focus behavior to switch

Author: joeworkman

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;