From 3b0418f9f3022e35083a964a23220f211a490698 Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Fri, 24 Jan 2025 12:54:55 +0000
Subject: [PATCH] fix key nav on charts page (#13139)

* fix key nav on charts page in cluster

* minor fixes to Select
---
 shell/assets/styles/base/_basic.scss         |  6 ++
 shell/assets/styles/vendor/vue-select.scss   |  1 +
 shell/assets/translations/en-us.yaml         |  8 ++-
 shell/components/Carousel.vue                | 65 +++++++++++---------
 shell/components/SelectIconGrid.vue          | 13 +++-
 shell/pages/c/_cluster/apps/charts/index.vue |  4 ++
 6 files changed, 66 insertions(+), 31 deletions(-)

diff --git a/shell/assets/styles/base/_basic.scss b/shell/assets/styles/base/_basic.scss
index c00e91df353..24f75d32d93 100644
--- a/shell/assets/styles/base/_basic.scss
+++ b/shell/assets/styles/base/_basic.scss
@@ -83,6 +83,12 @@ TEXTAREA,
   }
 }
 
+.unlabeled-select {
+  &:focus-visible, &.focused {
+    @include focus-outline;
+  }
+}
+
 BUTTON,
 .btn {
    &:focus, &.focused {
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 b9d0bfa1b1f..67cb55ad264 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -934,6 +934,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
@@ -953,7 +954,7 @@ catalog:
       all: All Operating Systems
       linux: Linux
       windows: Windows
-    search: Filter
+    search: Filter charts results
     deprecatedChartsFilter:
       label: Show deprecated apps
   install:
@@ -6136,6 +6137,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/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/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"