fix keyboard nav on login screen (#12956)

* fix keyboard nav on login screen

* adjust for dark mode

* remove border radius from focus styles + dont open locale selector on focus

* add missing aria label

* minor fixes based on another PR comment

* remove tabbingindex from components + fix checkbox component disabled state

* remove tabbingindex from checkbox

* remove tabbingindex from LocaleSelector

* address pr comments

pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue

@@ -113,7 +113,7 @@ export default defineComponent({
     primary: {
       type:    Boolean,
       default: false
-    },
+    }
   },
 
   emits: ['update:value'],
@@ -227,7 +227,7 @@ export default defineComponent({
         :checked="isChecked"
         :value="valueWhenTrue"
         type="checkbox"
-        :tabindex="-1"
+        tabindex="-1"
         :name="id"
         @click.stop.prevent
       >
@@ -325,9 +325,14 @@ $fontColor: var(--input-label);
     width: 14px;
     background-color: var(--body-bg);
     border-radius: var(--border-radius);
-    transition: all 0.3s ease-out;
     border: 1px solid var(--border);
     flex-shrink: 0;
+
+    &:focus-visible {
+      @include focus-outline;
+      outline-offset: 2px;
+      border-radius: 0;
+    }
   }
 
   input {

shell/assets/translations/en-us.yaml

@@ -115,6 +115,7 @@ generic:
   basic: Basic
 
 locale:
+  menu: Locale selector menu
   en-us: English
   zh-hans: 简体中文
   none: (None)

shell/components/LocaleSelector.vue

@@ -11,7 +11,11 @@ export default {
     mode: {
       type:    String,
       default: ''
-    },
+    }
+  },
+
+  data() {
+    return { isLocaleSelectorOpen: false };
   },
 
   computed: {
@@ -40,8 +44,15 @@ export default {
   },
 
   methods: {
+    openLocaleSelector() {
+      this.isLocaleSelectorOpen = true;
+    },
+    closeLocaleSelector() {
+      this.isLocaleSelectorOpen = false;
+    },
     switchLocale($event) {
       this.$store.dispatch('i18n/switchTo', $event);
+      this.closeLocaleSelector();
     },
   }
 };
@@ -50,13 +61,28 @@ export default {
 <template>
   <div>
     <div v-if="mode === 'login'">
-      <div v-if="showLocale">
+      <div
+        v-if="showLocale"
+        role="menu"
+        :aria-label="t('locale.menu')"
+        class="locale-login-container"
+        tabindex="0"
+        @click="openLocaleSelector"
+        @blur.capture="closeLocaleSelector"
+        @keyup.enter="openLocaleSelector"
+        @keyup.space="openLocaleSelector"
+      >
         <v-dropdown
           popperClass="localeSelector"
+          :shown="isLocaleSelectorOpen"
           placement="top"
           distance="8"
           skidding="12"
-          :triggers="['click']"
+          :triggers="[]"
+          :autoHide="false"
+          :flip="false"
+          :container="false"
+          @focus.capture="openLocaleSelector"
         >
           <a
             data-testid="locale-selector"
@@ -74,13 +100,21 @@ export default {
                 v-if="showNone"
                 v-t="'locale.none'"
                 class="hand"
-                @click="switchLocale('none')"
+                tabindex="0"
+                role="menuitem"
+                @click.stop="switchLocale('none')"
+                @keyup.enter.stop="switchLocale('none')"
+                @keyup.space.stop="switchLocale('none')"
               />
               <li
                 v-for="(label, name) in availableLocales"
                 :key="name"
+                tabindex="0"
+                role="menuitem"
                 class="hand"
-                @click="switchLocale(name)"
+                @click.stop="switchLocale(name)"
+                @keyup.enter.stop="switchLocale(name)"
+                @keyup.space.stop="switchLocale(name)"
               >
                 {{ label }}
               </li>
@@ -114,11 +148,21 @@ export default {
   border-radius: 4px;
 }
 
+.hand:focus-visible {
+  @include focus-outline;
+  outline-offset: 4px;
+}
+
 .locale-chooser {
   cursor: pointer;
 
   &:hover {
     text-decoration: none;
   }
 }
+
+.locale-login-container:focus-visible {
+  @include focus-outline;
+  outline-offset: 2px;
+}
 </style>

shell/components/form/Password.vue

@@ -41,7 +41,7 @@ export default {
     mode: {
       type:    String,
       default: _CREATE,
-    },
+    }
   },
   data() {
     return { reveal: false };
@@ -68,6 +68,9 @@ export default {
       }
 
       return attributes;
+    },
+    hideShowLabel() {
+      return this.reveal ? this.t('action.hide') : this.t('action.show');
     }
   },
   watch: {
@@ -92,6 +95,9 @@ export default {
     },
     focus() {
       this.$refs.input.$refs.value.focus();
+    },
+    hideShowFn() {
+      this.reveal ? this.reveal = false : this.reveal = true;
     }
   }
 };
@@ -127,17 +133,15 @@ export default {
           class="addon"
         >
           <a
-            v-if="reveal"
-            tabindex="-1"
             href="#"
-            @click.prevent.stop="reveal = false"
-          >{{ t('action.hide') }}</a>
-          <a
-            v-else
-            tabindex="-1"
-            href="#"
-            @click.prevent.stop="reveal=true"
-          >{{ t('action.show') }}</a>
+            tabindex="0"
+            class="hide-show"
+            role="button"
+            @click.prevent.stop="hideShowFn"
+            @keyup.space.prevent.stop="hideShowFn"
+          >
+            {{ hideShowLabel }}
+          </a>
         </div>
       </template>
     </LabeledInput>
@@ -157,10 +161,16 @@ export default {
   .password {
     display: flex;
     flex-direction: column;
+
     .labeled-input {
       .addon {
-          padding-left: 12px;
-          min-width: 65px;
+        padding-left: 12px;
+        min-width: 65px;
+
+        .hide-show:focus-visible {
+          @include focus-outline;
+          outline-offset: 4px;
+        }
       }
     }
     .genPassword {