fix(ui5-table): aria relevant attributes are set (#12013)

aborjinik · web-flow · commit 1695eee972c6 · 2025-07-28T16:33:11.000+02:00
- aria-rowcount/colcount/rowindex/colindex attributes are set - aria-hidden is set for the the growing row and navigated cell - aria-multiselectable custom announcement is added - custom announcement for the header row selection cell Fixes: #11639
diff --git a/packages/main/cypress/specs/Table.cy.tsx b/packages/main/cypress/specs/Table.cy.tsx
@@ -41,6 +41,15 @@ describe("Table - Rendering", () => {
 		cy.get("ui5-table-row").should("exist");
 		cy.get("ui5-table-header-cell").should("have.length", 2);
 		cy.get("ui5-table-header-row").should("have.attr", "aria-roledescription", "Column Header Row");
+		cy.get("ui5-table-header-row").should("have.attr", "aria-rowindex", "1");
+		cy.get("ui5-table-row").should("have.attr", "aria-rowindex", "2");
+		cy.get("ui5-table-header-cell").first().should("have.attr", "aria-colindex", "1");
+		cy.get("ui5-table-header-cell").last().should("have.attr", "aria-colindex", "2");
+
+		cy.get("#table").shadow().find("#table").as("innerTable");
+		cy.get("@innerTable").should("have.attr", "role", "grid");
+		cy.get("@innerTable").should("have.attr", "aria-colcount", "2");
+		cy.get("@innerTable").should("have.attr", "aria-rowcount", "2");
 	});
 
 	it("tests if initial empty table renders without errors", () => {
@@ -788,7 +797,9 @@ describe("Table - Horizontal Scrolling", () => {
 			.shadow()
 			.find("#navigated-cell")
 			.should("have.css", "position", "sticky")
-			.should("have.css", "right", "0px");
+			.should("have.css", "right", "0px")
+			.should("have.attr", "aria-hidden", "true")
+			.should("have.attr", "data-excluded-from-navigation");
 	});
 
 	it("selection column should be fixed to the left", () => {
diff --git a/packages/main/cypress/specs/TableGrowing.cy.tsx b/packages/main/cypress/specs/TableGrowing.cy.tsx
@@ -51,7 +51,8 @@ describe("TableGrowing - Button", () => {
 			cy.get("[ui5-table")
 				.shadow()
 				.find("#growing-row")
-				.should("exist");
+				.should("exist")
+				.should("have.attr", "aria-hidden", "true");
 
 			cy.get("[ui5-table-growing]")
 				.shadow()
diff --git a/packages/main/cypress/specs/TableRowActions.cy.tsx b/packages/main/cypress/specs/TableRowActions.cy.tsx
@@ -37,6 +37,7 @@ describe("TableRowActions", () => {
 		cy.get("@table").then($table => {
 			$table[0].addEventListener("row-action-click", cy.stub().as("rowActionClick"));
 		});
+		cy.get("@innerTable").should("have.attr", "aria-colcount", "1");
 	}
 
 	function checkTemplateColumn(expectedWidth: string) {
diff --git a/packages/main/cypress/specs/TableSelections.cy.tsx b/packages/main/cypress/specs/TableSelections.cy.tsx
@@ -83,6 +83,7 @@ const testConfig = {
 			"mode": "Single",
 		},
 		"cases": {
+			"ARIA_DESCRIPTION": "Single Selection Table",
 			"BOXES": {
 				"header": {
 					"exists": true,
@@ -128,6 +129,7 @@ const testConfig = {
 			"mode": "Multiple",
 		},
 		"cases": {
+			"ARIA_DESCRIPTION": "Multi Selection Table",
 			"BOXES": {
 				"header": {
 					"exists": true,
@@ -203,10 +205,18 @@ Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
 			cy.get("@selection").then($selection => {
 				$selection.get(0)?.addEventListener("change", cy.stub().as("selectionChangeSpy"));
 			});
+			cy.get("#table0").shadow().find("#table").as("innerTable");
+			cy.get("@innerTable").should("have.attr", "aria-colcount", "5");
+		});
+
+		it("sets the correct aria-description", () => {
+			cy.get("@innerTable").should("have.attr", "aria-description", testConfigEntry.cases.ARIA_DESCRIPTION);
 		});
 
 		it("Correct boxes are shown", () => {
 			cy.get("@headerRow").shadow().find("#selection-cell")
+				.should("have.attr", "aria-colindex", "1")
+				.should("have.attr", "aria-label", "Selection")
 				.should(testConfigEntry.cases.BOXES.header.exists ? "exist" : "not.exist");
 			cy.get("@row0").shadow().find("#selection-cell")
 				.should(testConfigEntry.cases.BOXES.row.exists ? "exist" : "not.exist");
@@ -314,6 +324,7 @@ Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
 			cy.get("#selection").invoke("attr", "behavior", "RowWÓnly");
 			cy.get("#table0").invoke("on", "row-click", cy.stub().as("rowClickSpy"));
 			cy.get("#selection").invoke("on", "change", cy.stub().as("selectionChangeSpy"));
+			cy.get("#table0").shadow().find("#table").should("have.attr", "aria-colcount", "4");
         });
 
 		it("renders neither selection cell nor selection component", () => {
@@ -366,6 +377,7 @@ describe("TableSelectionMulti", () => {
 	});
 
 	it("updates the header row checkbox when rows are added or removed", () => {
+		cy.get("@headerRowSelectionCell").should("have.attr", "aria-description", "Contains Select All Checkbox . Checked");
 		cy.get("@headerRowSelectionCell").children().first().as("headerRowCheckBox");
 		cy.get("@headerRowCheckBox").should("have.attr", "checked");
 		cy.get("@headerRowCheckBox").should("have.attr", "title", "Deselect All Rows");
@@ -377,9 +389,11 @@ describe("TableSelectionMulti", () => {
 				</ui5-table-row>`
 			);
 		});
+		cy.get("@headerRowSelectionCell").should("have.attr", "aria-description", "Contains Select All Checkbox . Not Checked");
 		cy.get("@headerRowCheckBox").should("not.have.attr", "checked");
 		cy.get("@headerRowCheckBox").should("have.attr", "title", "Select All Rows");
 		cy.get("#row3").invoke("remove");
+		cy.get("@headerRowSelectionCell").should("have.attr", "aria-description", "Contains Select All Checkbox . Checked");
 		cy.get("@headerRowCheckBox").should("have.attr", "checked");
 		cy.get("@headerRowCheckBox").should("have.attr", "title", "Deselect All Rows");
 		cy.get("#row2").invoke("remove");
@@ -389,13 +403,14 @@ describe("TableSelectionMulti", () => {
 	});
 
 	it("should handle header-selector=ClearAll", () => {
-		cy.get("#headerRow").shadow().find("#selection-cell").children().first().as("headerRowIcon");
+		cy.get("@headerRowSelectionCell").children().first().as("headerRowIcon");
 		function checkClearAll(hasSelection: boolean) {
 			cy.get("@headerRowIcon").should("have.attr", "name", "clear-all");
 			cy.get("@headerRowIcon").should("have.attr", "mode", "Decorative");
 			cy.get("@headerRowIcon").should("have.attr", "show-tooltip");
 			cy.get("@headerRowIcon").should("have.attr", "accessible-name", "Deselect All Rows");
 			cy.get("@headerRowIcon").should("have.attr", "design", hasSelection ? "Default" : "NonInteractive");
+			cy.get("@headerRowSelectionCell").should("have.attr", "aria-description", hasSelection ? "Contains Clear All Button" : "Contains Clear All Button . Disabled");
 		}
 
 		cy.get("#selection").invoke("attr", "header-selector", "ClearAll");
diff --git a/packages/main/cypress/specs/TableVirtualizer.cy.tsx b/packages/main/cypress/specs/TableVirtualizer.cy.tsx
@@ -51,7 +51,7 @@ describe("TableVirtualizer", () => {
 			cy.get("[ui5-table-row]")
 				.eq(i - start)
 				.should("have.attr", "position", `${i}`)
-				.should("have.attr", "aria-rowindex", `${i + 1}`)
+				.should("have.attr", "aria-rowindex", `${i + 2}`)
 				.find("ui5-table-cell")
 				.should("have.text", `${i}`);
 		}
diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts
@@ -662,8 +662,28 @@ class Table extends UI5Element {
 		return getEffectiveAriaLabelText(this) || undefined;
 	}
 
+	get _ariaDescription() {
+		return this._getSelection()?.getAriaDescriptionForTable();
+	}
+
 	get _ariaRowCount() {
-		return this._getVirtualizer()?.rowCount || undefined;
+		return this._getVirtualizer()?.rowCount || this.rows.length + 1;
+	}
+
+	get _ariaColCount() {
+		if (!this.headerRow[0]) {
+			return 0;
+		}
+
+		let ariaColCount = this.headerRow[0]._visibleCells.length;
+		if (this._isRowSelectorRequired) {
+			ariaColCount++;
+		}
+		if (this.rowActionCount > 0) {
+			ariaColCount++;
+		}
+
+		return ariaColCount;
 	}
 
 	get _ariaMultiSelectable() {
diff --git a/packages/main/src/TableHeaderRow.ts b/packages/main/src/TableHeaderRow.ts
@@ -77,7 +77,8 @@ class TableHeaderRow extends TableRowBase {
 
 	onEnterDOM(): void {
 		super.onEnterDOM();
-		this.setAttribute("aria-roledescription", TableRowBase.i18nBundle.getText(TABLE_COLUMN_HEADER_ROW));
+		this.ariaRowIndex = "1";
+		this.ariaRoleDescription = TableRowBase.i18nBundle.getText(TABLE_COLUMN_HEADER_ROW);
 	}
 
 	onBeforeRendering() {
@@ -103,6 +104,10 @@ class TableHeaderRow extends TableRowBase {
 		return (this._tableSelection as TableSelectionMulti).headerSelector === "ClearAll";
 	}
 
+	get _selectionCellAriaDescription() {
+		return this._tableSelection?.getAriaDescriptionForColumnHeader();
+	}
+
 	get _i18nSelection() {
 		return TableRowBase.i18nBundle.getText(TABLE_SELECTION);
 	}
diff --git a/packages/main/src/TableHeaderRowTemplate.tsx b/packages/main/src/TableHeaderRowTemplate.tsx
@@ -6,13 +6,15 @@ import ClearAll from "@ui5/webcomponents-icons/dist/clear-all.js";
 import IconDesign from "./types/IconDesign.js";
 import type TableHeaderRow from "./TableHeaderRow.js";
 
-export default function TableHeaderRowTemplate(this: TableHeaderRow) {
+export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColIndex: number = 1) {
 	return (
 		<>
 			{ this._hasSelector &&
 				<TableHeaderCell id="selection-cell"
 					aria-selected={this._isSelected}
 					aria-label={this._i18nSelection}
+					aria-description={this._selectionCellAriaDescription}
+					aria-colindex={ariaColIndex++}
 					data-ui5-table-cell-fixed
 					data-ui5-table-selection-component
 				>
@@ -40,12 +42,14 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow) {
 				</TableHeaderCell>
 			}
 
-			{ this._visibleCells.map(cell => (
-				<slot name={cell._individualSlot} key={cell._individualSlot}></slot>
-			))}
+			{ this._visibleCells.map(cell => {
+				cell.ariaColIndex = `${ariaColIndex++}`;
+				return <slot name={cell._individualSlot} key={cell._individualSlot}></slot>;
+			})}
 
 			{ this._rowActionCount > 0 &&
 				<TableHeaderCell id="actions-cell"
+					aria-colindex={ariaColIndex++}
 					aria-label={this._i18nRowActions}
 				></TableHeaderCell>
 			}
diff --git a/packages/main/src/TableRow.ts b/packages/main/src/TableRow.ts
@@ -77,7 +77,7 @@ class TableRow extends TableRowBase {
 	rowKey?: string;
 
 	/**
-	 * Defines the position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.
+	 * Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.
 	 *
 	 * @default undefined
 	 * @since 2.5.0
@@ -116,10 +116,10 @@ class TableRow extends TableRowBase {
 
 	onBeforeRendering() {
 		super.onBeforeRendering();
-		toggleAttribute(this, "_interactive", this._isInteractive);
-		toggleAttribute(this, "aria-rowindex", this.position !== undefined, `${this.position! + 1}`);
 		toggleAttribute(this, "aria-current", this._renderNavigated && this.navigated, "true");
+		toggleAttribute(this, "_interactive", this._isInteractive);
 		toggleAttribute(this, "draggable", this.movable, "true");
+		this.ariaRowIndex = `${this._rowIndex + 2}`;
 	}
 
 	async focus(focusOptions?: FocusOptions | undefined): Promise<void> {
@@ -168,6 +168,16 @@ class TableRow extends TableRowBase {
 		return this.interactive || (this._isSelectable && !this._hasSelector);
 	}
 
+	get _rowIndex() {
+		if (this.position !== undefined) {
+			return this.position;
+		}
+		if (this._table) {
+			return this._table.rows.indexOf(this);
+		}
+		return -1;
+	}
+
 	get _hasOverflowActions() {
 		let renderedActionsCount = 0;
 		return this.actions.some(action => {
diff --git a/packages/main/src/TableRowTemplate.tsx b/packages/main/src/TableRowTemplate.tsx
@@ -60,7 +60,7 @@ export default function TableRowTemplate(this: TableRow) {
 			}
 
 			{ this._renderNavigated &&
-				<TableCell id="navigated-cell" data-excluded-from-navigation={true}>
+				<TableCell id="navigated-cell" data-excluded-from-navigation aria-hidden={true}>
 					<div id="navigated"></div>
 				</TableCell>
 			}
diff --git a/packages/main/src/TableSelection.ts b/packages/main/src/TableSelection.ts
@@ -135,6 +135,14 @@ class TableSelection extends UI5Element implements ITableFeature {
 		return this.mode !== TableSelectionMode.None;
 	}
 
+	getAriaDescriptionForTable(): string | undefined {
+		return undefined;
+	}
+
+	getAriaDescriptionForColumnHeader(): string | undefined {
+		return undefined;
+	}
+
 	getRowKey(row: TableRow): string {
 		return row.rowKey || "";
 	}
diff --git a/packages/main/src/TableSelectionBase.ts b/packages/main/src/TableSelectionBase.ts
@@ -6,6 +6,10 @@ import type TableRowBase from "./TableRowBase.js";
 import type TableRow from "./TableRow.js";
 import type { ITableFeature } from "./Table.js";
 import TableSelectionBehavior from "./types/TableSelectionBehavior.js";
+import {
+	TABLE_MULTI_SELECTABLE,
+	TABLE_SINGLE_SELECTABLE,
+} from "./generated/i18n/i18n-defaults.js";
 
 /**
  * Fired when selection is changed by user interaction.
@@ -94,6 +98,25 @@ abstract class TableSelectionBase extends UI5Element implements ITableFeature {
 		return this.behavior === TableSelectionBehavior.RowSelector;
 	}
 
+	/**
+	 * Returns the ARIA description of the Table as an alternative to aria-multiselectable.
+	 */
+	getAriaDescriptionForTable(): string | undefined {
+		if (!this._table || !this._table.rows.length) {
+			return undefined;
+		}
+
+		const i18nBundle = (this._table.constructor as typeof Table).i18nBundle;
+		return i18nBundle.getText(this.isMultiSelectable() ? TABLE_MULTI_SELECTABLE : TABLE_SINGLE_SELECTABLE);
+	}
+
+	/**
+	 * Returns the ARIA description of the selection component displayed in the column header.
+	 */
+	getAriaDescriptionForColumnHeader(): string | undefined {
+		return undefined;
+	}
+
 	/**
 	 * Returns the unique key associated with the table row.
 	 *
diff --git a/packages/main/src/TableSelectionMulti.ts b/packages/main/src/TableSelectionMulti.ts
@@ -3,9 +3,17 @@ import TableSelectionBase from "./TableSelectionBase.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import { isSelectionCheckbox, isHeaderSelector, findRowInPath } from "./TableUtils.js";
 import { isUpShift } from "@ui5/webcomponents-base/dist/Keys.js";
+import type Table from "./Table.js";
 import type TableRow from "./TableRow.js";
 import type TableRowBase from "./TableRowBase.js";
 import type TableSelectionMultiHeaderSelector from "./types/TableSelectionMultiHeaderSelector.js";
+import {
+	TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION,
+	TABLE_COLUMNHEADER_SELECTALL_CHECKED,
+	TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED,
+	TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION,
+	TABLE_COLUMNHEADER_CLEARALL_DISABLED,
+} from "./generated/i18n/i18n-defaults.js";
 
 /**
  * @class
@@ -169,6 +177,27 @@ class TableSelectionMulti extends TableSelectionBase {
 		this.selected = [...selectedSet].join(" ");
 	}
 
+	/**
+	 * Returns the ARIA description of the selection component displayed in the column header.
+	 */
+	getAriaDescriptionForColumnHeader(): string | undefined {
+		if (!this._table || !this._table.rows.length || this.behavior === "RowOnly") {
+			return undefined;
+		}
+
+		let description = "";
+		const seperator = " . ";
+		const i18nBundle = (this._table.constructor as typeof Table).i18nBundle;
+		if (this.headerSelector === "SelectAll") {
+			description = i18nBundle.getText(TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION);
+			description += seperator + i18nBundle.getText(this.areAllRowsSelected() ? TABLE_COLUMNHEADER_SELECTALL_CHECKED : TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED);
+		} else {
+			description = i18nBundle.getText(TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION);
+			description += this.getSelectedRows().length === 0 ? seperator + i18nBundle.getText(TABLE_COLUMNHEADER_CLEARALL_DISABLED) : "";
+		}
+		return description;
+	}
+
 	_onkeydown(e: KeyboardEvent) {
 		if (!this._table || !e.shiftKey) {
 			return;
diff --git a/packages/main/src/TableTemplate.tsx b/packages/main/src/TableTemplate.tsx
@@ -12,7 +12,9 @@ export default function TableTemplate(this: Table) {
 			<div id="table" role="grid"
 				style={this.styles.table}
 				aria-label={this._ariaLabel}
+				aria-description={this._ariaDescription}
 				aria-rowcount={this._ariaRowCount}
+				aria-colcount={this._ariaColCount}
 				aria-multiselectable={this._ariaMultiSelectable}
 			>
 				<slot name="headerRow"></slot>
@@ -68,7 +70,7 @@ export default function TableTemplate(this: Table) {
 
 function growingRow(this: Table) {
 	return (
-		<TableRow id="growing-row" ui5-growing-row>
+		<TableRow id="growing-row" ui5-growing-row aria-hidden={true}>
 			<TableCell id="growing-cell">
 				<slot name={this._getGrowing()?._individualSlot}></slot>
 			</TableCell>
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties

Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,7 @@ describe("TableRowActions", () => {`
`37`	`37`	`cy.get("@table").then($table => {`
`38`	`38`	`$table[0].addEventListener("row-action-click", cy.stub().as("rowActionClick"));`
`39`	`39`	`});`
	`40`	`+ cy.get("@innerTable").should("have.attr", "aria-colcount", "1");`
`40`	`41`	`}`
`41`	`42`
`42`	`43`	`function checkTemplateColumn(expectedWidth: string) {`
Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@ describe("TableVirtualizer", () => {`
`51`	`51`	`cy.get("[ui5-table-row]")`
`52`	`52`	`.eq(i - start)`
`53`	`53`	.should("have.attr", "position", `${i}`)
`54`		- .should("have.attr", "aria-rowindex", `${i + 1}`)
	`54`	+ .should("have.attr", "aria-rowindex", `${i + 2}`)
`55`	`55`	`.find("ui5-table-cell")`
`56`	`56`	.should("have.text", `${i}`);
`57`	`57`	`}`
Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,8 @@ class TableHeaderRow extends TableRowBase {`
`77`	`77`
`78`	`78`	`onEnterDOM(): void {`
`79`	`79`	`super.onEnterDOM();`
`80`		`- this.setAttribute("aria-roledescription", TableRowBase.i18nBundle.getText(TABLE_COLUMN_HEADER_ROW));`
	`80`	`+ this.ariaRowIndex = "1";`
	`81`	`+ this.ariaRoleDescription = TableRowBase.i18nBundle.getText(TABLE_COLUMN_HEADER_ROW);`
`81`	`82`	`}`
`82`	`83`
`83`	`84`	`onBeforeRendering() {`
`@@ -103,6 +104,10 @@ class TableHeaderRow extends TableRowBase {`
`103`	`104`	`return (this._tableSelection as TableSelectionMulti).headerSelector === "ClearAll";`
`104`	`105`	`}`
`105`	`106`
	`107`	`+ get _selectionCellAriaDescription() {`
	`108`	`+ return this._tableSelection?.getAriaDescriptionForColumnHeader();`
	`109`	`+ }`
	`110`	`+`
`106`	`111`	`get _i18nSelection() {`
`107`	`112`	`return TableRowBase.i18nBundle.getText(TABLE_SELECTION);`
`108`	`113`	`}`
Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@ export default function TableRowTemplate(this: TableRow) {`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`{ this._renderNavigated &&`
`63`		`- <TableCell id="navigated-cell" data-excluded-from-navigation={true}>`
	`63`	`+ <TableCell id="navigated-cell" data-excluded-from-navigation aria-hidden={true}>`
`64`	`64`	`<div id="navigated"></div>`
`65`	`65`	`</TableCell>`
`66`	`66`	`}`