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, 16 insertions, 1 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);
     }