chore: improve keyboard navigation

Add some focus styles mainly in toolbar components to help identify
active items when navigating with a keyboard.

1 files changed, 20 insertions, 1 deletions

diff --git a/src/components/Form/Toggle/Toggle.module.scss b/src/components/Form/Toggle/Toggle.module.scss
index e860b5e..48c88f6 100644
--- a/src/components/Form/Toggle/Toggle.module.scss
+++ b/src/components/Form/Toggle/Toggle.module.scss
@@ -30,7 +30,7 @@
     display: block;
     width: calc(var(--toggle-width) / 2);
     height: calc(var(--toggle-width) / 2);
-    background: var(--color-primary-lighter);
+    background: var(--color-primary-light);
     border: fun.convert-px(1) solid var(--color-primary);
     border-radius: 50%;
     box-shadow: inset 0 0 fun.convert-px(1) fun.convert-px(1)
@@ -53,4 +53,23 @@
       left: calc(100% - (var(--toggle-width) / 2) + #{fun.convert-px(2)});
     }
   }
+
+  &:hover,
+  &:focus {
+    ~ .label {
+      .toggle::after {
+        background: var(--color-primary-lighter);
+      }
+    }
+  }
+
+  &:focus ~ .label {
+    .title {
+      text-decoration: underline solid var(--color-primary) fun.convert-px(2);
+    }
+
+    .toggle {
+      outline: var(--color-border) solid fun.convert-px(5);
+    }
+  }
 }