diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
index cef0ad38db1a..9a891ab2f9bd 100644
--- 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}}
- {{buttonTypeText}}
+ {{buttonTypeText}}
{{/if}}
diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts
index 47e4aa36a2b7..6b79359cce49 100644
--- 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
index cbe719cd969b..fe12aafebce3 100644
--- 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");