feat(ui5-list): support aria-label and aria-labelledby (#1899)

Add support for aria-label and aria-labelledby:
- if aria-label or aria-labelledby are set externally, aria-label is set inside the shadowDOM.
- if not, aria-labelledby is set to reference the internal header, when the header-text property is set.
It is now possible to label the list as shown:

FIXES: #1886

Author: ilhan007

packages/main/src/List.hbs

@@ -16,7 +16,13 @@
 
 	<div id="{{_id}}-before" tabindex="0" class="ui5-list-focusarea"></div>
 
-	<ul id="{{_id}}-listUl" class="ui5-list-ul" aria-multiselectable="{{isMultiSelect}}" aria-labelledby="{{ariaLabelledBy}}" role="{{_role}}">
+	<ul id="{{_id}}-listUl"
+		class="ui5-list-ul"
+		role="{{_role}}"
+		aria-label="{{ariaLabelТxt}}"
+		aria-labelledby="{{ariaLabelledBy}}"
+		aria-multiselectable="{{isMultiSelect}}"
+	>
 		<slot></slot>
 
 		{{#if showNoDataText}}

packages/main/src/List.js

@@ -4,6 +4,7 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation
 import { getLastTabbableElement } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import { isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
+import getEffectiveAriaLabelText from "@ui5/webcomponents-base/dist/util/getEffectiveAriaLabelText.js";
 import ListMode from "./types/ListMode.js";
 import ListSeparators from "./types/ListSeparators.js";
 import BusyIndicator from "./BusyIndicator.js";
@@ -163,6 +164,29 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.8
+		 */
+		ariaLabel: {
+			type: String,
+		},
+
+		/**
+		 * Receives id(or many ids) of the elements that label the input
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.8
+		 */
+		ariaLabelledby: {
+			type: String,
+			defaultValue: "",
+		},
+
 		/**
 		 * Used to externally manipulate the role of the list
 		 *
@@ -368,9 +392,17 @@ class List extends UI5Element {
 	}
 
 	get ariaLabelledBy() {
+		if (this.ariaLabelledby || this.ariaLabel) {
+			return undefined;
+		}
+
 		return this.shouldRenderH1 ? this.headerID : undefined;
 	}
 
+	get ariaLabelТxt() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	onBeforeRendering() {
 		this.prepareListItems();
 	}

packages/main/test/pages/List_test_page.html

@@ -131,6 +131,22 @@
 		<ui5-li id="detailListItem" type="Detail">Detail item</ui5-li>
 		<ui5-li >Normal item</ui5-li>
 	</ui5-list>
+	<br/><br/>
+
+	<ui5-list id="listWithInternalHeader" header-text="Test aria">
+		<ui5-li>item</ui5-li>
+		<ui5-li >item</ui5-li>
+	</ui5-list>
+	<br/><br/>
+
+	<ui5-list id="listWithCustomHeader" aria-labelledby="testHeader">
+		<div slot="header" class="header">
+			<h2 id="testHeader">Test aria</h2>
+		</div>
+
+		<ui5-li>item</ui5-li>
+		<ui5-li >item</ui5-li>
+	</ui5-list>
 
 	<script>
 		'use strict';

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

@@ -234,10 +234,33 @@ describe("List Tests", () => {
 	it("detailPress event is fired", () => {
 		const detailCounterResult = $("#detailPressCounter");
 		const firstItem = $("#detailListItem");
-		const detailButton = firstItem.shadow$(".ui5-li-detailbtn")
+		const detailButton = firstItem.shadow$(".ui5-li-detailbtn");
 
 		detailButton.click();
 
 		assert.strictEqual(detailCounterResult.getProperty("innerHTML"), "1", "detailClick event has been fired once");
 	});
+
+	it("tests aria-labelledby", () => {
+		const listWithInternalHeader = $("#listWithInternalHeader");
+		const listWithCustomHeader = $("#listWithCustomHeader");
+		const ulInternalHeader = listWithInternalHeader.shadow$(".ui5-list-ul");
+		const ulCustomHeader = listWithCustomHeader.shadow$(".ui5-list-ul");
+		
+		// assert: List with internal header
+		const listWithInternalHeaderId = listWithInternalHeader.getProperty("_id");
+		assert.strictEqual(ulInternalHeader.getAttribute("aria-label"),
+			null, "aria-label is not present");
+
+		assert.strictEqual(ulInternalHeader.getAttribute("aria-labelledby"),
+			`${listWithInternalHeaderId}-header`, "aria-labelledby is correct");
+
+		// assert: List with custom header
+		const EXPECTED_ARIA_LABEL_TXT = "Test aria";
+
+		assert.strictEqual(ulCustomHeader.getAttribute("aria-label"),
+			EXPECTED_ARIA_LABEL_TXT, "aria-label is correct");
+		assert.strictEqual(ulCustomHeader.getAttribute("aria-labelledby"),
+			null, "aria-labelledby is not present");
+	});
 });