fix(ui5-table): accessibility improvements implemented (#12684)

* fix(ui5-table): accessibility improvements implemented

 - The  correct npm package is used for translations
Fixes: #12630

- ariaLabelledByElements is used instead of aria-labelledby
Fixes: #12657

- The sample now uses correct mode property
Fixes: #11946

* fix(ui5-table): accessibility improvements implemented

 - The  correct npm package is used for translations
Fixes: #12630

- ariaLabelledByElements is used instead of aria-labelledby
Fixes: #12657

- The sample now uses correct mode property
Fixes: #11946

Author: aborjinik

packages/main/cypress/specs/TableCustomAnnouncement.cy.tsx

@@ -148,7 +148,15 @@ describe("Cell Custom Announcement - More details", () => {
 		cy.realPress("ArrowRight"); // Row actions cell
 		checkAnnouncement(Table.i18nBundle.getText(MULTIPLE_ACTIONS, 2));
 		cy.focused().should("have.attr", "aria-colindex", "6")
-					.should("have.attr", "role", "gridcell");
+					.should("have.attr", "role", "gridcell")
+					.then($rowActionsCell => {
+						const rowActionsCell = $rowActionsCell[0];
+						const invisibleText = document.getElementById("ui5-table-invisible-text");
+						expect(rowActionsCell.ariaLabelledByElements[0]).to.equal(invisibleText);
+						rowActionsCell.blur();
+						expect(rowActionsCell.ariaLabelledByElements).to.equal(null);
+						rowActionsCell.focus();
+					});
 
 		cy.get("#row1-edit-action").invoke("remove");
 		checkAnnouncement(ONE_ROW_ACTION, true);

packages/main/src/TableCustomAnnouncement.ts

@@ -23,37 +23,32 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 
 let invisibleText: HTMLElement;
-const i18nBundle = new I18nBundle("@ui5/webcomponents/main");
+const i18nBundle = new I18nBundle("@ui5/webcomponents");
 
 const checkVisibility = (element: HTMLElement): boolean => {
 	return element.checkVisibility() || getComputedStyle(element).display === "contents";
 };
 
-const updateInvisibleText = (element: HTMLElement, text: string | string[] = []) => {
-	const invisibleTextId = "ui5-table-invisible-text";
+const updateInvisibleText = (element: any, text: string | string[] = []) => {
 	if (!invisibleText || !invisibleText.isConnected) {
 		invisibleText = document.createElement("span");
-		invisibleText.id = invisibleTextId;
+		invisibleText.id = "ui5-table-invisible-text";
 		invisibleText.ariaHidden = "true";
 		invisibleText.style.display = "none";
 		document.body.appendChild(invisibleText);
 	}
 
-	let ariaLabelledBy = (element.getAttribute("aria-labelledby") || "").split(" ").filter(Boolean);
-	const invisibleTextAssociated = ariaLabelledBy.includes(invisibleTextId);
-
+	const ariaLabelledByElements = [...(element.ariaLabelledByElements || [])];
+	const invisibleTextIndex = ariaLabelledByElements.indexOf(invisibleText);
 	text = Array.isArray(text) ? text.filter(Boolean).join(" . ").trim() : text.trim();
-	if (text && !invisibleTextAssociated) {
-		ariaLabelledBy.push(invisibleTextId);
-	} else if (!text && invisibleTextAssociated) {
-		ariaLabelledBy = ariaLabelledBy.filter(id => id !== invisibleTextId);
-	}
-
 	invisibleText.textContent = text;
-	if (ariaLabelledBy.length > 0) {
-		element.setAttribute("aria-labelledby", ariaLabelledBy.join(" "));
-	} else {
-		element.removeAttribute("aria-labelledby");
+
+	if (text && invisibleTextIndex === -1) {
+		ariaLabelledByElements.unshift(invisibleText);
+		element.ariaLabelledByElements = ariaLabelledByElements;
+	} else if (!text && invisibleTextIndex > -1) {
+		ariaLabelledByElements.splice(invisibleTextIndex, 1);
+		element.ariaLabelledByElements = ariaLabelledByElements.length ? ariaLabelledByElements : null;
 	}
 };
 

packages/website/docs/_samples/main/Table/ScrollToLoad/sample.html

@@ -12,7 +12,7 @@
     <div class="section" style="height: 100px; overflow: auto;">
 <!-- playground-fold-end -->
 		<ui5-table id="table">
-			<ui5-table-growing id="growing" type="Scroll" slot="features"></ui5-table-growing>
+			<ui5-table-growing id="growing" mode="Scroll" slot="features"></ui5-table-growing>
 <!-- playground-fold -->
 			<ui5-table-header-row slot="headerRow">
 				<ui5-table-header-cell id="produtCol"><span>Product</span></ui5-table-header-cell>