feat(ui5-button): support aria-labelledby attribute(#1446)

Author: fifoosid

packages/base/src/util/findNodeOwner.js

@@ -0,0 +1,35 @@
+const findNodeOwner = node => {
+	if (!(node instanceof HTMLElement)) {
+		throw new Error("Argument node should be of type HTMLElement");
+	}
+
+	const ownerTypes = [HTMLHtmlElement, HTMLIFrameElement];
+	let currentShadowRootFlag = true;
+	let currentCustomElementFlag = true;
+
+	while (node) {
+		if (node.toString() === "[object ShadowRoot]") {
+			// Web Component
+			// or the shadow root of web component with attached shadow root
+			if (currentShadowRootFlag) {
+				currentShadowRootFlag = false;
+			}
+			if (!currentCustomElementFlag && !currentShadowRootFlag) {
+				return node;
+			}
+		} else if (node.tagName && node.tagName.indexOf("-") > -1) {
+			if (currentCustomElementFlag) {
+				currentCustomElementFlag = false;
+			} else {
+				return node;
+			}
+		} else if (ownerTypes.indexOf(node.constructor) > -1) {
+			// Document or Iframe reached
+			return node;
+		}
+
+		node = node.parentNode || node.host;
+	}
+};
+
+export default findNodeOwner;

packages/main/src/Button.hbs

@@ -15,6 +15,7 @@
 		tabindex={{tabIndexValue}}
 		aria-expanded="{{accInfo.ariaExpanded}}"
 		aria-controls="{{accInfo.ariaControls}}"
+		aria-label="{{ariaLabelledByText}}"
 		title="{{accInfo.title}}"
 		part="button"
 	>

packages/main/src/Button.js

@@ -4,6 +4,7 @@ import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.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 ButtonDesign from "./types/ButtonDesign.js";
 import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
 import Icon from "./Icon.js";
@@ -128,6 +129,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Receives id(or many ids) of the elements that label the button
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.7
+		 */
+		ariaLabelledby: {
+			type: String,
+			defaultValue: "",
+		},
+
 		/**
 		 * Indicates if the element if focusable
 		 * @private
@@ -315,6 +328,27 @@ class Button extends UI5Element {
 		};
 	}
 
+	get ariaLabelledByText() {
+		if (!this.ariaLabelledby) {
+			return undefined;
+		}
+
+		const ids = this.ariaLabelledby.split(" ");
+		const owner = findNodeOwner(this);
+		let result = "";
+
+		ids.forEach((elementId, index) => {
+			const element = owner.querySelector(`#${elementId}`);
+			result += `${element ? element.textContent : ""}`;
+
+			if (index < ids.length - 1) {
+				result += " ";
+			}
+		});
+
+		return result;
+	}
+
 	static typeTextMappings() {
 		return {
 			"Positive": BUTTON_ARIA_TYPE_ACCEPT,

packages/main/test/pages/Button.html

@@ -69,9 +69,10 @@
 	<br />
 	<br />
 
-	<ui5-button icon="employee">Action Bar Button</ui5-button>
-	<ui5-button icon="download"></ui5-button>
-	<ui5-button icon="download"></ui5-button>
+	<ui5-label id="download-text">Download Application</ui5-label>
+	<ui5-label id="download-text2">From This Button</ui5-label>
+	<ui5-button icon="employee" aria-labelledby="download-text download-text2">Action Bar Button</ui5-button>
+	<ui5-button icon="download" aria-labelledby="download-text"></ui5-button>
 
 
 	<br/>