From 0cd733573826ae002470743171c45e0c92d30bec Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Wed, 5 Jun 2024 13:47:17 +0300 Subject: [PATCH 1/2] fix(ui5-button): adjust screen reader announcement order (#8997) Fixes: https://github.com/SAP/ui5-webcomponents/issues/8976 --- packages/main/src/Button.hbs | 3 ++- packages/main/src/Button.ts | 4 ++++ packages/main/test/specs/Button.spec.js | 8 ++++++++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs index 9174647245aa..96e32f7232b9 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="{{buttonAccessibleRole}}" @@ -39,7 +40,7 @@ {{#if hasButtonType}} - {{buttonTypeText}} + {{/if}} diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index b6fd36d2625d..d0ab2751aa2e 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -518,6 +518,10 @@ class Button extends UI5Element implements IFormElement, IButton { 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 e7600d440431..4d09606a5446 100644 --- a/packages/main/test/specs/Button.spec.js +++ b/packages/main/test/specs/Button.spec.js @@ -118,6 +118,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"); From e4db9026857f008819915fdb99ece68c22c3950e Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Wed, 5 Jun 2024 18:11:14 +0300 Subject: [PATCH 2/2] fix: adjust tests --- packages/main/test/specs/Button.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/test/specs/Button.spec.js b/packages/main/test/specs/Button.spec.js index 4d09606a5446..4326e0b65c95 100644 --- a/packages/main/test/specs/Button.spec.js +++ b/packages/main/test/specs/Button.spec.js @@ -119,7 +119,7 @@ describe("Button general interaction", () => { }); it("aria-describedby properly applied on the button tag", async () => { - const button = await browser.$("#button-with-slot"); + const button = await browser.$("#button1"); const innerButton = await button.shadow$("button"); const invisibleButtonType = await innerButton.$$("span")[1];