fix keyboard nav for app bar (#12958)

* fix keyboard nav for app bar

* remove dones

* minor fixes based on another PR comment

* removed all space key for links + move floating-vue config to plugin definition

* rename tabbing-index to tab-order + add aria-label to main menu

shell/assets/styles/base/_mixins.scss

@@ -159,4 +159,4 @@
 @mixin focus-outline {
   // Focus for form like elements (not to be confused with basic :focus style)
   outline: 2px solid var(--primary-keyboard-focus);
-}
+}

shell/assets/translations/en-us.yaml

@@ -121,6 +121,20 @@ locale:
   none: (None)
 
 nav:
+  ariaLabel:
+    topLevelMenu: Main menu
+    homePage: Home page navigation menu
+    cluster: Cluster menu item
+    harvesterCluster: Harvester cluster menu item
+    seeAll: See all clusters menu item
+    multiClusterApps: Main menu multi cluster app menu item
+    configurationApps: Main menu configuration app menu item
+    support: Support page link
+    about: About page link
+    pinCluster: Pin/Unpin cluster
+  alt:
+    mainMenuIcon: Main menu icon
+    mainMenuRancherLogo: Main menu Rancher logo
   expandCollapseAppBar: Expand/Collapse the Application Bar
   harvesterDashboard: Harvester Dashboard
   backToRancher: Cluster Manager
@@ -197,6 +211,7 @@ nav:
     placeholder: Filter clusters by...
     noResults: No matching clusters
     clusters: clusters
+    ariaLabel: Filter clusters on main menu
   resourceSearch:
     label: Resource Search
     toolTip: Resource Search {key}

shell/components/nav/Pinned.vue

@@ -5,6 +5,10 @@ export default {
     cluster: {
       type:     Object,
       required: true,
+    },
+    tabOrder: {
+      type:    Number,
+      default: null,
     }
   },
 
@@ -28,11 +32,12 @@ export default {
 
 <template>
   <i
-    :tabindex="0"
+    :tabindex="tabOrder"
     :aria-checked="!!pinned"
     class="pin icon"
     :class="{'icon-pin-outlined': !pinned, 'icon-pin': pinned}"
     aria-role="button"
+    :aria-label="`${t('nav.ariaLabel.pinCluster')} ${ cluster.label }`"
     @click.stop.prevent="toggle"
     @keydown.enter.prevent="toggle"
     @keydown.space.prevent="toggle"