From ef060068f41560fa66508185a3d627a1ac2dfbaa Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Fri, 27 Dec 2024 15:38:43 +0000
Subject: [PATCH 1/9] fix keyboard nav on login screen

---
 .../src/components/Form/Checkbox/Checkbox.vue | 17 +++++-
 shell/components/AsyncButton.vue              |  1 +
 shell/components/LocaleSelector.vue           | 55 +++++++++++++++++--
 shell/components/form/Password.vue            | 39 +++++++++----
 shell/pages/auth/login.vue                    |  5 ++
 5 files changed, 99 insertions(+), 18 deletions(-)

diff --git a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
index 22c6cdcce9f..0f799956cfe 100644
--- a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
+++ b/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,11 @@ $fontColor: var(--input-label);
     z-index: -1;
   }
 
+  input:focus-visible ~ .checkbox-custom {
+    @include focus-outline;
+    outline-offset: 2px;
+  }
+
   input:checked ~ .checkbox-custom {
     background-color:var(--primary);
     -webkit-transform: rotate(0deg) scale(1);
diff --git a/shell/components/AsyncButton.vue b/shell/components/AsyncButton.vue
index 3abbf570017..8e7b5f672c9 100644
--- a/shell/components/AsyncButton.vue
+++ b/shell/components/AsyncButton.vue
@@ -275,6 +275,7 @@ export default defineComponent({
 <template>
   <button
     ref="btn"
+    role="button"
     :class="classes"
     :name="name"
     :type="type"
diff --git a/shell/components/LocaleSelector.vue b/shell/components/LocaleSelector.vue
index e2abf5d0cb2..5e45de074e6 100644
--- a/shell/components/LocaleSelector.vue
+++ b/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,27 @@ export default {
 <template>
   <div>
     <div v-if="mode === 'login'">
-      <div v-if="showLocale">
+      <div
+        v-if="showLocale"
+        role="menu"
+        class="locale-login-container"
+        tabindex="0"
+        @click="openLocaleSelector"
+        @blur.capture="closeLocaleSelector"
+        @focus.capture="openLocaleSelector"
+        @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"
         >
           <a
             data-testid="locale-selector"
@@ -74,13 +103,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 +151,21 @@ export default {
   border-radius: 4px;
 }
 
+.hand:focus-visible {
+  @include focus-outline;
+  outline-offset: 4px;
+  border-radius: 4px;
+}
+
 .locale-chooser {
   cursor: pointer;
 
   &:hover {
     text-decoration: none;
   }
+
+  &:focus-visible {
+    outline-offset: 2px;
+  }
 }
 </style>
diff --git a/shell/components/form/Password.vue b/shell/components/form/Password.vue
index e9e81d75ee2..98b85a76671 100644
--- a/shell/components/form/Password.vue
+++ b/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,17 @@ 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;
+          border-radius: 4px;
+        }
       }
     }
     .genPassword {
diff --git a/shell/pages/auth/login.vue b/shell/pages/auth/login.vue
index f84599246d6..4ccbf85d9e0 100644
--- a/shell/pages/auth/login.vue
+++ b/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>

From fb533acf00b4fdaa84b7a8bcca833a0b8d8e9147 Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Fri, 27 Dec 2024 16:02:39 +0000
Subject: [PATCH 2/9] adjust for dark mode

---
 shell/components/LocaleSelector.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/shell/components/LocaleSelector.vue b/shell/components/LocaleSelector.vue
index 5e45de074e6..8a628a855f3 100644
--- a/shell/components/LocaleSelector.vue
+++ b/shell/components/LocaleSelector.vue
@@ -163,9 +163,11 @@ export default {
   &:hover {
     text-decoration: none;
   }
+}
 
-  &:focus-visible {
-    outline-offset: 2px;
-  }
+.locale-login-container:focus-visible {
+  @include focus-outline;
+  border-radius: 4px;
+  outline-offset: 2px;
 }
 </style>

From c96e33f28e7a78ae137ce46059b3852d00cf5be8 Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Mon, 30 Dec 2024 16:45:12 +0000
Subject: [PATCH 3/9] remove border radius from focus styles + dont open locale
 selector on focus

---
 .../src/components/Form/Checkbox/Checkbox.vue                 | 1 +
 shell/components/LocaleSelector.vue                           | 4 +---
 shell/components/form/Password.vue                            | 1 -
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
index 0f799956cfe..37b63e3ea6a 100644
--- a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
+++ b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
@@ -348,6 +348,7 @@ $fontColor: var(--input-label);
   input:focus-visible ~ .checkbox-custom {
     @include focus-outline;
     outline-offset: 2px;
+    border-radius: 0;
   }
 
   input:checked ~ .checkbox-custom {
diff --git a/shell/components/LocaleSelector.vue b/shell/components/LocaleSelector.vue
index 8a628a855f3..9e08084d709 100644
--- a/shell/components/LocaleSelector.vue
+++ b/shell/components/LocaleSelector.vue
@@ -72,7 +72,6 @@ export default {
         tabindex="0"
         @click="openLocaleSelector"
         @blur.capture="closeLocaleSelector"
-        @focus.capture="openLocaleSelector"
         @keyup.enter="openLocaleSelector"
         @keyup.space="openLocaleSelector"
       >
@@ -86,6 +85,7 @@ export default {
           :autoHide="false"
           :flip="false"
           :container="false"
+          @focus.capture="openLocaleSelector"
         >
           <a
             data-testid="locale-selector"
@@ -154,7 +154,6 @@ export default {
 .hand:focus-visible {
   @include focus-outline;
   outline-offset: 4px;
-  border-radius: 4px;
 }
 
 .locale-chooser {
@@ -167,7 +166,6 @@ export default {
 
 .locale-login-container:focus-visible {
   @include focus-outline;
-  border-radius: 4px;
   outline-offset: 2px;
 }
 </style>
diff --git a/shell/components/form/Password.vue b/shell/components/form/Password.vue
index 98b85a76671..58e96794326 100644
--- a/shell/components/form/Password.vue
+++ b/shell/components/form/Password.vue
@@ -174,7 +174,6 @@ export default {
         .hide-show:focus-visible {
           @include focus-outline;
           outline-offset: 4px;
-          border-radius: 4px;
         }
       }
     }

From 20ff94eea3453280fdee31745303f86f792cb037 Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Mon, 30 Dec 2024 16:49:30 +0000
Subject: [PATCH 4/9] add missing aria label

---
 shell/assets/translations/en-us.yaml | 2 ++
 shell/components/LocaleSelector.vue  | 1 +
 2 files changed, 3 insertions(+)

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index b976eab397d..aace9432e1e 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/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)
diff --git a/shell/components/LocaleSelector.vue b/shell/components/LocaleSelector.vue
index 9e08084d709..c63eb2d2393 100644
--- a/shell/components/LocaleSelector.vue
+++ b/shell/components/LocaleSelector.vue
@@ -68,6 +68,7 @@ export default {
       <div
         v-if="showLocale"
         role="menu"
+        :aria-label="t('locale.ariaLabel.menu')"
         class="locale-login-container"
         tabindex="0"
         @click="openLocaleSelector"

From be053316bda189c5ecdd373f6d1a11184ea99423 Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Thu, 2 Jan 2025 18:45:40 +0000
Subject: [PATCH 5/9] minor fixes based on another PR comment

---
 shell/assets/translations/en-us.yaml | 3 +--
 shell/components/LocaleSelector.vue  | 2 +-
 shell/pages/auth/login.vue           | 5 -----
 3 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index aace9432e1e..da3170feb5b 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -115,8 +115,7 @@ generic:
   basic: Basic
 
 locale:
-  ariaLabel:
-    menu: Locale selector menu
+  menu: Locale selector menu
   en-us: English
   zh-hans: 简体中文
   none: (None)
diff --git a/shell/components/LocaleSelector.vue b/shell/components/LocaleSelector.vue
index c63eb2d2393..69c47e58c66 100644
--- a/shell/components/LocaleSelector.vue
+++ b/shell/components/LocaleSelector.vue
@@ -68,7 +68,7 @@ export default {
       <div
         v-if="showLocale"
         role="menu"
-        :aria-label="t('locale.ariaLabel.menu')"
+        :aria-label="t('locale.menu')"
         class="locale-login-container"
         tabindex="0"
         @click="openLocaleSelector"
diff --git a/shell/pages/auth/login.vue b/shell/pages/auth/login.vue
index 4ccbf85d9e0..f84599246d6 100644
--- a/shell/pages/auth/login.vue
+++ b/shell/pages/auth/login.vue
@@ -439,7 +439,6 @@ export default {
                   data-testid="local-login-username"
                   :label="t('login.username')"
                   autocomplete="username"
-                  :tab-index="0"
                 />
               </div>
               <div class="">
@@ -448,7 +447,6 @@ export default {
                   ref="password"
                   v-model:value="password"
                   data-testid="local-login-password"
-                  :tabbingIndex="1"
                   :label="t('login.password')"
                   autocomplete="password"
                 />
@@ -464,7 +462,6 @@ export default {
                   :waiting-label="t('login.loggingIn')"
                   :success-label="t('login.loggedIn')"
                   :error-label="t('asyncButton.default.error')"
-                  :tab-index="2"
                   @click="loginLocal"
                 />
                 <div
@@ -475,7 +472,6 @@ export default {
                     v-model:value="remember"
                     :label="t('login.remember.label')"
                     type="checkbox"
-                    :tabbingIndex="3"
                   />
                 </div>
               </div>
@@ -513,7 +509,6 @@ export default {
           <LocaleSelector
             :style="localeSelectorStyle"
             mode="login"
-            :tabbingIndex="4"
           />
         </div>
       </div>

From d39442d95c9e56fb9e57000c164b0b9c3386ba4c Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Fri, 3 Jan 2025 17:20:16 +0000
Subject: [PATCH 6/9] remove tabbingindex from components + fix checkbox
 component disabled state

---
 .../src/components/Form/Checkbox/Checkbox.vue   | 17 ++++++++---------
 shell/components/LocaleSelector.vue             |  2 +-
 shell/components/form/Password.vue              |  9 ++-------
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
index 37b63e3ea6a..3abda9ba7c1 100644
--- a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
+++ b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
@@ -235,14 +235,14 @@ export default defineComponent({
         :checked="isChecked"
         :value="valueWhenTrue"
         type="checkbox"
-        :tab-index="tabbingIndex"
+        tabindex="-1"
         :name="id"
         @click.stop.prevent
       >
       <span
         class="checkbox-custom"
         :class="{indeterminate: indeterminate}"
-        :tabindex="-1"
+        :tabindex="isDisabled ? -1 : 0"
         :aria-label="label"
         :aria-checked="!!value"
         role="checkbox"
@@ -333,9 +333,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 {
@@ -345,12 +350,6 @@ $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);
diff --git a/shell/components/LocaleSelector.vue b/shell/components/LocaleSelector.vue
index 69c47e58c66..0553faf1b8a 100644
--- a/shell/components/LocaleSelector.vue
+++ b/shell/components/LocaleSelector.vue
@@ -104,7 +104,7 @@ export default {
                 v-if="showNone"
                 v-t="'locale.none'"
                 class="hand"
-                :tab-index="0"
+                tabindex="0"
                 role="menuitem"
                 @click.stop="switchLocale('none')"
                 @keyup.enter.stop="switchLocale('none')"
diff --git a/shell/components/form/Password.vue b/shell/components/form/Password.vue
index 58e96794326..d9d9e02f31d 100644
--- a/shell/components/form/Password.vue
+++ b/shell/components/form/Password.vue
@@ -41,11 +41,7 @@ export default {
     mode: {
       type:    String,
       default: _CREATE,
-    },
-    tabbingIndex: {
-      type:    Number,
-      default: null,
-    },
+    }
   },
   data() {
     return { reveal: false };
@@ -120,7 +116,6 @@ export default {
       :disabled="isRandom"
       :ignore-password-managers="ignorePasswordManagers"
       :mode="mode"
-      :tab-index="tabbingIndex"
       @blur="$emit('blur', $event)"
     >
       <template #suffix>
@@ -139,7 +134,7 @@ export default {
         >
           <a
             href="#"
-            :tab-index="tabbingIndex"
+            tabindex="0"
             class="hide-show"
             @click.prevent.stop="hideShowFn"
             @keyup.space.prevent.stop="hideShowFn"

From c9e87a4e98dd792a57b0c42653eddf203b7be994 Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Fri, 3 Jan 2025 21:13:55 +0000
Subject: [PATCH 7/9] remove tabbingindex from checkbox

---
 .../src/components/Form/Checkbox/Checkbox.vue          | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
index 3abda9ba7c1..b54db056957 100644
--- a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
+++ b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
@@ -113,15 +113,7 @@ export default defineComponent({
     primary: {
       type:    Boolean,
       default: false
-    },
-
-    /**
-     * Tab index for proper keyboard nav control
-     */
-    tabbingIndex: {
-      type:    Number,
-      default: null
-    },
+    }
   },
 
   emits: ['update:value'],

From 3719229b66f875364101ad5ff08bc869a239e0f0 Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Mon, 6 Jan 2025 09:53:58 +0000
Subject: [PATCH 8/9] remove tabbingindex from LocaleSelector

---
 shell/components/LocaleSelector.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/shell/components/LocaleSelector.vue b/shell/components/LocaleSelector.vue
index 0553faf1b8a..3a310b61eab 100644
--- a/shell/components/LocaleSelector.vue
+++ b/shell/components/LocaleSelector.vue
@@ -11,11 +11,7 @@ export default {
     mode: {
       type:    String,
       default: ''
-    },
-    tabbingIndex: {
-      type:    Number,
-      default: null,
-    },
+    }
   },
 
   data() {

From cac9a05cd980ef1e3c4bf3e01b5d5a48c2aeb94c Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Mon, 6 Jan 2025 16:16:47 +0000
Subject: [PATCH 9/9] address pr comments

---
 shell/components/AsyncButton.vue   | 1 -
 shell/components/form/Password.vue | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/shell/components/AsyncButton.vue b/shell/components/AsyncButton.vue
index 8e7b5f672c9..3abbf570017 100644
--- a/shell/components/AsyncButton.vue
+++ b/shell/components/AsyncButton.vue
@@ -275,7 +275,6 @@ export default defineComponent({
 <template>
   <button
     ref="btn"
-    role="button"
     :class="classes"
     :name="name"
     :type="type"
diff --git a/shell/components/form/Password.vue b/shell/components/form/Password.vue
index d9d9e02f31d..6bd7dabf442 100644
--- a/shell/components/form/Password.vue
+++ b/shell/components/form/Password.vue
@@ -136,6 +136,7 @@ export default {
             href="#"
             tabindex="0"
             class="hide-show"
+            role="button"
             @click.prevent.stop="hideShowFn"
             @keyup.space.prevent.stop="hideShowFn"
           >