add aria-sort to table column headers + remove space key bindings for…

… links
rancher · Jan 6, 2025 · f7a177e · f7a177e
1 parent 4a514ba
commit f7a177e
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 3 deletions.
diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
@@ -4,6 +4,7 @@
 generic:
   add: Add
   all: All
+  ascending: ascending
   and: ' and '
   back: Back
   cancel: Cancel
@@ -19,6 +20,7 @@ generic:
   customize: Customize
   dashboard: Dashboard
   default: Default
+  descending: descending
   disabled: Disabled
   done: Done
   enabled: Enabled

diff --git a/shell/components/BannerGraphic.vue b/shell/components/BannerGraphic.vue
@@ -57,6 +57,7 @@ export default {
       data-testid="graphic-banner-close"
       tabindex="0"
       :aria-label="t('generic.close')"
+      role="button"
       @click="hide()"
       @keyup.enter="hide()"
       @keyup.space="hide()"

diff --git a/shell/components/CommunityLinks.vue b/shell/components/CommunityLinks.vue
@@ -112,7 +112,6 @@ export default {
           :to="link.value"
           role="link"
           :aria-label="link.label"
-          @keyup.space="$router.push(link.value)"
         >
           {{ link.label }}
         </router-link>
@@ -134,9 +133,9 @@ export default {
           class="link"
           tabindex="0"
           :aria-label="t('footer.wechat.title')"
+          role="link"
           @click="show"
           @keyup.enter="show"
-          @keyup.space="show"
         >
           {{ t('footer.wechat.title') }}
         </a>
@@ -158,6 +157,7 @@ export default {
             class="btn role-primary"
             tabindex="0"
             :aria-label="t('generic.close')"
+            role="button"
             @click="close"
             @keyup.enter="close"
             @keyup.space="close"

diff --git a/shell/components/SortableTable/THead.vue b/shell/components/SortableTable/THead.vue
@@ -162,6 +162,14 @@ export default {
       return col.name === this.sortBy;
     },
 
+    ariaSort(col) {
+      if (this.isCurrent(col)) {
+        return this.descending ? this.t('generic.descending') : this.t('generic.ascending');
+      }
+
+      return this.t('generic.none');
+    },
+
     tableColsOptionsClick(ev) {
       // set menu position
       const menu = document.querySelector('.table-options-container');
@@ -237,6 +245,7 @@ export default {
         :class="{ sortable: col.sort, [col.breakpoint]: !!col.breakpoint}"
         :tabindex="col.sort ? 0 : -1"
         class="sortable-table-head-element"
+        :aria-sort="ariaSort(col)"
         @click.prevent="changeSort($event, col)"
         @keyup.enter="changeSort($event, col)"
         @keyup.space="changeSort($event, col)"

diff --git a/shell/pages/home.vue b/shell/pages/home.vue
@@ -512,7 +512,6 @@ export default defineComponent({
               :aria-label="t('landing.whatsNewLink')"
               @click.stop="showWhatsNew"
               @keyup.stop.enter="showWhatsNew"
-              @keyup.stop.space="showWhatsNew"
             ><span v-clean-html="t('landing.whatsNewLink')" /></a>
           </Banner>
         </div>