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/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>