From: Arash <arashyadegari0402@gmail.com>
Date: Thu, 5 Jan 2023 16:18:47 +0000 (+0330)
Subject: feat: add focus behaviour to switch
X-Git-Tag: v6.9.0^2~8^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F12522%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 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;