fix(ui5-table): announce whether a row is selected or not (#5930)

* fix(ui5-table): announce whether a row is selected or not * fix(ui5-table): eslint error fixed
SAP · Oct 13, 2022 · 4d34fe9 · 4d34fe9
1 parent 082f43c
commit 4d34fe9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/packages/main/src/TableRow.js b/packages/main/src/TableRow.js
@@ -14,7 +14,11 @@ import CheckBox from "./CheckBox.js";
 import TableMode from "./types/TableMode.js";
 import TableRowType from "./types/TableRowType.js";
 import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
-import { ARIA_LABEL_ROW_SELECTION } from "./generated/i18n/i18n-defaults.js";
+import {
+	ARIA_LABEL_ROW_SELECTION,
+	LIST_ITEM_NOT_SELECTED,
+	LIST_ITEM_SELECTED,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/TableRow.css.js";
@@ -384,11 +388,18 @@ class TableRow extends UI5Element {
 	}
 
 	get ariaLabelText() {
+		const isSelected = this.selected ? TableRow.i18nBundle.getText(LIST_ITEM_SELECTED) : TableRow.i18nBundle.getText(LIST_ITEM_NOT_SELECTED);
+		const isRowSelectable = this.isSingleSelect || this.isMultiSelect;
 		const ariaLabel = this.cells.map((cell, index) => {
 			const columText = this.getColumnTextByIdx(index);
 			const cellText = this.getCellText(cell);
 			return `${columText} ${cellText}`;
 		}).join(" ");
+
+		if (isRowSelectable) {
+			return `${ariaLabel}. ${this._ariaPosition}. ${isSelected}`;
+		}
+
 		return `${ariaLabel}. ${this._ariaPosition}`;
 	}
 

diff --git a/packages/main/test/specs/Table.spec.js b/packages/main/test/specs/Table.spec.js
@@ -88,6 +88,23 @@ describe("Table general interaction", () => {
 			"The aria-label value is correct.");
 	});
 
+	it("tests selectable row aria-label value", async () => {
+		await browser.url(`test/pages/TableSelection.html`);
+
+		const row = await browser.$("#firstRowSingleSelect");
+		const rowRoot = await browser.$("#firstRowSingleSelect").shadow$(".ui5-table-row-root");
+
+		let EXPECTED_TEXT = "Product Notebook Basic 15 Supplier Very Best Screens Dimensions 30 x 18 x 3 cm Weight 4.2 KG Price 956 EUR Row Type Active. 2 of 5. Not Selected";
+
+		assert.strictEqual(await rowRoot.getAttribute("aria-label"), EXPECTED_TEXT, "The aria-label value is correct.");
+
+		await row.setProperty("selected", true);
+
+		EXPECTED_TEXT = "Product Notebook Basic 15 Supplier Very Best Screens Dimensions 30 x 18 x 3 cm Weight 4.2 KG Price 956 EUR Row Type Active. 2 of 5. Selected";
+
+		assert.strictEqual(await rowRoot.getAttribute("aria-label"), EXPECTED_TEXT, "The aria-label value is correct.");
+	});
+
 	describe("Accessibility", () => {
 		before(async () => {
 			await browser.url(`test/pages/Table.html`);