From 42f55a5adf99f351333a91565974c22f7b6f85b2 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Thu, 11 Apr 2024 12:54:59 +0300
Subject: [PATCH 1/3] [EuiTable][a11y] select row Checkbox elements must have
 correct labels

Closes: https://github.com/elastic/eui/issues/7542
---
 i18ntokens.json                               | 20 +++++++++----------
 .../__snapshots__/basic_table.test.tsx.snap   | 12 +++++------
 src/components/basic_table/basic_table.tsx    | 20 ++++++++++++++-----
 3 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/i18ntokens.json b/i18ntokens.json
index b7f7fe182c6..bf47576d721 100644
--- a/i18ntokens.json
+++ b/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"
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
index 3fa583c6f2a..741253a831f 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
+++ b/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
diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx
index 5199cfa33ca..7281462a5c5 100644
--- a/src/components/basic_table/basic_table.tsx
+++ b/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`}

From d018ebf39d350291b463ef5499c3dca3835926e4 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Thu, 11 Apr 2024 14:21:42 +0300
Subject: [PATCH 2/3] Add changelog

---
 changelogs/upcoming/7672.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 changelogs/upcoming/7672.md

diff --git a/changelogs/upcoming/7672.md b/changelogs/upcoming/7672.md
new file mode 100644
index 00000000000..4a8f1948bd0
--- /dev/null
+++ b/changelogs/upcoming/7672.md
@@ -0,0 +1,3 @@
+Bug fixes
+
+Fixed `[EuiTable][a11y]`: Checkbox elements in select row must have correct labels

From 099f0ad4802974e13a110ae45051df9652b37501 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Fri, 12 Apr 2024 09:53:38 -0700
Subject: [PATCH 3/3] changelog copy

---
 changelogs/upcoming/7672.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/changelogs/upcoming/7672.md b/changelogs/upcoming/7672.md
index 4a8f1948bd0..2e4d197f73c 100644
--- a/changelogs/upcoming/7672.md
+++ b/changelogs/upcoming/7672.md
@@ -1,3 +1,3 @@
-Bug fixes
+**Accessibility**
 
-Fixed `[EuiTable][a11y]`: Checkbox elements in select row must have correct labels
+- Improved `EuiBasicTable` and `EuiInMemoryTable`'s selection checkboxes to have unique aria-labels per row