chore: improve keyboard navigation

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

2 files changed, 36 insertions, 2 deletions

diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index df5ca3d..3219a96 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -46,11 +46,16 @@
       translateY(#{fun.convert-px(-4)});
   }
 
+  &:focus {
+    text-decoration: underline solid var(--color-fg-inverted) fun.convert-px(2);
+  }
+
   &:active {
     background: var(--color-primary-dark);
     box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary),
       0 0 0 fun.convert-px(3) var(--color-primary-darker),
       0 0 0 0 var(--color-primary-dark);
+    text-decoration: none;
     transform: translateX(#{fun.convert-px(4)}) translateY(#{fun.convert-px(4)});
   }
 }
@@ -96,7 +101,7 @@
     }
 
     &:focus {
-      text-decoration: underline var(--color-primary) fun.convert-px(3);
+      text-decoration: underline var(--color-primary) fun.convert-px(2);
     }
 
     &:active {
@@ -179,6 +184,10 @@
   border: none;
   font-size: var(--font-size-md);
 
+  &:focus {
+    outline: var(--color-primary-light) solid fun.convert-px(3);
+  }
+
   @include mix.media("screen") {
     @include mix.dimensions("md") {
       &:hover,
@@ -255,7 +264,13 @@
     }
   }
 
+  &:focus {
+    outline: var(--color-primary-light) solid fun.convert-px(3);
+  }
+
   &:active {
+    outline: none;
+
     svg {
       transform: scale(0.7);
     }
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);
+    }
+  }
 }