feat(ui5-link): add aria-label and aria-labelledby support (#2357)

FIXES: #2356

Author: ilhan007

packages/main/src/Link.hbs

@@ -7,6 +7,7 @@
 	tabindex="{{tabIndex}}"
 	?disabled="{{disabled}}"
 	aria-disabled="{{ariaDisabled}}"
+	aria-label="{{ariaLabelText}}"
 	@focusin={{_onfocusin}}
 	@click={{_onclick}}
 	@keydown={{_onkeydown}}

packages/main/src/Link.js

@@ -1,8 +1,10 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import LinkDesign from "./types/LinkDesign.js";
 
+
 // Template
 import LinkRederer from "./generated/templates/LinkTemplate.lit.js";
 
@@ -91,6 +93,31 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the aria-label attribute for the link.
+		 *
+		 * @type {String}
+		 * @since 1.0.0-rc.10
+		 * @private
+		 * @defaultvalue ""
+		 */
+		ariaLabel: {
+			type: String,
+		},
+
+		/**
+		 * Receives id(or many ids) of the elements that label the input
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.10
+		 */
+		ariaLabelledby: {
+			type: String,
+			defaultValue: "",
+		},
+
 		_rel: {
 			type: String,
 			noAttribute: true,
@@ -211,6 +238,10 @@ class Link extends UI5Element {
 		return this.disabled ? "true" : undefined;
 	}
 
+	get ariaLabelText() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	get hasLinkType() {
 		return this.design !== LinkDesign.Default;
 	}

packages/main/test/pages/Link.html

@@ -79,6 +79,12 @@ <h2>Link designs</h2>
 		<ui5-input id="helper-input" value="0"></ui5-input>
 	</section>
 
+	<section class="group">
+		<label id="lbl">Text from aria-labelledby</label>
+		<ui5-link id="ariaLbl" aria-label="Text from aria-label">Go to</ui5-link>
+		<ui5-link id="ariaLblBy" aria-labelledby="lbl">Go to</ui5-link>
+	</section>
+
 	<script>
 		var disLink = document.querySelector("#disabled-link");
 		var link = document.querySelector("#link");

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

@@ -6,7 +6,7 @@ describe("General API", () => {
 	it("render initially", () => {
 		const linkRoot = browser.$("ui5-link").shadow$("ui5-link-root");
 
-		assert.ok(linkRoot, "Link is rendered");
+		assert.ok(linkRoot, "Link is rendered.");
 	});
 
 	it("tests href attributes", () => {
@@ -16,25 +16,25 @@ describe("General API", () => {
 		assert.notOk(link.getAttribute("href"), "Render without 'href' by default");
 
 		link.setAttribute("href", HREF_ATTRIBUTE);
-		assert.strictEqual(link.getAttribute("href"), HREF_ATTRIBUTE, "href attribute is changed");
+		assert.strictEqual(link.getAttribute("href"), HREF_ATTRIBUTE, "The href attribute is changed.");
 	});
 
 	it("tests target attributes", () => {
 		const link = browser.$("#empty-link-2");
 		const TARGET_ATTRIBUTE = "_blank";
 
-		assert.notOk(link.getAttribute("target"), "Render without 'target' by default");
+		assert.notOk(link.getAttribute("target"), "Render without 'target' by default.");
 
 		link.setAttribute("target", TARGET_ATTRIBUTE);
-		assert.strictEqual(link.getAttribute("target"), TARGET_ATTRIBUTE, "target attribute is changed");
+		assert.strictEqual(link.getAttribute("target"), TARGET_ATTRIBUTE, "The target attribute is changed.");
 	});
 
 	it("should wrap the text of the link", () => {
 		const wrappingLabel = browser.$("#wrapping-link");
 		const truncatingLabel = browser.$("#non-wrapping-link");
 
 		assert.ok(wrappingLabel.getSize().height > truncatingLabel.getSize().height);
-		assert.strictEqual(truncatingLabel.getSize().height, 16, "truncated label should be single line");
+		assert.strictEqual(truncatingLabel.getSize().height, 16, "The truncated label should be single line.");
 	});
 
 	it("should prevent clicking on disabled link", () => {
@@ -45,14 +45,14 @@ describe("General API", () => {
 			disLink.click();
 		});
 
-		assert.strictEqual(input.getValue(), "0", "Click should not be fired and value of input should not be changed");
+		assert.strictEqual(input.getValue(), "0", "Click should not be fired and value of input should not be changed.");
 
 	});
 
 	it("disabled link should not be enabled", () => {
 		const link = browser.$("#disabled-link").shadow$("a").getAttribute("disabled");
 
-		assert.ok(link, "Disabled link should not be enabled");
+		assert.ok(link, "Disabled link should not be enabled.");
 	});
 
 	it("tests prevent default", () => {
@@ -61,4 +61,17 @@ describe("General API", () => {
 		link.click();
 		assert.ok(browser.getUrl().indexOf("https://www.google.com") === -1);
 	});
+
+	it("tests acc attributes", () => {
+		const link1 = browser.$("#ariaLbl").shadow$("a");
+		const link2 = browser.$("#ariaLblBy").shadow$("a");
+
+		const ARIA_LABEL_1 = "Text from aria-label";
+		const ARIA_LABEL_2 = "Text from aria-labelledby";
+
+		assert.strictEqual(link1.getAttribute("aria-label"),
+			ARIA_LABEL_1, "The aria-label attribute is correct.");
+		assert.strictEqual(link2.getAttribute("aria-label"),
+			ARIA_LABEL_2, "The aria-label attribute is correct.");
+	});
 });