[EuiTable][a11y] select row Checkbox elements must have correct labels (

#7672)

Co-authored-by: Cee Chen <[email protected]>

changelogs/upcoming/7672.md

@@ -0,0 +1,3 @@
+**Accessibility**
+
+- Improved `EuiBasicTable` and `EuiInMemoryTable`'s selection checkboxes to have unique aria-labels per row

i18ntokens.json

@@ -127,18 +127,18 @@
   },
   {
     "token": "euiBasicTable.selectThisRow",
-    "defString": "Select this row",
+    "defString": "Select row {index}",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1103,
+        "line": 1109,
         "column": 8,
-        "index": 30673
+        "index": 30781
       },
       "end": {
-        "line": 1103,
-        "column": 79,
-        "index": 30744
+        "line": 1113,
+        "column": 9,
+        "index": 30936
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -149,14 +149,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1329,
+        "line": 1339,
         "column": 8,
-        "index": 37489
+        "index": 37663
       },
       "end": {
-        "line": 1333,
+        "line": 1343,
         "column": 9,
-        "index": 37648
+        "index": 37822
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"

src/components/basic_table/__snapshots__/basic_table.test.tsx.snap

@@ -271,11 +271,11 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
               class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
             >
               <input
-                aria-label="Select this row"
+                aria-label="Select row 1"
                 class="euiCheckbox__input"
                 data-test-subj="checkboxSelectRow-1"
                 id="__table_generated-id_selection_column_1-checkbox"
-                title="Select this row"
+                title="Select row 1"
                 type="checkbox"
               />
               <div
@@ -377,11 +377,11 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
               class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
             >
               <input
-                aria-label="Select this row"
+                aria-label="Select row 2"
                 class="euiCheckbox__input"
                 data-test-subj="checkboxSelectRow-2"
                 id="__table_generated-id_selection_column_2-checkbox"
-                title="Select this row"
+                title="Select row 2"
                 type="checkbox"
               />
               <div
@@ -483,11 +483,11 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
               class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
             >
               <input
-                aria-label="Select this row"
+                aria-label="Select row 3"
                 class="euiCheckbox__input"
                 data-test-subj="checkboxSelectRow-3"
                 id="__table_generated-id_selection_column_3-checkbox"
-                title="Select this row"
+                title="Select row 3"
                 type="checkbox"
               />
               <div

src/components/basic_table/basic_table.tsx

@@ -904,7 +904,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
           hasPagination(this.props) && this.pageSize > 0
             ? this.props.pagination.pageIndex * this.pageSize + index
             : index;
-        return this.renderItemRow(item, tableItemIndex);
+        return this.renderItemRow(item, tableItemIndex, index);
       });
     }
 
@@ -950,7 +950,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
     );
   }
 
-  renderItemRow(item: T, rowIndex: number) {
+  renderItemRow(item: T, rowIndex: number, displayedRowIndex: number) {
     const { columns, selection, rowHeader, itemIdToExpandedRowMap } =
       this.props;
 
@@ -974,7 +974,8 @@ export class EuiBasicTable<T extends object = any> extends Component<
       const [checkboxCell, isDisabled] = this.renderItemSelectionCell(
         itemId,
         item,
-        selected
+        selected,
+        displayedRowIndex
       );
       cells.push(checkboxCell);
       rowSelectionDisabled = !!isDisabled;
@@ -1075,7 +1076,12 @@ export class EuiBasicTable<T extends object = any> extends Component<
     );
   }
 
-  renderItemSelectionCell(itemId: ItemId<T>, item: T, selected: boolean) {
+  renderItemSelectionCell(
+    itemId: ItemId<T>,
+    item: T,
+    selected: boolean,
+    displayedRowIndex: number
+  ) {
     const { selection } = this.props;
     const key = `_selection_column_${itemId}`;
     const checked = selected;
@@ -1100,7 +1106,11 @@ export class EuiBasicTable<T extends object = any> extends Component<
     };
     return [
       <EuiTableRowCellCheckbox key={key}>
-        <EuiI18n token="euiBasicTable.selectThisRow" default="Select this row">
+        <EuiI18n
+          token="euiBasicTable.selectThisRow"
+          default="Select row {index}"
+          values={{ index: displayedRowIndex + 1 }}
+        >
           {(selectThisRow: string) => (
             <EuiCheckbox
               id={`${this.tableId}${key}-checkbox`}