From 2f2591a4833e8bb923eef4c83c441dbe3a73a499 Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Thu, 16 Jan 2025 18:06:03 +0000
Subject: [PATCH] fix key nav on charts page in cluster

---
 shell/assets/styles/global/_button.scss      |  5 ++
 shell/assets/styles/vendor/vue-select.scss   |  1 +
 shell/assets/translations/en-us.yaml         |  8 ++-
 shell/components/ButtonGroup.vue             |  2 +
 shell/components/Carousel.vue                | 65 +++++++++++---------
 shell/components/SelectIconGrid.vue          | 13 +++-
 shell/components/form/Select.vue             | 36 +++++++++--
 shell/mixins/vue-select-overrides.js         | 26 +++-----
 shell/pages/c/_cluster/apps/charts/index.vue |  4 ++
 9 files changed, 108 insertions(+), 52 deletions(-)

diff --git a/shell/assets/styles/global/_button.scss b/shell/assets/styles/global/_button.scss
index fd8528a2731..03692e64851 100644
--- a/shell/assets/styles/global/_button.scss
+++ b/shell/assets/styles/global/_button.scss
@@ -185,6 +185,11 @@ fieldset[disabled] .btn {
       z-index: 1;
     }
 
+    &:focus-visible {
+      z-index: 1;
+      @include focus-outline;
+    }
+
     &.active {
       @extend .bg-primary;
     }
diff --git a/shell/assets/styles/vendor/vue-select.scss b/shell/assets/styles/vendor/vue-select.scss
index 4dc95331e7c..c40e5e4766e 100644
--- a/shell/assets/styles/vendor/vue-select.scss
+++ b/shell/assets/styles/vendor/vue-select.scss
@@ -74,6 +74,7 @@
   color: var(--dropdown-text);
   white-space: nowrap;
   z-index: 1000;
