feat(ui5-input): Support ariaLabelledBy (#1873)

Author: vladitasev

packages/base/src/util/getEffectiveAriaLabelText.js

@@ -0,0 +1,28 @@
+import findNodeOwner from "./findNodeOwner.js";
+
+const getEffectiveAriaLabelText = el => {
+	if (!el.ariaLabelledby) {
+		if (el.ariaLabel) {
+			return el.ariaLabel;
+		}
+
+		return undefined;
+	}
+
+	const ids = el.ariaLabelledby.split(" ");
+	const owner = findNodeOwner(el);
+	let result = "";
+
+	ids.forEach((elementId, index) => {
+		const element = owner.querySelector(`[id='${elementId}']`);
+		result += `${element ? element.textContent : ""}`;
+
+		if (index < ids.length - 1) {
+			result += " ";
+		}
+	});
+
+	return result;
+};
+
+export default getEffectiveAriaLabelText;

packages/main/src/Button.js

@@ -3,7 +3,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import findNodeOwner from "@ui5/webcomponents-base/dist/util/findNodeOwner.js";
+import getEffectiveAriaLabelText from "@ui5/webcomponents-base/dist/util/getEffectiveAriaLabelText.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
 import Icon from "./Icon.js";
@@ -358,28 +358,7 @@ class Button extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		if (!this.ariaLabelledby) {
-			if (this.ariaLabel) {
-				return this.ariaLabel;
-			}
-
-			return undefined;
-		}
-
-		const ids = this.ariaLabelledby.split(" ");
-		const owner = findNodeOwner(this);
-		let result = "";
-
-		ids.forEach((elementId, index) => {
-			const element = owner.querySelector(`[id='${elementId}']`);
-			result += `${element ? element.textContent : ""}`;
-
-			if (index < ids.length - 1) {
-				result += " ";
-			}
-		});
-
-		return result;
+		return getEffectiveAriaLabelText(this);
 	}
 
 	static typeTextMappings() {

packages/main/src/Input.js

@@ -13,6 +13,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import getEffectiveAriaLabelText from "@ui5/webcomponents-base/dist/util/getEffectiveAriaLabelText.js";
 import "@ui5/webcomponents-icons/dist/icons/decline.js";
 import InputType from "./types/InputType.js";
 import Popover from "./Popover.js";
@@ -280,6 +281,19 @@ const metadata = {
 			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: "",
+		},
+
 		/**
 		 * @private
 		 */
@@ -939,7 +953,7 @@ class Input extends UI5Element {
 				"ariaOwns": this._inputAccInfo && this._inputAccInfo.ariaOwns,
 				"ariaExpanded": this._inputAccInfo && this._inputAccInfo.ariaExpanded,
 				"ariaDescription": this._inputAccInfo && this._inputAccInfo.ariaDescription,
-				"ariaLabel": this.ariaLabel,
+				"ariaLabel": getEffectiveAriaLabelText(this),
 			},
 		};
 	}

packages/main/test/pages/Input.html

@@ -289,6 +289,12 @@ <h3> Test scroll pos</h3>
 	<br><br>
 	<ui5-input id="scrollResult"></ui5-input>
 
+	<h3>Test ariaLabel and ariaLabelledBy</h3>
+	<ui5-input aria-label="Very important input"></ui5-input>
+	<br>
+	<ui5-label id="enterNameLabel">Enter name: </ui5-label>
+	<ui5-input aria-labelledby="enterNameLabel"></ui5-input>
+
 	<script>
 		var sap_database_entries = [{ key: "A", text: "A" }, { key: "Afg", text: "Afghanistan" }, { key: "Arg", text: "Argentina" }, { key: "Alb", text: "Albania" }, { key: "Arm", text: "Armenia" }, { key: "Alg", text: "Algeria" }, { key: "And", text: "Andorra" }, { key: "Ang", text: "Angola" }, { key: "Ast", text: "Austria" }, { key: "Aus", text: "Australia" }, { key: "Aze", text: "Azerbaijan" }, { key: "Aruba", text: "Aruba" }, { key: "Antigua", text: "Antigua and Barbuda" }, { key: "B", text: "B" }, { key: "Bel", text: "Belarus" }, { key: "Bel", text: "Belgium" }, { key: "Bg", text: "Bulgaria" }, { key: "Bra", text: "Brazil" }, { key: "C", text: "C" }, { key: "Ch", text: "China" }, { key: "Cub", text: "Cuba" }, { key: "Chil", text: "Chili" }, { key: "L", text: "L" }, { key: "Lat", text: "Latvia" }, { key: "Lit", text: "Litva" }, { key: "P", text: "P" }, { key: "Prt", text: "Portugal" }, { key: "S", text: "S" }, { key: "Sen", text: "Senegal" }, { key: "Ser", text: "Serbia" }, { key: "Sey", text: "Seychelles" }, { key: "Sierra", text: "Sierra Leone" }, { key: "Sgp", text: "Singapore" }, { key: "Sint", text: "Sint Maarten" }, { key: "Slv", text: "Slovakia" }, { key: "Slo", text: "Slovenia" }];
 
@@ -415,7 +421,7 @@ <h3> Test scroll pos</h3>
 				mouseoverResult.value = targetRef.textContent;
 				quickViewCard.openBy(targetRef, true);
 			});
-			
+
 			el.addEventListener("mouseout", function (event) {
 				const targetRef = event.detail.targetRef;