diff --git a/.vscode/settings.json b/.vscode/settings.json
index b0045b10b2..328ab09a9a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,6 +6,6 @@
     "typescriptreact",
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
+    "source.fixAll.eslint": "explicit"
   },
 }
\ No newline at end of file
diff --git a/css/src/components/switch.module.css b/css/src/components/switch.module.css
index ce772088b9..b9a0a809a9 100644
--- a/css/src/components/switch.module.css
+++ b/css/src/components/switch.module.css
@@ -42,12 +42,14 @@
 }
 
 .Switch-input:focus ~ .Switch-wrapper {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  box-shadow: 0 0 0 var(--spacing-05) var(--shadow-0),
+    0 0 0 calc(var(--spacing-05) + var(--border-width-05)) var(--primary-focus);
   background-color: var(--secondary-light);
 }
 
 .Switch-input:focus ~ .Switch-wrapper--checked {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  box-shadow: 0 0 0 var(--spacing-05) var(--shadow-0),
+    0 0 0 calc(var(--spacing-05) + var(--border-width-05)) var(--primary-focus);
   background-color: var(--primary);
 }
 
@@ -63,6 +65,10 @@
   background-color: var(--secondary-dark);
 }
 
+.Switch-input:active ~ .Switch-wrapper:before {
+  outline-color: var(--inverse-light);
+}
+
 .Switch-input:active ~ .Switch-wrapper--checked {
   background-color: var(--primary-darker);
 }
@@ -88,6 +94,8 @@
   border-radius: var(--border-radius-full);
   box-sizing: border-box;
   transition-duration: 80ms;
+  outline: 1px solid var(--inverse-lighter);
+  outline-offset: -1px;
 }
 
 .Switch-wrapper--checked {
@@ -102,6 +110,7 @@
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   transition-duration: 80ms;
+  outline: none;
 }
 
 .Switch--disabled {
@@ -112,6 +121,10 @@
   background-color: var(--secondary-lighter);
 }
 
+.Switch-wrapper--disabled:before {
+  outline-color: var(--secondary-dark);
+}
+
 .Switch-wrapper--checkedDisabled {
   background-color: var(--primary-lighter);
 }