feat(ui5-link): provide accessible-name support (#4711)

Аdd new property "accessibleName" define custom accessible name text for the link. Fixes: #4498
SAP · Feb 10, 2022 · 6597afa · 6597afa
1 parent 8822f66
commit 6597afa
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/packages/main/src/Link.js b/packages/main/src/Link.js
@@ -1,7 +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 { getAriaLabelledByTexts } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import LinkDesign from "./types/LinkDesign.js";
 import WrappingType from "./types/WrappingType.js";
@@ -102,6 +102,18 @@ const metadata = {
 			defaultValue: WrappingType.None,
 		},
 
+		/**
+		 * Defines the accessible aria name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.2.0
+		 */
+		accessibleName: {
+			type: String,
+		},
+
 		/**
 		 * Receives id(or many ids) of the elements that label the input
 		 *
@@ -112,7 +124,6 @@ const metadata = {
 		 */
 		accessibleNameRef: {
 			type: String,
-			defaultValue: "",
 		},
 
 		/**
@@ -289,7 +300,7 @@ class Link extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		return getAriaLabelledByTexts(this);
+		return getEffectiveAriaLabelText(this);
 	}
 
 	get hasLinkType() {

diff --git a/packages/main/test/pages/Link.html b/packages/main/test/pages/Link.html
@@ -41,6 +41,7 @@
 	<section class="group">
 		<h2>cross-origin</h2>
 		<ui5-link href="https://www.google.com" target="_blank" id="link">link</ui5-link><span>native span</span>
+		<ui5-link href="https://www.google.com" target="_blank" id="linkAccName" accessible-name="more info">link with accessible-name</ui5-link><span>native span</span>
 	</section>
 
 	<section class="group">
@@ -101,13 +102,13 @@ <h2>Link opens a dialog</h2>
 					<ui5-label for="email" type="Email" required>Email: </ui5-label>
 					<ui5-input id="email"></ui5-input>
 				</div>
-		
+
 				<div>
 					<ui5-label for="password" required>Password: </ui5-label>
 					<ui5-input id="password" type="Password"></ui5-input>
 				</div>
 			</section>
-		
+
 			<div slot="footer"	class="dialog-footer">
 				<div style="flex: 1;"></div>
 				<ui5-button id="closeDialogButton" design="Emphasized">Sign in</ui5-button>

diff --git a/packages/main/test/specs/Link.spec.js b/packages/main/test/specs/Link.spec.js
@@ -81,4 +81,10 @@ describe("General API", () => {
 		assert.strictEqual(await link.shadow$("a").getAttribute("aria-haspopup"), "Dialog", "Proper aria-haspopup attribute is set");
 	});
 
+	it("setting accessible-name applied on the host element is reflected on the anchor tag", async () => {
+		const link = await browser.$("#linkAccName");
+
+		assert.strictEqual(await link.shadow$("a").getAttribute("aria-label"), "more info", "Attribute is reflected");
+	});
+
 });