feat(ui5-button, ui5-link): support accessibile description

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>`);
 
@@ -252,6 +209,87 @@ 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>`);
+
+		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");
+	});
+
+	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,39 +348,15 @@ 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()
 			.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");
-	});
-
-	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.");
 	});
 });

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.");
+	});
+});

packages/main/src/Button.hbs

@@ -17,6 +17,7 @@
 	aria-haspopup="{{_hasPopup}}"
 	aria-label="{{ariaLabelText}}"
 	aria-describedby="{{ariaDescribedbyText}}"
+	aria-description="{{ariaDescriptionText}}"
 	title="{{buttonTitle}}"
 	part="button"
 	role="{{effectiveAccRole}}"

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.
 	 *
@@ -527,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;
 	}

packages/main/src/Link.hbs

@@ -12,6 +12,7 @@
 	aria-haspopup="{{_hasPopup}}"
 	aria-expanded="{{accessibilityAttributes.expanded}}"
 	aria-current="{{accessibilityAttributes.current}}"
+	aria-description="{{ariaDescriptionText}}"
 	@click={{_onclick}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}>

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.
@@ -330,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;
 	}

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 />
 

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">