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