fix(ui5-button): adjust screen reader announcement order (#8997)

Fixes: #8976
SAP · Jun 5, 2024 · 2d9a16b · 2d9a16b
1 parent b8d7bac
commit 2d9a16b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
@@ -18,6 +18,7 @@
 	aria-controls="{{accessibilityAttributes.controls}}"
 	aria-haspopup="{{_hasPopup}}"
 	aria-label="{{ariaLabelText}}"
+	aria-describedby="{{ariaDescribedbyText}}"
 	title="{{buttonTitle}}"
 	part="button"
 	role="{{effectiveAccRole}}"
@@ -48,7 +49,7 @@
 	{{/if}}
 
 	{{#if hasButtonType}}
-		<span class="ui5-hidden-text">{{buttonTypeText}}</span>
+		<span id="ui5-button-hiddenText-type" aria-hidden="true" class="ui5-hidden-text">{{buttonTypeText}}</span>
 	{{/if}}
 </button>
 

diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts
@@ -529,6 +529,10 @@ class Button extends UI5Element implements IButton, IFormElement {
 		return getEffectiveAriaLabelText(this);
 	}
 
+	get ariaDescribedbyText() {
+		return this.hasButtonType ? "ui5-button-hiddenText-type" : undefined;
+	}
+
 	get _isSubmit() {
 		return this.type === ButtonType.Submit || this.submits;
 	}

diff --git a/packages/main/test/specs/Button.spec.js b/packages/main/test/specs/Button.spec.js
@@ -139,6 +139,14 @@ describe("Button general interaction", () => {
 		assert.strictEqual(await innerButton.getAttribute("aria-controls"), "registration-dialog", "Attribute is reflected");
 	});
 
+	it("aria-describedby properly applied on the button tag", async () => {
+		const button = await browser.$("#button-with-slot");
+		const innerButton = await button.shadow$("button");
+		const invisibleButtonType = await innerButton.$$("span")[1];
+
+		assert.strictEqual(await innerButton.getAttribute("aria-describedby"), await invisibleButtonType.getAttribute("id"), "Attribute is reflected");
+	});
+
 	it("tests button with text icon role", async () => {
 		const button = await browser.$("#attentionIconButton");
 		const icon = await button.shadow$("ui5-icon");