From 0d905205ae4cd5b5ba1493035d2b180dc54f0e66 Mon Sep 17 00:00:00 2001
From: Arash <arashyadegari0402@gmail.com>
Date: Thu, 5 Jan 2023 19:48:47 +0330
Subject: [PATCH] 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
---
 scss/components/_switch.scss | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/scss/components/_switch.scss b/scss/components/_switch.scss
index 9451777b3..47b6dff93 100644
--- 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;
-- 
2.47.2