Use CSS from focusHaloSpaced for ToggleSwitch focus styles (#1602)

joecowton1 · web-flow · commit 1f218bf658d2 · 2022-10-18T17:15:07.000+01:00
diff --git a/.changeset/twelve-carrots-buy.md b/.changeset/twelve-carrots-buy.md
@@ -0,0 +1,5 @@
+---
+'@guardian/source-react-components-development-kitchen': patch
+---
+
+Update focus styles for `ToggleSwitch`
diff --git a/packages/@guardian/source-react-components-development-kitchen/src/toggle-switch/styles.ts b/packages/@guardian/source-react-components-development-kitchen/src/toggle-switch/styles.ts
@@ -112,9 +112,12 @@ export const toggleStyles = (format?: ArticleFormat): SerializedStyles => {
 			background: ${neutral[100]};
 		}
 
-		&:focus-visible {
-			outline: 5px solid ${format ? neutral[100] : brand[500]};
-			outline-offset: 3px;
+		&:focus {
+			outline: 0;
+			html:not(.src-focus-disabled) & {
+				outline: 5px solid ${format ? neutral[100] : brand[500]};
+				outline-offset: 3px;
+			}
 		}
 	`;
 };

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@guardian/source-react-components-development-kitchen': patch
 +---
++
 +Update focus styles for `ToggleSwitch`