From 7e65e77e020f62f1de2be55e6bc0a6216b859909 Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.myumyun@sap.com>
Date: Fri, 23 Oct 2020 11:59:17 +0300
Subject: [PATCH] feat(ui5-link): add aria-label and aria-labelledby support
 (#2357)

FIXES: #2356
---
 packages/main/src/Link.hbs            |  1 +
 packages/main/src/Link.js             | 31 +++++++++++++++++++++++++++
 packages/main/test/pages/Link.html    |  6 ++++++
 packages/main/test/specs/Link.spec.js | 27 +++++++++++++++++------
 4 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/packages/main/src/Link.hbs b/packages/main/src/Link.hbs
index 87745856bb8a..c7a9796e6ed4 100644
--- a/packages/main/src/Link.hbs
+++ b/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}}
diff --git a/packages/main/src/Link.js b/packages/main/src/Link.js
index 548911db9e18..ffc039d71b79 100644
--- a/packages/main/src/Link.js
+++ b/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;
 	}
diff --git a/packages/main/test/pages/Link.html b/packages/main/test/pages/Link.html
index 0de992c809da..d3dad5963efc 100644
--- a/packages/main/test/pages/Link.html
+++ b/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");
diff --git a/packages/main/test/specs/Link.spec.js b/packages/main/test/specs/Link.spec.js
index b005f068031b..21bacf070764 100644
--- a/packages/main/test/specs/Link.spec.js
+++ b/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,17 +16,17 @@ 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", () => {
@@ -34,7 +34,7 @@ describe("General API", () => {
 		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.");
+	});
 });