From 105ba12fe28140ea9ea0b53f4a7fe2fc626f4941 Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Mon, 13 Oct 2025 12:22:48 +0300 Subject: [PATCH 1/3] fix(ui5-button): move button type text from aria-label to aria-description When a button has design property (like Emphasized, Negative), the type text should be in aria-description instead of aria-label for better semantic separation. Updated tests to verify the new behavior. Fixes #12413 --- packages/main/cypress/specs/Button.cy.tsx | 12 +++++++++--- packages/main/src/Button.ts | 9 ++++++--- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/main/cypress/specs/Button.cy.tsx b/packages/main/cypress/specs/Button.cy.tsx index bffe50242ea3..ac0bbaeac733 100644 --- a/packages/main/cypress/specs/Button.cy.tsx +++ b/packages/main/cypress/specs/Button.cy.tsx @@ -345,7 +345,10 @@ describe("Accessibility", () => { .as("button"); cy.get("@button") - .should("have.attr", "aria-label", "Action Emphasized"); + .should("have.attr", "aria-label", "Action"); + + cy.get("@button") + .should("have.attr", "aria-description", "Emphasized"); }); it("aria-expanded is properly applied on the button tag", () => { @@ -412,7 +415,7 @@ describe("Accessibility", () => { .as("button"); cy.get("@button") - .should("have.attr", "aria-description", "Decline"); + .should("have.attr", "aria-description", "Decline Negative Action"); }); @@ -443,7 +446,10 @@ describe("Accessibility", () => { .as("button"); cy.get("@button") - .should("have.attr", "aria-label", `Download ${BUTTON_ARIA_TYPE_EMPHASIZED.defaultText} 1 item`); + .should("have.attr", "aria-label", `Download 1 item`); + + cy.get("@button") + .should("have.attr", "aria-description", BUTTON_ARIA_TYPE_EMPHASIZED.defaultText); }); it("setting accessible-name-ref on the host is reflected on the button tag", () => { diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index 32a3e0b32cc2..ac2ea17a7fc2 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -628,15 +628,18 @@ class Button extends UI5Element implements IButton { get ariaLabelText() { const textContent = this.textContent || ""; const ariaLabelText = getEffectiveAriaLabelText(this) || ""; - const typeLabelText = this.hasButtonType ? this.buttonTypeText : ""; const internalLabelText = this.effectiveBadgeDescriptionText || ""; - const labelParts = [textContent, ariaLabelText, typeLabelText, internalLabelText].filter(part => part); + const labelParts = [textContent, ariaLabelText, internalLabelText].filter(part => part); return labelParts.join(" "); } get ariaDescriptionText() { - return this.accessibleDescription === "" ? undefined : this.accessibleDescription; + const accessibleDescription = this.accessibleDescription === "" ? undefined : this.accessibleDescription; + const typeLabelText = this.hasButtonType ? this.buttonTypeText : ""; + + const descriptionParts = [accessibleDescription, typeLabelText].filter(part => part); + return descriptionParts.length > 0 ? descriptionParts.join(" ") : undefined; } get _computedAccessibilityAttributes(): ButtonAccessibilityAttributes { From d90ed80e4b5b0b1604650ca36343e3a46bc38dc3 Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Mon, 13 Oct 2025 13:03:41 +0300 Subject: [PATCH 2/3] fix: resolve lint error --- packages/main/src/Button.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index ac2ea17a7fc2..ac21e394abff 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -637,7 +637,7 @@ class Button extends UI5Element implements IButton { get ariaDescriptionText() { const accessibleDescription = this.accessibleDescription === "" ? undefined : this.accessibleDescription; const typeLabelText = this.hasButtonType ? this.buttonTypeText : ""; - + const descriptionParts = [accessibleDescription, typeLabelText].filter(part => part); return descriptionParts.length > 0 ? descriptionParts.join(" ") : undefined; } From 4a9def0b8d86f0104dab3ca0ce09be5986165b79 Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Mon, 20 Oct 2025 12:38:06 +0300 Subject: [PATCH 3/3] fix: adjust tests --- packages/main/cypress/specs/Button.cy.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/cypress/specs/Button.cy.tsx b/packages/main/cypress/specs/Button.cy.tsx index 52b87f29436e..d4321e6bff3e 100644 --- a/packages/main/cypress/specs/Button.cy.tsx +++ b/packages/main/cypress/specs/Button.cy.tsx @@ -352,7 +352,7 @@ describe("Accessibility", () => { }); it("aria-label uses accessibleName when both text and accessibleName are provided", () => { - cy.mount(); + cy.mount(); cy.get("[ui5-button]") .shadow() @@ -360,7 +360,7 @@ describe("Accessibility", () => { .as("button"); cy.get("@button") - .should("have.attr", "aria-label", "Custom Action Label Emphasized"); + .should("have.attr", "aria-label", "Custom Action Label"); }); it("aria-expanded is properly applied on the button tag", () => {