small sortable table a11y fixes (rancher#13448)

aalves08 · web-flow · commit d669a7cc2a3f · 2025-02-21T08:52:51.000Z
* adds small fixes to sortable table a11y

* make screen readers ignore the icons to get sorting indication as its present in th element

* address pr comments

* address pr comments
diff --git a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
@@ -3,6 +3,7 @@ import { PropType, defineComponent } from 'vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { addObject, removeObject } from '@shell/utils/array';
 import cloneDeep from 'lodash/cloneDeep';
+import { generateRandomAlphaString } from '@shell/utils/string';
 
 export default defineComponent({
   name: 'Checkbox',
@@ -37,7 +38,7 @@ export default defineComponent({
      */
     id: {
       type:    String,
-      default: String(Math.random() * 1000)
+      default: generateRandomAlphaString(12)
     },
 
     /**
@@ -113,7 +114,16 @@ export default defineComponent({
     primary: {
       type:    Boolean,
       default: false
-    }
+    },
+
+    /**
+     * Use this for usage of checkboxes that don't present a label.
+     * Used for cases such as table checkboxes (group or row)
+     */
+    alternateLabel: {
+      type:    String,
+      default: undefined
+    },
   },
 
   emits: ['update:value'],
@@ -143,6 +153,18 @@ export default defineComponent({
     hasTooltip(): boolean {
       return !!this.tooltip || !!this.tooltipKey;
     },
+
+    replacementLabel(): string | undefined {
+      if (!this.label && !this.labelKey && this.alternateLabel) {
+        return this.alternateLabel;
+      }
+
+      return undefined;
+    },
+
+    idForLabel():string {
+      return `${ this.id }-label`;
+    }
   },
 
   methods: {
@@ -228,26 +250,26 @@ export default defineComponent({
     <label
       class="checkbox-container"
       :class="{ 'disabled': isDisabled}"
-      :for="id"
       @keydown.enter.prevent="clicked($event)"
       @keydown.space.prevent="clicked($event)"
       @click="clicked($event)"
     >
       <input
+        :id="id"
         :checked="isChecked"
         :value="valueWhenTrue"
         type="checkbox"
         tabindex="-1"
-        :name="id"
         @click.stop.prevent
         @keyup.enter.stop.prevent
       >
       <span
         class="checkbox-custom"
         :class="{indeterminate: indeterminate}"
         :tabindex="isDisabled ? -1 : 0"
-        :aria-label="label"
+        :aria-label="replacementLabel"
         :aria-checked="!!value"
+        :aria-labelledby="labelKey || label ? idForLabel : undefined"
         role="checkbox"
       />
       <span
@@ -258,10 +280,14 @@ export default defineComponent({
         <slot name="label">
           <t
             v-if="labelKey"
+            :id="idForLabel"
             :k="labelKey"
             :raw="true"
           />
-          <template v-else-if="label">{{ label }}</template>
+          <span
+            v-else-if="label"
+            :id="idForLabel"
+          >{{ label }}</span>
           <i
             v-if="tooltipKey"
             v-clean-tooltip="{content: t(tooltipKey), triggers: ['hover', 'touch', 'focus']}"
diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
@@ -5401,6 +5401,8 @@ setup:
   welcome: Welcome to {vendor}!
 
 sortableTable:
+  genericGroupCheckbox: Table group selection checkbox
+  genericRowCheckbox: Table row selection checkbox for item {item}
   tableActionsLabel: More actions - { resource }
   tableActionsImgAlt: More actions icon
   bulkActions:
diff --git a/shell/components/SortableTable/THead.vue b/shell/components/SortableTable/THead.vue
@@ -230,6 +230,7 @@ export default {
           data-testid="sortable-table_check_select_all"
           :indeterminate="isIndeterminate"
           :disabled="noRows || noResults"
+          :alternate-label="t('sortableTable.genericGroupCheckbox')"
         />
       </th>
       <th
@@ -269,6 +270,7 @@ export default {
           <div
             v-if="col.sort"
             class="sort"
+            aria-hidden="true"
           >
             <i
               v-show="hasAdvancedFiltering && !col.isFilter"
diff --git a/shell/components/SortableTable/index.vue b/shell/components/SortableTable/index.vue
@@ -1385,6 +1385,7 @@ export default {
                     :data-node-id="row.key"
                     :data-testid="componentTestid + '-' + i + '-checkbox'"
                     :value="selectedRows.includes(row.row)"
+                    :alternate-label="t('sortableTable.genericRowCheckbox', { item: row && row.row ? row.row.id : '' })"
                   />
                 </td>
                 <td
