From a3a5d07beb98e674798bca0f1dc6797e3692eab1 Mon Sep 17 00:00:00 2001
From: Diana Petcheva <diana.petcheva@sap.com>
Date: Tue, 19 Nov 2024 17:08:17 +0200
Subject: [PATCH 1/3] feat(ui5-button, ui5-link): support accessibile
 description

---
 packages/main/cypress/specs/Button.cy.ts | 154 ++++++++++++-----------
 packages/main/cypress/specs/Link.cy.ts   |  16 +++
 packages/main/src/Button.hbs             |   1 +
 packages/main/src/Button.ts              |   9 ++
 packages/main/src/Link.hbs               |   1 +
 packages/main/src/Link.ts                |   9 ++
 packages/main/test/pages/Button.html     |   3 +
 packages/main/test/pages/Link.html       |   8 +-
 8 files changed, 128 insertions(+), 73 deletions(-)
 create mode 100644 packages/main/cypress/specs/Link.cy.ts

diff --git a/packages/main/cypress/specs/Button.cy.ts b/packages/main/cypress/specs/Button.cy.ts
index 2a6673582d60..741aec9dd963 100644
--- a/packages/main/cypress/specs/Button.cy.ts
+++ b/packages/main/cypress/specs/Button.cy.ts
@@ -111,49 +111,6 @@ describe("Button general interaction", () => {
 			.should("not.been.called");
 	});
 