+  overflow: auto;
 
   &:hover {
     cursor: pointer;
diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index bc4f0cf6a7b..63abd746dbe 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -931,6 +931,7 @@ catalog:
     experimentalWarning: '{chartName} has been marked as experimental. Use caution when installing this helm chart as it might not function as expected.'
     deprecatedAndExperimentalWarning: '{chartName} has been marked as deprecated and experimental. Use caution when installing this helm chart as it might be removed in the future and might not function as expected.'
   charts:
+    refresh: refresh charts
     all: All
     categories:
       all: All Categories
@@ -950,7 +951,7 @@ catalog:
       all: All Operating Systems
       linux: Linux
       windows: Windows
-    search: Filter
+    search: Filter charts results
     deprecatedChartsFilter:
       label: Show deprecated apps
   install:
@@ -6129,6 +6130,11 @@ validation:
       interval: '"{key}" must be of a format with digits followed by a unit i.e. 1h, 2m, 30s'
   tab: "One or more fields in this tab contain a form validation error"
 
+carousel:
+  previous: Previous
+  next: Next
+  controlItem: Go to slide nº {number}
+
 wizard:
   previous: Previous
   finish: Finish
diff --git a/shell/components/ButtonGroup.vue b/shell/components/ButtonGroup.vue
index 0408c97fc16..f2c86238cfa 100644
--- a/shell/components/ButtonGroup.vue
+++ b/shell/components/ButtonGroup.vue
@@ -82,6 +82,8 @@ export default {
       type="button"
       :class="opt.class"
       :disabled="disabled || opt.disabled"
+      role="button"
+      :aria-label="opt.labelKey ? t(opt.labelKey) : opt.label"
       @click="change(opt.value)"
     >
       <slot
diff --git a/shell/components/Carousel.vue b/shell/components/Carousel.vue
index bf747200a7a..123c0e12170 100644
--- a/shell/components/Carousel.vue
+++ b/shell/components/Carousel.vue
@@ -195,33 +195,51 @@ export default {
         </div>
       </component>
     </div>
-    <div
-      class="controls"
-      :class="{'disable': sliders.length === 1}"
-    >
-      <div
-        v-for="(slide, i) in slider"
-        :key="i"
-        class="control-item"
-        :class="{'active': activeItemId === i}"
-        @click="scrollSlide(i, slider.length)"
-      />
-    </div>
     <div
       ref="prev"
+      role="button"
       class="prev"
+      :aria-label="t('carousel.previous')"
+      :aria-disabled="sliders.length === 1"
       :class="{'disable': sliders.length === 1}"
+      tabindex="0"
       @click="nextPrev('prev')"
+      @keyup.enter.space="nextPrev('prev')"
     >
-      <i class="icon icon-chevron-left icon-4x" />
+      <i
+        class="icon icon-chevron-left icon-4x"
+      />
     </div>
     <div
       ref="next"
+      role="button"
       class="next"
+      :aria-label="t('carousel.next')"
+      :aria-disabled="sliders.length === 1"
       :class="{'disable': sliders.length === 1}"
+      tabindex="0"
       @click="nextPrev('next')"
+      @keyup.enter.space="nextPrev('next')"
+    >
+      <i
+        class="icon icon-chevron-right icon-4x"
+      />
+    </div>
+    <div
+      class="controls"
+      :class="{'disable': sliders.length === 1}"
     >
-      <i class="icon icon-chevron-right icon-4x" />
+      <div
+        v-for="(slide, i) in slider"
+        :key="i"
+        class="control-item"
+        :class="{'active': activeItemId === i}"
+        role="button"
+        tabindex="0"
+        :aria-label="t('carousel.controlItem', { number: i+1 })"
+        @click="scrollSlide(i, slider.length)"
+        @keyup.enter.space="scrollSlide(i, slider.length)"
+      />
     </div>
   </div>
 </template>
@@ -240,20 +258,6 @@ export default {
   &.disable::after {
     display: none;
   }
-
-  &.disable:hover {
-    .prev,
-    .next {
-      display: none;
-    }
-  }
-
-  &:hover {
-    .prev,
-    .next {
-      display: block;
-    }
-  }
 }
 
 .slide-track {
@@ -367,13 +371,16 @@ export default {
   position: absolute;
   z-index: 20;
   top: 90px;
-  display: none;
   cursor: pointer;
 
   &.disabled .icon {
     color: var(--disabled-bg);
     cursor: not-allowed;
   }
+
+  .icon:focus-visible {
+    @include focus-outline;
+  }
 }
 
 .next {
diff --git a/shell/components/SelectIconGrid.vue b/shell/components/SelectIconGrid.vue
index ce270669932..85f15496507 100644
--- a/shell/components/SelectIconGrid.vue
+++ b/shell/components/SelectIconGrid.vue
@@ -104,6 +104,10 @@ export default {
       :is="asLink ? 'a' : 'div'"
       v-for="(r, idx) in rows"
       :key="get(r, keyField)"
+      :role="asLink ? 'link' : null"
+      :aria-disabled="asLink && get(r, disabledField) === true ? true : null"
+      :aria-label="get(r, nameField)"
+      :tabindex="get(r, disabledField) === true ? -1 : 0"
       :href="asLink ? get(r, linkField) : null"
       :target="get(r, targetField)"
       :rel="rel"
@@ -111,9 +115,12 @@ export default {
       :data-testid="componentTestid + '-' + get(r, nameField)"
       :class="{
         'has-description': !!get(r, descriptionField),
-        'has-side-label': !!get(r, sideLabelField), [colorFor(r, idx)]: true, disabled: get(r, disabledField) === true
+        'has-side-label': !!get(r, sideLabelField),
+        [colorFor(r, idx)]: true,
+        disabled: get(r, disabledField) === true
       }"
       @click="select(r, idx)"
+      @keyup.enter.space="select(r, idx)"
     >
       <div
         class="side-label"
@@ -212,6 +219,10 @@ export default {
       text-decoration: none !important;
       color: $color;
 
+      &:focus-visible {
+        @include focus-outline;
+      }
+
       &:hover:not(.disabled) {
         box-shadow: 0 0 30px var(--shadow);
         transition: box-shadow 0.1s ease-in-out;
diff --git a/shell/components/form/Select.vue b/shell/components/form/Select.vue
index 2f0d3734db0..dd574a6d57e 100644
--- a/shell/components/form/Select.vue
+++ b/shell/components/form/Select.vue
@@ -114,11 +114,24 @@ export default {
       calculatePosition(dropdownList, component, width, this.placement);
     },
 
-    focus() {
-      this.focusSearch();
-    },
-
     focusSearch() {
+      // we need this override as in a "closeOnSelect" type of component
+      // if we don't have this override, it would open again
+      if (this.overridesMixinPreventDoubleTriggerKeysOpen) {
+        this.$nextTick(() => {
+          const el = this.$refs['select'];
+
+          if ( el ) {
+            el.focus();
+          }
+
+          this.overridesMixinPreventDoubleTriggerKeysOpen = false;
+        });
+
+        return;
+      }
+      this.$refs['select-input'].open = true;
+
       this.$nextTick(() => {
         const el = this.$refs['select-input']?.searchEl;
 
@@ -176,6 +189,11 @@ export default {
     },
     report(e) {
       alert(e);
+    },
+    handleDropdownOpen(args) {
+      // function that prevents the "opening dropdown on focus"
+      // default behaviour of v-select
+      return args.noDrop || args.disabled ? false : args.open;
     }
   },
   computed: {
@@ -236,7 +254,9 @@ export default {
       'compact-input': compact,
       [$attrs.class]: $attrs.class
     }"
-    @focus="focusSearch"
+    :tabindex="disabled ? -1 : 0"
+    @click="focusSearch"
+    @keyup.enter.space.down="focusSearch"
   >
     <v-select
       ref="select-input"
@@ -258,6 +278,8 @@ export default {
       :searchable="isSearchable"
       :selectable="selectable"
       :modelValue="value != null ? value : ''"
+      :dropdownShouldOpen="handleDropdownOpen"
+      :tabindex="-1"
 
       @update:modelValue="$emit('update:value', $event)"
       @search:blur="onBlur"
@@ -300,6 +322,10 @@ export default {
   .unlabeled-select {
     position: relative;
 
+    &:focus-visible {
+      @include focus-outline;
+    }
+
     :deep() .v-select.select-input-view {
       .vs__actions {
         visibility: hidden;
diff --git a/shell/mixins/vue-select-overrides.js b/shell/mixins/vue-select-overrides.js
index e8e3e3bce5c..a4721a6ceba 100644
--- a/shell/mixins/vue-select-overrides.js
+++ b/shell/mixins/vue-select-overrides.js
@@ -1,5 +1,8 @@
 
 export default {
+  data() {
+    return { overridesMixinPreventDoubleTriggerKeysOpen: false };
+  },
   methods: {
     mappedKeys(map, vm) {
       // Defaults found at - https://github.com/sagalbot/vue-select/blob/master/src/components/Select.vue#L947
@@ -13,31 +16,19 @@ export default {
         }
 
         e.preventDefault();
-
-        const optsLen = vm.filteredOptions.length;
-        const typeAheadPointer = vm.typeAheadPointer;
-
-        if (e.shiftKey) {
-          if (typeAheadPointer === 0) {
-            return vm.onEscape();
-          }
-
-          return vm.typeAheadUp();
-        }
-        if (typeAheadPointer + 1 === optsLen) {
-          return vm.onEscape();
-        }
-
-        return vm.typeAheadDown();
       });
 
+      // escape
       (out[27] = (e) => {
         vm.open = false;
         vm.search = '';
 
+        this.$refs.select.focus();
+
         return false;
       });
 
+      // enter
       (out[13] = (e, opt) => {
         if (!vm.open) {
           vm.open = true;
@@ -60,6 +51,9 @@ export default {
           vm.$emit('option:selected', option);
 
           if (vm.closeOnSelect) {
+            // this ties in to the Select component implementation
+            // so that the enter key handler doesn't open the dropdown again
+            this.overridesMixinPreventDoubleTriggerKeysOpen = true;
             vm.open = false;
             vm.typeAheadPointer = -1;
           }
diff --git a/shell/pages/c/_cluster/apps/charts/index.vue b/shell/pages/c/_cluster/apps/charts/index.vue
index 528a591cf3e..af5722521c2 100644
--- a/shell/pages/c/_cluster/apps/charts/index.vue
+++ b/shell/pages/c/_cluster/apps/charts/index.vue
@@ -455,6 +455,8 @@ export default {
           class="input-sm"
           :placeholder="t('catalog.charts.search')"
           data-testid="charts-filter-input"
+          :aria-label="t('catalog.charts.search')"
+          role="textbox"
         >
 
         <button
@@ -463,6 +465,8 @@ export default {
           @shortkey="focusSearch()"
         />
         <AsyncButton
+          role="button"
+          :aria-label="t('catalog.charts.refresh')"
           class="refresh-btn"
           mode="refresh"
           size="sm"