diff --git a/changelogs/upcoming/7672.md b/changelogs/upcoming/7672.md new file mode 100644 index 00000000000..2e4d197f73c --- /dev/null +++ b/changelogs/upcoming/7672.md @@ -0,0 +1,3 @@ +**Accessibility** + +- Improved `EuiBasicTable` and `EuiInMemoryTable`'s selection checkboxes to have unique aria-labels per row 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" >
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 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 extends Component< const [checkboxCell, isDisabled] = this.renderItemSelectionCell( itemId, item, - selected + selected, + displayedRowIndex ); cells.push(checkboxCell); rowSelectionDisabled = !!isDisabled; @@ -1075,7 +1076,12 @@ export class EuiBasicTable extends Component< ); } - renderItemSelectionCell(itemId: ItemId, item: T, selected: boolean) { + renderItemSelectionCell( + itemId: ItemId, + 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 extends Component< }; return [ - + {(selectThisRow: string) => (