feat(ui5-select): add ariaLabel and ariaLabelledby properties (#2125)

Similar to other components, the Select should also support aria-label and aria-labelledby set on the custom element.
Note: internally we also set aria-label, using the base method "getEffectiveAriaLabelText" for the purpose.

Related to #2107

Author: ilhan007

packages/main/src/Select.hbs

@@ -5,6 +5,7 @@
 	id="{{_id}}-select"
 	role="button"
 	aria-haspopup="listbox"
+	aria-label="{{ariaLabelText}}"
 	aria-labelledby="{{_id}}-label"
 	aria-describedby="{{valueStateTextId}}"
 	aria-disabled="{{isDisabled}}"

packages/main/src/Select.js

@@ -12,6 +12,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import getEffectiveAriaLabelText from "@ui5/webcomponents-base/dist/util/getEffectiveAriaLabelText.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import "@ui5/webcomponents-icons/dist/icons/slim-arrow-down.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
@@ -157,6 +158,31 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the aria-label attribute for the select.
+		 *
+		 * @type {String}
+		 * @since 1.0.0-rc.9
+		 * @private
+		 * @defaultvalue ""
+		 */
+		ariaLabel: {
+			type: String,
+		},
+
+		/**
+		 * Receives id(or many ids) of the elements that label the select.
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.9
+		 */
+		ariaLabelledby: {
+			type: String,
+			defaultValue: "",
+		},
+
 		_text: {
 			type: String,
 			noAttribute: true,
@@ -576,6 +602,10 @@ class Select extends UI5Element {
 		};
 	}
 
+	get ariaLabelText() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	get valueStateMessageText() {
 		return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
 	}

packages/main/test/pages/Select.html

@@ -75,6 +75,24 @@ <h2>Selection not cycling</h2>
 	<h2> Change event counter holder</h2>
 	<ui5-input id="inputResult"></ui5-input>
 
+	<section>
+		<h3>Select aria-label and aria-labelledby</h3>
+		<span id="infoText">info text</span>
+		<div>
+			<ui5-select id="textAreaAriaLabel" aria-label="Hello World">
+				<ui5-option selected>First</ui5-option>
+				<ui5-option selected>Second</ui5-option>
+				<ui5-option selected>Third</ui5-option>
+			</ui5-select>
+
+			<ui5-select id="textAreaAriaLabelledBy" aria-labelledby="infoText">
+				<ui5-option selected>One</ui5-option>
+				<ui5-option selected>Two</ui5-option>
+				<ui5-option selected>Three</ui5-option>
+			</ui5-select>
+		</div>
+	</section>
+
 	<section class="ui5-content-density-compact">
 		<h3>Select in Compact</h3>
 		<div>

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

@@ -293,4 +293,17 @@ describe("Select general interaction", () => {
 
 		assert.ok(selectText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT2) !== -1, "Select label is correct.");
 	});
+
+
+	it("Tests aria-label and aria-labelledby", () => {
+		const select1 = browser.$("#textAreaAriaLabel").shadow$(".ui5-select-root");
+		const select2 = browser.$("#textAreaAriaLabelledBy").shadow$(".ui5-select-root");
+		const EXPECTED_ARIA_LABEL1 = "Hello World";
+		const EXPECTED_ARIA_LABEL2 = "info text";
+
+		assert.strictEqual(select1.getAttribute("aria-label"), EXPECTED_ARIA_LABEL1,
+			"The aria-label is correctly set internally.");
+		assert.strictEqual(select2.getAttribute("aria-label"), EXPECTED_ARIA_LABEL2,
+			"The aria-label is correctly set internally.");
+	});
 });