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