fix(ui5-button): announce aria description (#11264)

Issue:
- The `accessibleDescription` text is not getting announced by the screen reader when the ui5-button
has it's design attribute set.

Solution:
- Move the text related to the design property from the aria-describedby to the aria-description attribute.

Fixes: #10899

Author: unazko

packages/main/cypress/specs/Button.cy.tsx

@@ -5,6 +5,10 @@ import ButtonBadge from "../../src/ButtonBadge.js";
 import download from "@ui5/webcomponents-icons/dist/download.js";
 import employee from "@ui5/webcomponents-icons/dist/employee.js";
 
+import {
+	BUTTON_ARIA_TYPE_REJECT,
+} from "../../src/generated/i18n/i18n-defaults.js";
+
 describe("Button general interaction", () => {
 	it("tests button's text rendering", () => {
 		cy.mount(<Button icon={download} design="Negative">Action Bar Button</Button>);
@@ -301,7 +305,6 @@ describe("Accessibility", () => {
 	});
 
 	it("aria-describedby properly applied on the button tag", () => {
-		const hiddenTextTypeId = "ui5-button-hiddenText-type";
 		cy.mount(<Button design="Attention">Content</Button>);
 
 		cy.get("[ui5-button]")
@@ -310,12 +313,19 @@ describe("Accessibility", () => {
 		cy.get("@button")
 			.shadow()
 			.find("button")
-			.should("have.attr", "aria-describedby", hiddenTextTypeId);
+			.should("have.attr", "aria-description", "Warning");
+	});
+
+	it("accessibleDescription in combination with design property applied on the button tag", () => {
+		cy.mount(<Button design="Negative" accessibleDescription="Decline">Content</Button>);
+
+		cy.get("[ui5-button]")
+			.as("button");
 
 		cy.get("@button")
 			.shadow()
-			.find(`span[id="${hiddenTextTypeId}"]`)
-			.should("exist");
+			.find("button")
+			.should("have.attr", "aria-description", `${BUTTON_ARIA_TYPE_REJECT.defaultText} Decline`);
 	});
 
 	it("setting accessible-name-ref on the host is reflected on the button tag", () => {

packages/main/src/Button.ts

@@ -32,7 +32,12 @@ import ButtonBadgeDesign from "./types/ButtonBadgeDesign.js";
 import type ButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
 import type ButtonBadge from "./ButtonBadge.js";
 import ButtonTemplate from "./ButtonTemplate.js";
-import { BUTTON_ARIA_TYPE_ACCEPT, BUTTON_ARIA_TYPE_REJECT, BUTTON_ARIA_TYPE_EMPHASIZED } from "./generated/i18n/i18n-defaults.js";
+import {
+	BUTTON_ARIA_TYPE_ACCEPT,
+	BUTTON_ARIA_TYPE_REJECT,
+	BUTTON_ARIA_TYPE_EMPHASIZED,
+	BUTTON_ARIA_TYPE_ATTENTION,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import buttonCss from "./generated/themes/Button.css.js";
@@ -482,6 +487,7 @@ class Button extends UI5Element implements IButton {
 			"Positive": BUTTON_ARIA_TYPE_ACCEPT,
 			"Negative": BUTTON_ARIA_TYPE_REJECT,
 			"Emphasized": BUTTON_ARIA_TYPE_EMPHASIZED,
+			"Attention": BUTTON_ARIA_TYPE_ATTENTION,
 		};
 	}
 
@@ -519,12 +525,12 @@ class Button extends UI5Element implements IButton {
 		return getEffectiveAriaLabelText(this);
 	}
 
-	get ariaDescribedbyText() {
-		return this.hasButtonType ? "ui5-button-hiddenText-type" : undefined;
-	}
-
 	get ariaDescriptionText() {
-		return this.accessibleDescription === "" ? undefined : this.accessibleDescription;
+		const ariaDescribedByText = this.hasButtonType ? this.buttonTypeText : "";
+		const accessibleDescription = this.accessibleDescription || "";
+		const ariaDescriptionText = `${ariaDescribedByText} ${accessibleDescription}`.trim();
+
+		return ariaDescriptionText || undefined;
 	}
 
 	get _isSubmit() {

packages/main/src/ButtonTemplate.tsx

@@ -36,7 +36,6 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 			aria-controls={this.accessibilityAttributes.controls}
 			aria-haspopup={this._hasPopup}
 			aria-label={this.ariaLabelText}
-			aria-describedby={this.ariaDescribedbyText}
 			aria-description={this.ariaDescriptionText}
 			title={this.buttonTitle}
 			part="button"
@@ -66,10 +65,6 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 				/>
 			}
 
-			{this.hasButtonType &&
-				<span id="ui5-button-hiddenText-type" aria-hidden="true" class="ui5-hidden-text">{this.buttonTypeText}</span>
-			}
-
 			{this.shouldRenderBadge &&
 				<slot name="badge"/>
 			}

packages/main/src/i18n/messagebundle.properties

@@ -76,6 +76,9 @@ BUTTON_ARIA_TYPE_REJECT=Negative Action
 #XACT: ARIA announcement for the emphasized button
 BUTTON_ARIA_TYPE_EMPHASIZED=Emphasized
 
+#XACT: ARIA announcement for the warning button
+BUTTON_ARIA_TYPE_ATTENTION=Warning
+
 #XACT: Text for Today item in CalendarLegend
 CAL_LEGEND_TODAY_TEXT=Today
 

packages/main/test/pages/Button.html

@@ -37,7 +37,7 @@
 	<ui5-button class="button2auto button3auto" design="Transparent">Secondary <span >button</span></ui5-button>
 	<ui5-button disabled id="button-disabled">Inactive</ui5-button>
 	<ui5-button design="Positive">Accept</ui5-button>
-	<ui5-button design="Negative">Decline</ui5-button>
+	<ui5-button design="Negative" accessible-description="Decline the action">Decline</ui5-button>
 
 	<br />
 	<br />