feat(ui5-button): accessibleNameRef property implemented (#4474)

* feat(ui5-switch): accessibleNameRef property implemented - Receives id(or many ids) of the elements that label the component.
SAP · Dec 29, 2021 · 3f7eae3 · 3f7eae3
1 parent fddf903
commit 3f7eae3
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
@@ -18,7 +18,7 @@
 	aria-expanded="{{accInfo.ariaExpanded}}"
 	aria-controls="{{accInfo.ariaControls}}"
 	aria-haspopup="{{accInfo.ariaHaspopup}}"
-	aria-label="{{accessibleName}}"
+	aria-label="{{ariaLabelText}}"
 	title="{{accInfo.title}}"
 	part="button"
 >

diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
@@ -168,6 +169,19 @@ const metadata = {
 			defaultValue: undefined,
 		},
 
+		/**
+		 * Receives id(or many ids) of the elements that label the component.
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.1.0
+		 */
+		 accessibleNameRef: {
+			type: String,
+			defaultValue: "",
+		},
+
 		/**
 		 * @type {String}
 		 * @defaultvalue ""
@@ -462,6 +476,10 @@ class Button extends UI5Element {
 		return this.iconOnly && !this.title;
 	}
 
+	get ariaLabelText() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	static async onDefine() {
 		Button.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}

diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html
@@ -76,7 +76,7 @@
 	<ui5-label id="download-text2">From This Button</ui5-label>
 
 	<ui5-button icon="employee" accessible-name="Help me">Action Bar Button</ui5-button>
-	<ui5-button icon="download" accessible-name="Help me" accessible-name-ref="1download-text"></ui5-button>
+	<ui5-button id="buttonAccNameRef" icon="download" accessible-name="Help me" accessible-name-ref="1download-text"></ui5-button>
 
 	<ui5-button icon="employee" accessible-name-ref="1download-text download-text2">Action Bar Button</ui5-button>
 	<ui5-button icon="download" accessible-name-ref="1download-text"></ui5-button>

diff --git a/packages/main/test/specs/Button.spec.js b/packages/main/test/specs/Button.spec.js
@@ -95,4 +95,10 @@ describe("Button general interaction", () => {
 
 		assert.strictEqual(await innerButton.getAttribute("aria-expanded"), null, "Attribute is reflected");
 	});
+
+	it("setting accessible-name-ref on the host is reflected on the button tag", async () => {
+		const button = await browser.$("#buttonAccNameRef").shadow$("button");
+
+		assert.strictEqual(await button.getAttribute("aria-label"), "Download Application", "Attribute is reflected");
+	});
 });