fix keyboard navigation

undp · Jul 9, 2024 · 4e1f49e · 4e1f49e
1 parent d811319
commit 4e1f49e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 19 deletions.
diff --git a/stories/Components/Navigationcomponents/Sidebar/sidebar.scss b/stories/Components/Navigationcomponents/Sidebar/sidebar.scss
@@ -13,6 +13,12 @@
     h6 {
       border-bottom: 2px solid $color-black;
 
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: $color-gray-400;
+      }
+
       &::after {
         @include transform(translateY(-50%) rotateZ(-180deg));
       }
@@ -30,13 +36,21 @@
     margin-bottom: 0;
     padding-left: 0;
 
-    @include devicebreak(large) {
-      a {
-        &:hover {
-          // background-color: $color-gray-300;
-          background-color: $color-gray-400;
-        }
-      }
+    a {
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $color-gray-400;
+    }
+
+    // @include devicebreak(large) {
+
+    //     &:hover {
+    //       // background-color: $color-gray-300;
+    //       background-color: $color-gray-400;
+    //     }
+    //   }
     }
   }
 
@@ -159,12 +173,18 @@
           background-color: transparent;
           color: $color-black;
 
-          @include devicebreak(large) {
-            &:hover {
-              // background-color: $color-gray-300;
-              background-color: $color-gray-400;
-            }
+          &:hover,
+          &:focus,
+          &:active {
+            background-color: $color-gray-400;
           }
+
+          // @include devicebreak(large) {
+          //   &:hover {
+          //     // background-color: $color-gray-300;
+          //     background-color: $color-gray-400;
+          //   }
+          // }
         }
 
         &:last-of-type a {

diff --git a/stories/Components/UIcomponents/Buttons/CtaLink/cta-link.scss b/stories/Components/UIcomponents/Buttons/CtaLink/cta-link.scss
@@ -24,7 +24,9 @@
       background: url(~icons/arrow-left-expand-defaut.svg) no-repeat left center;
     }
 
-    &:hover {
+    &:hover,
+    &:focus,
+    &:active {
       &::after {
         @include translate(70%,0);
       }

diff --git a/stories/Components/UIcomponents/LanguageSwitcher/language-switcher.scss b/stories/Components/UIcomponents/LanguageSwitcher/language-switcher.scss
@@ -32,7 +32,9 @@
         display: block;
         padding: $spacing-04 $spacing-05;
 
-        &:hover {
+        &:hover,
+        &:focus,
+        &:active {
           background-color: $color-gray-400;
         }
       }
@@ -97,13 +99,11 @@
     &:hover {
       color: $color-blue-400;
 
-      &::before {
-        background-color: $color-blue-400;
-      }
-
+      &::before,
       &::after {
-        background-color: $color-blue-400;
+        filter: brightness(0) saturate(100%) invert(57%) sepia(92%) saturate(1476%) hue-rotate(186deg) brightness(90%) contrast(92%);
       }
+
     }
 
     &.white {