Fix top-level burger menu keyboard navigation

rancher · Dec 12, 2024 · 976e342 · 976e342
1 parent 1c540a8
commit 976e342
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 2 deletions.
diff --git a/shell/assets/styles/base/_mixins.scss b/shell/assets/styles/base/_mixins.scss
@@ -147,8 +147,16 @@
   }
 }
 
+// -------------------------------------------------------------------------------------------------
+// Focus styles
+
 @mixin form-focus {
   // Focus for form like elements (not to be confused with basic :focus style)
   outline: none;
-  border-color: var(--outline);
-}
+  border-color: var(--primary-focus);
+}
+
+@mixin focus-outline {
+  // Focus for form like elements (not to be confused with basic :focus style)
+  outline: 2px solid var(--primary-focus);
+}
diff --git a/shell/assets/styles/themes/_light.scss b/shell/assets/styles/themes/_light.scss
@@ -26,6 +26,7 @@ $disabled  : $medium;
 $primary         : #3D98D3;
 $secondary       : $darker;
 $link            : #3D98D3;
+$focus           : #3300ff;
 
 // Status colors
 $success         : #5D995D;
@@ -53,6 +54,7 @@ BODY, .theme-light {
   --primary-border             : #{$primary};
   --primary-banner-bg          : #{rgba($primary, 0.15)};
   --primary-light-bg           : #{rgba($primary, 0.05)};
+  --primary-focus              : #{$focus};
 
 
   .text-primary {

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
@@ -120,6 +120,7 @@ locale:
   none: (None)
 
 nav:
+  expandCollapseAppBar: Expand/Collapse the Application Bar
   harvesterDashboard: Harvester Dashboard
   backToRancher: Cluster Manager
   tools: Tools

diff --git a/shell/components/nav/TopLevelMenu.vue b/shell/components/nav/TopLevelMenu.vue
@@ -514,7 +514,12 @@ export default {
         <div class="title">
           <div
             data-testid="top-level-menu"
+            :aria-label="t('nav.expandCollapseAppBar')"
+            role="button"
+            tabindex="0"
             class="menu"
+            @keyup.enter="toggle()"
+            @keyup.space="toggle()"
             @click="toggle()"
           >
             <svg
@@ -972,6 +977,15 @@ export default {
       align-items: center;
       justify-content: center;
 
+      &:focus-visible {
+        outline: none;
+
+        .menu-icon {
+          @include focus-outline;
+          outline-offset: 4px;  // Ensure there is space around the menu icon for the focus indication
+        }
+      }
+
       .menu-icon {
         width: 25px;
         height: 25px;