fix keyboard nav on login screen

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

@@ -114,6 +114,14 @@ export default defineComponent({
       type:    Boolean,
       default: false
     },
+
+    /**
+     * Tab index for proper keyboard nav control
+     */
+    tabbingIndex: {
+      type:    Number,
+      default: null
+    },
   },
 
   emits: ['update:value'],
@@ -227,14 +235,14 @@ export default defineComponent({
         :checked="isChecked"
         :value="valueWhenTrue"
         type="checkbox"
-        :tabindex="-1"
+        :tab-index="tabbingIndex"
         :name="id"
         @click.stop.prevent
       >
       <span
         class="checkbox-custom"
         :class="{indeterminate: indeterminate}"
-        :tabindex="isDisabled ? -1 : 0"
+        :tabindex="-1"
         :aria-label="label"
         :aria-checked="!!value"
         role="checkbox"
@@ -337,6 +345,12 @@ $fontColor: var(--input-label);
     z-index: -1;
   }
 
+  input:focus-visible ~ .checkbox-custom {
+    @include focus-outline;
+    outline-offset: 2px;
+    border-radius: 0;
+  }
+
   input:checked ~ .checkbox-custom {
     background-color:var(--primary);
     -webkit-transform: rotate(0deg) scale(1);

shell/assets/styles/base/_mixins.scss

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

shell/assets/styles/global/_button.scss

@@ -77,6 +77,11 @@ button,
     background-color: var(--primary-hover-bg);
     color: var(--primary-text);
   }
+
+  &:focus-visible {
+    @include focus-outline-primary;
+    outline-offset: -2px;
+  }
 }
 
 .role-secondary {

shell/assets/styles/themes/_dark.scss

@@ -21,6 +21,7 @@
 
   // dark main text
   $lightest: #ffffff;
+  $keyboard-focus: #ffffff;
 
   // menu cluster description active+hover
   $desc-light: #EEEFF4;
@@ -45,6 +46,7 @@
   --default-light-bg           : #{rgba($dark, 0.05)};
   --slider-light-bg            : #{rgba($darker, 1)};
   --slider-light-bg-right      : #{rgba($darker, 0)};
+  --primary-keyboard-focus     : #{$keyboard-focus};
 
   --muted                      : #{$disabled};
 

shell/assets/translations/en-us.yaml

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

shell/components/AsyncButton.vue

@@ -275,6 +275,7 @@ export default defineComponent({
 <template>
   <button
     ref="btn"
+    role="button"
     :class="classes"
     :name="name"
     :type="type"

shell/components/LocaleSelector.vue

@@ -12,6 +12,14 @@ export default {
       type:    String,
       default: ''
     },
+    tabbingIndex: {
+      type:    Number,
+      default: null,
+    },
+  },
+
+  data() {
+    return { isLocaleSelectorOpen: false };
   },
 
   computed: {
@@ -40,8 +48,15 @@ export default {
   },
 
   methods: {
+    openLocaleSelector() {
+      this.isLocaleSelectorOpen = true;
+    },
+    closeLocaleSelector() {
+      this.isLocaleSelectorOpen = false;
+    },
     switchLocale($event) {
       this.$store.dispatch('i18n/switchTo', $event);
+      this.closeLocaleSelector();
     },
   }
 };
@@ -50,13 +65,28 @@ export default {
 <template>
   <div>
     <div v-if="mode === 'login'">
-      <div v-if="showLocale">
+      <div
+        v-if="showLocale"
+        role="menu"
+        :aria-label="t('locale.ariaLabel.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 +104,21 @@ export default {
                 v-if="showNone"
                 v-t="'locale.none'"
                 class="hand"
-                @click="switchLocale('none')"
+                :tab-index="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 +152,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

@@ -42,6 +42,10 @@ export default {
       type:    String,
       default: _CREATE,
     },
+    tabbingIndex: {
+      type:    Number,
+      default: null,
+    },
   },
   data() {
     return { reveal: false };
@@ -68,6 +72,9 @@ export default {
       }
 
       return attributes;
+    },
+    hideShowLabel() {
+      return this.reveal ? this.t('action.hide') : this.t('action.show');
     }
   },
   watch: {
@@ -92,6 +99,9 @@ export default {
     },
     focus() {
       this.$refs.input.$refs.value.focus();
+    },
+    hideShowFn() {
+      this.reveal ? this.reveal = false : this.reveal = true;
     }
   }
 };
@@ -110,6 +120,7 @@ export default {
       :disabled="isRandom"
       :ignore-password-managers="ignorePasswordManagers"
       :mode="mode"
+      :tab-index="tabbingIndex"
       @blur="$emit('blur', $event)"
     >
       <template #suffix>
@@ -127,17 +138,14 @@ 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>
+            :tab-index="tabbingIndex"
+            class="hide-show"
+            @click.prevent.stop="hideShowFn"
+            @keyup.space.prevent.stop="hideShowFn"
+          >
+            {{ hideShowLabel }}
+          </a>
         </div>
       </template>
     </LabeledInput>
@@ -157,10 +165,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 {

shell/pages/auth/login.vue

@@ -439,6 +439,7 @@ export default {
                   data-testid="local-login-username"
                   :label="t('login.username')"
                   autocomplete="username"
+                  :tab-index="0"
                 />
               </div>
               <div class="">
@@ -447,6 +448,7 @@ export default {
                   ref="password"
                   v-model:value="password"
                   data-testid="local-login-password"
+                  :tabbingIndex="1"
                   :label="t('login.password')"
                   autocomplete="password"
                 />
@@ -462,6 +464,7 @@ export default {
                   :waiting-label="t('login.loggingIn')"
                   :success-label="t('login.loggedIn')"
                   :error-label="t('asyncButton.default.error')"
+                  :tab-index="2"
                   @click="loginLocal"
                 />
                 <div
@@ -472,6 +475,7 @@ export default {
                     v-model:value="remember"
                     :label="t('login.remember.label')"
                     type="checkbox"
+                    :tabbingIndex="3"
                   />
                 </div>
               </div>
@@ -509,6 +513,7 @@ export default {
           <LocaleSelector
             :style="localeSelectorStyle"
             mode="login"
+            :tabbingIndex="4"
           />
         </div>
       </div>