feat(ui5-table): Add 'accessibleName' and 'accessibleNameRef' properties (#4994)

* Add accessibleName and accessibleNameRef properties

* Fix version

* Retrigger build

Author: ndeshev

packages/main/src/Table.hbs

@@ -5,7 +5,7 @@
 		{{> busyRow}}
 	{{/if}}
 
-	<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table">
+	<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table" aria-label="{{tableAriaLabelText}}">
 		<thead>
 			<tr
 				id="{{_columnHeader.id}}"

packages/main/src/Table.js

@@ -23,6 +23,7 @@ import {
 import getNormalizedTarget from "@ui5/webcomponents-base/dist/util/getNormalizedTarget.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import { getLastTabbableElement, getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
@@ -252,6 +253,32 @@ const metadata = {
 			defaultValue: TableMode.None,
 		},
 
+		/**
+		 * Defines the accessible aria name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.3.0
+		 */
+		accessibleName: {
+			type: String,
+			defaultValue: undefined,
+		},
+
+		/**
+		 * Receives id(or many ids) of the elements that label the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.3.0
+		 */
+		accessibleNameRef: {
+			type: String,
+			defaultValue: "",
+		},
+
 		_hiddenColumns: {
 			type: Object,
 			multiple: true,
@@ -1117,6 +1144,10 @@ class Table extends UI5Element {
 		return `${headerRowText} ${columnsTitle}`;
 	}
 
+	get tableAriaLabelText() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	get ariaLabelSelectAllText() {
 		return Table.i18nBundle.getText(ARIA_LABEL_SELECT_ALL_CHECKBOX);
 	}

packages/main/test/pages/Table.html

@@ -34,7 +34,7 @@
 		<button id="toggleSticky" class="table3auto">Toggle Sticky Column Header</button>
 	</div>
 
-	<ui5-table class="demo-table" id="tbl">
+	<ui5-table class="demo-table" accessible-name-ref="tableLabel" id="tbl">
 		<!-- Columns -->
 		<ui5-table-column id="column-1" slot="columns" width="350px">
 			<ui5-label>Product</ui5-label>
@@ -133,7 +133,7 @@
 
 	<!-- 1 column, but 3 cells -->
 	<ui5-title>1 column, but 3 cells</ui5-title>
-	<ui5-table class="demo-table" id="tblLessColumns">
+	<ui5-table class="demo-table" id="tblLessColumns" accessible-name="Table label">
 		<ui5-table-column id="column-1" slot="columns">
 			<ui5-label>City</ui5-label>
 		</ui5-table-column>

packages/main/test/specs/Table.spec.js

@@ -79,6 +79,27 @@ describe("Table general interaction", () => {
 			"The aria-label value is correct.");
 	});
 
+	describe("Accessibility", () => {
+		before(async () => {
+			await browser.url(`http://localhost:${PORT}/test-resources/pages/Table.html`);
+		});
+	
+		it("Should apply aria-label from the accessibleName property", async () => {
+			const table = await browser.$("#tblLessColumns");
+			const innerTable = await table.shadow$("table");
+
+			assert.strictEqual(await innerTable.getAttribute("aria-label"), "Table label", "Table aria-label attribute is correct.");
+		});
+
+		it("Should apply aria-label from the accessibleNameRef property", async () => {
+			const table = await browser.$("#tbl");
+			const innerTable = await table.shadow$("table");
+			const tableLabel = await browser.$("#tableLabel");
+
+			assert.strictEqual(await innerTable.getAttribute("aria-label"), await tableLabel.getHTML(false), "Table aria-label attribute is correct.");
+		});
+	});
+
 	describe("Growing Table on 'More' button press", () => {
 		it("tests the 'load-more' event", async () => {
 			await browser.url(`http://localhost:${PORT}/test-resources/pages/TableGrowingWithButton.html`);