-	it("aria-expanded is properly applied on the button tag", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
-
-		cy.get("[ui5-button]")
-			.as("button");
-
-		cy.get<Button>("@button")
-			.then($el => {
-				$el.get(0).accessibilityAttributes = {
-					expanded: "true",
-				};
-			});
-
-		cy.get("@button")
-			.shadow()
-			.find("button")
-			.should("have.attr", "aria-expanded", "true");
-
-		cy.get<Button>("@button")
-			.then($el => {
-				$el.get(0).accessibilityAttributes = {
-					expanded: "false",
-				};
-			});
-
-		cy.get("@button")
-			.shadow()
-			.find("button")
-			.should("have.attr", "aria-expanded", "false");
-	});
-
-	it("not setting accessible-role on the host keeps the correct role on the button tag", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
-
-		cy.get("[ui5-button]")
-			.shadow()
-			.find("button")
-			.as("button");
-
-		cy.get("@button")
-			.should("have.attr", "role", "button");
-	});
-
 	it("tests button's icon only rendering", () => {
 		cy.mount(html`<ui5-button icon="home"><!----><!----></ui5-button>`);
 
@@ -253,6 +210,87 @@ describe("Button general interaction", () => {
 			.should("have.attr", "mode", "Decorative");
 	});
 
+	it("setting tooltip on the host is reflected on the button tag", () => {
+		cy.mount(html`<ui5-button icon="message-information" tooltip="Go home"></ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "title", "Go home");
+	});
+
+	it("tooltip from inner icon is propagated", () => {
+		cy.mount(html`<ui5-button icon="download" accessible-name="Download application"></ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "title", "Download");
+	});
+});
+
+describe("Accessibility", () => {
+	it("aria-expanded is properly applied on the button tag", () => {
+		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get<Button>("@button")
+			.then($el => {
+				$el.get(0).accessibilityAttributes = {
+					expanded: "true",
+				};
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.should("have.attr", "aria-expanded", "true");
+
+		cy.get<Button>("@button")
+			.then($el => {
+				$el.get(0).accessibilityAttributes = {
+					expanded: "false",
+				};
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.should("have.attr", "aria-expanded", "false");
+	});
+
+	it("setting accessible-role on the host is reflected on the button tag", () => {
+		cy.mount(html`<ui5-button accessible-role="Link"> Navigation Button </ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "role", "link");
+	});
+
+	it("not setting accessible-role on the host keeps the correct role on the button tag", () => {
+		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "role", "button");
+	});
+
 	it("aria-describedby properly applied on the button tag", () => {
 		const hiddenTextTypeId = "ui5-button-hiddenText-type";
 
@@ -310,8 +348,8 @@ describe("Button general interaction", () => {
 			.should("have.attr", "aria-controls", "registration-dialog");
 	});
 
-	it("setting tooltip on the host is reflected on the button tag", () => {
-		cy.mount(html`<ui5-button icon="message-information" tooltip="Go home"></ui5-button>`);
+	it("setting accessible-description is applied to button tag", () => {
+		cy.mount(html`<ui5-button accessible-description="A long description."></ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -319,30 +357,6 @@ describe("Button general interaction", () => {
 			.as("button");
 
 		cy.get("@button")
-			.should("have.attr", "title", "Go home");
-	});
-
-	it("tooltip from inner icon is propagated", () => {
-		cy.mount(html`<ui5-button icon="download" accessible-name="Download application"></ui5-button>`);
-
-		cy.get("[ui5-button]")
-			.shadow()
-			.find("button")
-			.as("button");
-
-		cy.get("@button")
-			.should("have.attr", "title", "Download");
-	});
-
-	it("setting accessible-role on the host is reflected on the button tag", () => {
-		cy.mount(html`<ui5-button accessible-role="Link"> Navigation Button </ui5-button>`);
-
-		cy.get("[ui5-button]")
-			.shadow()
-			.find("button")
-			.as("button");
-
-		cy.get("@button")
-			.should("have.attr", "role", "link");
+			.should("have.attr", "aria-description", "A long description.");
 	});
 });
diff --git a/packages/main/cypress/specs/Link.cy.ts b/packages/main/cypress/specs/Link.cy.ts
new file mode 100644
index 000000000000..e51a3c77b04c
--- /dev/null
+++ b/packages/main/cypress/specs/Link.cy.ts
@@ -0,0 +1,16 @@
+import { html } from "lit";
+import "../../src/Link.js";
+
+describe("Accessibility", () => {
+	it("setting accessible-description is applied to button tag", () => {
+		cy.mount(html`<ui5-link accessible-description="A long description."></ui5-link>`);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find("a")
+			.as("link");
+
+		cy.get("@link")
+			.should("have.attr", "aria-description", "A long description.");
+	});
+});
diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
index 4a5e67e415b3..9cc4aa5ca626 100644
--- a/packages/main/src/Button.hbs
+++ b/packages/main/src/Button.hbs
@@ -17,6 +17,7 @@
 	aria-haspopup="{{_hasPopup}}"
 	aria-label="{{ariaLabelText}}"
 	aria-describedby="{{ariaDescribedbyText}}"
+	aria-description="{{accessibleDescription}}"
 	title="{{buttonTitle}}"
 	part="button"
 	role="{{effectiveAccRole}}"
diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts
index 2b4c2967103c..1eb052ce67b5 100644
--- a/packages/main/src/Button.ts
+++ b/packages/main/src/Button.ts
@@ -219,6 +219,15 @@ class Button extends UI5Element implements IButton {
 	@property({ type: Object })
 	accessibilityAttributes: ButtonAccessibilityAttributes = {};
 
+	/**
+	 * Defines the accessible description of the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.5.0
+	 */
+	@property()
+	accessibleDescription?: string;
+
 	/**
 	 * Defines whether the button has special form-related functionality.
 	 *
diff --git a/packages/main/src/Link.hbs b/packages/main/src/Link.hbs
index 26c7c0fc6ca6..304a9637d4c6 100644
--- a/packages/main/src/Link.hbs
+++ b/packages/main/src/Link.hbs
@@ -12,6 +12,7 @@
 	aria-haspopup="{{_hasPopup}}"
 	aria-expanded="{{accessibilityAttributes.expanded}}"
 	aria-current="{{accessibilityAttributes.current}}"
+	aria-description="{{accessibleDescription}}"
 	@click={{_onclick}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}>
diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
index 9f362fba991f..29444cf60684 100644
--- a/packages/main/src/Link.ts
+++ b/packages/main/src/Link.ts
@@ -226,6 +226,15 @@ class Link extends UI5Element implements ITabbable {
 	@property({ type: Object })
 	accessibilityAttributes: LinkAccessibilityAttributes = {};
 
+	/**
+	 * Defines the accessible description of the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.5.0
+	 */
+	@property()
+	accessibleDescription?: string;
+
 	/**
 	 * Defines the icon, displayed as graphical element within the component before the link's text.
 	 * The SAP-icons font provides numerous options.
diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html
index ce84de46d124..ee98e137bd16 100644
--- a/packages/main/test/pages/Button.html
+++ b/packages/main/test/pages/Button.html
@@ -70,6 +70,9 @@
 	<ui5-button icon="employee" accessible-name="Download book" class="button4auto">Action Bar Button</ui5-button>
 	<ui5-button end-icon="employee" accessible-name="Download book" class="button4auto">Action Bar Button</ui5-button>
 
+	<ui5-label>Button with accessibleDescription:</ui5-label>
+	<ui5-button icon="bar-code" accessible-description="Scan bar code">Scan</ui5-button>
+
 	<br />
 	<br />
 
diff --git a/packages/main/test/pages/Link.html b/packages/main/test/pages/Link.html
index cf4c902c3e37..2f4444204131 100644
--- a/packages/main/test/pages/Link.html
+++ b/packages/main/test/pages/Link.html
@@ -86,9 +86,11 @@ <h2>Link designs</h2>
 	</section>
 
 	<section class="group">
-		<label id="lbl">Text from aria-labelledby</label>
-		<ui5-link id="ariaLbl" accessible-name="Text from aria-label">Go to</ui5-link>
-		<ui5-link id="ariaLblBy" accessible-name-ref="lbl">Go to</ui5-link>
+		<label id="lbl">Text from aria-labelledby</label> <br>
+		<ui5-link id="ariaLbl" accessible-name="Text from aria-label">Go to</ui5-link> <br>
+		<ui5-link id="ariaLblBy" accessible-name-ref="lbl">Go to</ui5-link> <br>
+		<label>Link with aria-description:</label> <br>
+		<ui5-link accessible-description="Text from aria-description">Go to</ui5-link>
 	</section>
 
 	<section class="group">

From b55edaaf3814ffdd7f84ebdd2b0ab0365f778bb8 Mon Sep 17 00:00:00 2001
From: Diana Petcheva <diana.petcheva@sap.com>
Date: Thu, 21 Nov 2024 10:41:34 +0200
Subject: [PATCH 2/3] fix: add check for empty accessible description

---
 packages/main/src/Button.hbs | 2 +-
 packages/main/src/Button.ts  | 4 ++++
 packages/main/src/Link.hbs   | 2 +-
 packages/main/src/Link.ts    | 4 ++++
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
index 9cc4aa5ca626..d55ea3b550ab 100644
--- a/packages/main/src/Button.hbs
+++ b/packages/main/src/Button.hbs
@@ -17,7 +17,7 @@
 	aria-haspopup="{{_hasPopup}}"
 	aria-label="{{ariaLabelText}}"
 	aria-describedby="{{ariaDescribedbyText}}"
-	aria-description="{{accessibleDescription}}"
+	aria-description="{{ariaDescriptionText}}"
 	title="{{buttonTitle}}"
 	part="button"
 	role="{{effectiveAccRole}}"
diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts
index 1eb052ce67b5..885f78329b45 100644
--- a/packages/main/src/Button.ts
+++ b/packages/main/src/Button.ts
@@ -536,6 +536,10 @@ class Button extends UI5Element implements IButton {
 		return this.hasButtonType ? "ui5-button-hiddenText-type" : undefined;
 	}
 
+	get ariaDescriptionText() {
+		return this.accessibleDescription === "" ? undefined : this.accessibleDescription;
+	}
+
 	get _isSubmit() {
 		return this.type === ButtonType.Submit || this.submits;
 	}
diff --git a/packages/main/src/Link.hbs b/packages/main/src/Link.hbs
index 304a9637d4c6..d957db78fbea 100644
--- a/packages/main/src/Link.hbs
+++ b/packages/main/src/Link.hbs
@@ -12,7 +12,7 @@
 	aria-haspopup="{{_hasPopup}}"
 	aria-expanded="{{accessibilityAttributes.expanded}}"
 	aria-current="{{accessibilityAttributes.current}}"
-	aria-description="{{accessibleDescription}}"
+	aria-description="{{ariaDescriptionText}}"
 	@click={{_onclick}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}>
diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
index 29444cf60684..cb01df029c85 100644
--- a/packages/main/src/Link.ts
+++ b/packages/main/src/Link.ts
@@ -339,6 +339,10 @@ class Link extends UI5Element implements ITabbable {
 		return this.accessibleRole.toLowerCase();
 	}
 
+	get ariaDescriptionText() {
+		return this.accessibleDescription === "" ? undefined : this.accessibleDescription;
+	}
+
 	get _hasPopup() {
 		return this.accessibilityAttributes.hasPopup;
 	}

From 3411f08387b3fb710ea5a18361963c3c7cc24f75 Mon Sep 17 00:00:00 2001
From: Diana Petcheva <diana.petcheva@sap.com>
Date: Mon, 25 Nov 2024 00:31:09 +0200
Subject: [PATCH 3/3] fix: move tooltip tests to acc section

---
 packages/main/cypress/specs/Button.cy.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/main/cypress/specs/Button.cy.ts b/packages/main/cypress/specs/Button.cy.ts
index 741aec9dd963..c3292b8bae04 100644
--- a/packages/main/cypress/specs/Button.cy.ts
+++ b/packages/main/cypress/specs/Button.cy.ts
@@ -209,7 +209,9 @@ describe("Button general interaction", () => {
 			.find("[ui5-icon]")
 			.should("have.attr", "mode", "Decorative");
 	});
+});
 
+describe("Accessibility", () => {
 	it("setting tooltip on the host is reflected on the button tag", () => {
 		cy.mount(html`<ui5-button icon="message-information" tooltip="Go home"></ui5-button>`);
 
@@ -233,9 +235,7 @@ describe("Button general interaction", () => {
 		cy.get("@button")
 			.should("have.attr", "title", "Download");
 	});
-});
 
-describe("Accessibility", () => {
 	it("aria-expanded is properly applied on the button tag", () => {
 		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);