diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index 7a3d934f899..e111169be85 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -1029,6 +1029,7 @@ Array [
- Row: 1; Column: 1 + - A, column 1, row 1

- Row: 1; Column: 2 + - B, column 2, row 1

- Row: 2; Column: 1 + - A, column 1, row 2

- Row: 2; Column: 2 + - B, column 2, row 2

- Row: 3; Column: 1 + - A, column 1, row 3

- Row: 3; Column: 2 + - B, column 2, row 3

@@ -1449,6 +1456,7 @@ Array [
- Row: 1; Column: 1 + - leading, column 1, row 1

@@ -1643,6 +1652,7 @@ Array [ />
- Row: 1; Column: 2 + - A, column 2, row 1

- Row: 1; Column: 3 + - B, column 3, row 1

- Row: 1; Column: 4 + - trailing, column 4, row 1

@@ -1755,6 +1767,7 @@ Array [ />
- Row: 2; Column: 1 + - leading, column 1, row 2

@@ -1805,6 +1818,7 @@ Array [ />
- Row: 2; Column: 2 + - A, column 2, row 2

- Row: 2; Column: 3 + - B, column 3, row 2

- Row: 2; Column: 4 + - trailing, column 4, row 2

@@ -1917,6 +1933,7 @@ Array [ />
- Row: 3; Column: 1 + - leading, column 1, row 3

@@ -1967,6 +1984,7 @@ Array [ />
- Row: 3; Column: 2 + - A, column 2, row 3

- Row: 3; Column: 3 + - B, column 3, row 3

- Row: 3; Column: 4 + - trailing, column 4, row 3

@@ -2204,6 +2224,7 @@ Array [
- Row: 1; Column: 1 + - A, column 1, row 1

- Row: 1; Column: 2 + - B, column 2, row 1

- Row: 2; Column: 1 + - A, column 1, row 2

- Row: 2; Column: 2 + - B, column 2, row 2

- Row: 3; Column: 1 + - A, column 1, row 3

- Row: 3; Column: 2 + - B, column 2, row 3

@@ -2623,6 +2650,7 @@ Array [
- Row: 1; Column: 1 + - A, column 1, row 1

- Row: 1; Column: 2 + - B, column 2, row 1

- Row: 2; Column: 1 + - A, column 1, row 2

- Row: 2; Column: 2 + - B, column 2, row 2

- Row: 3; Column: 1 + - A, column 1, row 3

- Row: 3; Column: 2 + - B, column 2, row 3

diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap index 58faeaf9dac..8ca54bf5bae 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap @@ -101,6 +101,7 @@ exports[`EuiDataGridBody renders 1`] = `
- Row: 1; Column: 1 + - columnA, column 1, row 1

- Row: 1; Column: 2 + - columnB, column 2, row 1

diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap index 2dd1c510819..dfa2c0f6161 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap @@ -38,6 +38,7 @@ Array [ exports[`EuiDataGridCell renders 1`] = `
- Row: 1; Column: 1 + - someColumn, column 1, row 1

diff --git a/src/components/datagrid/body/data_grid_body.tsx b/src/components/datagrid/body/data_grid_body.tsx index cefbeb804e9..8928e1c78d8 100644 --- a/src/components/datagrid/body/data_grid_body.tsx +++ b/src/components/datagrid/body/data_grid_body.tsx @@ -68,6 +68,7 @@ export const Cell: FunctionComponent = ({ rowHeightsOptions, rowHeightUtils, rowManager, + pagination, } = data; const popoverContext = useContext(DataGridCellPopoverContext); const { headerRowHeight } = useContext(DataGridWrapperRowsContext); @@ -118,6 +119,7 @@ export const Cell: FunctionComponent = ({ setRowHeight: isFirstColumn ? setRowHeight : undefined, rowManager, popoverContext, + pagination, }; if (isLeadingControlColumn) { @@ -487,6 +489,7 @@ export const EuiDataGridBody: FunctionComponent = ( rowHeightsOptions, rowHeightUtils, rowManager, + pagination, }} rowCount={ IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0 diff --git a/src/components/datagrid/body/data_grid_cell.test.tsx b/src/components/datagrid/body/data_grid_cell.test.tsx index e17973a670d..61420a60898 100644 --- a/src/components/datagrid/body/data_grid_cell.test.tsx +++ b/src/components/datagrid/body/data_grid_cell.test.tsx @@ -48,6 +48,23 @@ describe('EuiDataGridCell', () => { expect(component).toMatchSnapshot(); }); + it("renders the cell's `aria-rowindex` correctly when paginated on a different page", () => { + const component = mount( + {}, + onChangeItemsPerPage: () => {}, + }} + /> + ); + expect( + component.find('[data-test-subj="dataGridRowCell"]').prop('aria-rowindex') + ).toEqual(61); + }); + it('renders cell actions', () => { const component = mount( = memo( ({ @@ -55,6 +56,7 @@ const EuiDataGridCellContent: FunctionComponent< rowHeightsOptions, rowIndex, colIndex, + ariaRowIndex, rowHeightUtils, isDefinedHeight, ...rest @@ -64,12 +66,6 @@ const EuiDataGridCellContent: FunctionComponent< EuiDataGridCellValueElementProps >; - const positionText = useEuiI18n( - 'euiDataGridCell.position', - 'Row: {row}; Column: {col}', - { row: rowIndex + 1, col: colIndex + 1 } - ); - return ( <>
-

{positionText}

+

+ {'- '} + +

); @@ -518,6 +525,7 @@ export class EuiDataGridCell extends Component< rowHeightUtils, rowHeightsOptions, rowManager, + pagination, ...rest } = this.props; const { rowIndex, visibleRowIndex, colIndex } = rest; @@ -539,6 +547,10 @@ export class EuiDataGridCell extends Component< className ); + const ariaRowIndex = pagination + ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex + : visibleRowIndex + 1; + const { isExpandable: _, // Not a valid DOM property, so needs to be destructured out style: cellPropsStyle, @@ -635,6 +647,7 @@ export class EuiDataGridCell extends Component< rowHeightsOptions, rowHeightUtils, isDefinedHeight, + ariaRowIndex, }; const anchorClass = 'euiDataGridRowCell__expandFlex'; @@ -686,6 +699,7 @@ export class EuiDataGridCell extends Component< const content = (
{ ).toMatchInlineSnapshot(` Array [ Object { + "aria-rowindex": 1, "className": "euiDataGridRowCell euiDataGridRowCell--firstColumn customClass", "data-gridcell-column-id": "A", "data-gridcell-column-index": 0, @@ -567,6 +568,7 @@ describe('EuiDataGrid', () => { "tabIndex": -1, }, Object { + "aria-rowindex": 1, "className": "euiDataGridRowCell euiDataGridRowCell--lastColumn customClass", "data-gridcell-column-id": "B", "data-gridcell-column-index": 1, @@ -592,6 +594,7 @@ describe('EuiDataGrid', () => { "tabIndex": -1, }, Object { + "aria-rowindex": 2, "className": "euiDataGridRowCell euiDataGridRowCell--firstColumn customClass", "data-gridcell-column-id": "A", "data-gridcell-column-index": 0, @@ -617,6 +620,7 @@ describe('EuiDataGrid', () => { "tabIndex": -1, }, Object { + "aria-rowindex": 2, "className": "euiDataGridRowCell euiDataGridRowCell--lastColumn customClass", "data-gridcell-column-id": "B", "data-gridcell-column-index": 1, diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 6c105fccee8..b62786d82bd 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -420,6 +420,7 @@ export const EuiDataGrid = forwardRef( data-test-subj="euiDataGridBody" className="euiDataGrid__content" role="grid" + aria-rowcount={rowCount} id={gridId} {...wrappingDivFocusProps} // re: above jsx-a11y - tabIndex is handled by these props, but the linter isn't smart enough to know that {...gridAriaProps} diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index e07d17fac40..9d98ac0f039 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -513,6 +513,7 @@ export interface EuiDataGridCellProps { rowHeightsOptions?: EuiDataGridRowHeightsOptions; rowHeightUtils?: RowHeightUtils; rowManager?: EuiDataGridRowManager; + pagination?: EuiDataGridPaginationProps; } export interface EuiDataGridCellState { diff --git a/upcoming_changelogs/6033.md b/upcoming_changelogs/6033.md new file mode 100644 index 00000000000..d4252b0031d --- /dev/null +++ b/upcoming_changelogs/6033.md @@ -0,0 +1,4 @@ +**Bug fixes** + +- Fixed `EuiDataGrid`'s row count/indices announced to screen readers when virtualized +- Fixed `EuiDataGrid`'s current cell row/column position announced to screen readers when sorted and paginated, and also improved column identification and announcement cadence