diff --git a/packages/main/cypress/specs/Button.cy.tsx b/packages/main/cypress/specs/Button.cy.tsx index 35230ea6cce6..d4321e6bff3e 100644 --- a/packages/main/cypress/specs/Button.cy.tsx +++ b/packages/main/cypress/specs/Button.cy.tsx @@ -345,11 +345,14 @@ 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-label uses accessibleName when both text and accessibleName are provided", () => { - cy.mount(); + cy.mount(); cy.get("[ui5-button]") .shadow() @@ -357,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", () => { @@ -424,7 +427,7 @@ describe("Accessibility", () => { .as("button"); cy.get("@button") - .should("have.attr", "aria-description", "Decline"); + .should("have.attr", "aria-description", "Decline Negative Action"); }); @@ -455,7 +458,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 9797b94cee31..e79bd3596cf8 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -628,17 +628,20 @@ class Button extends UI5Element implements IButton { get ariaLabelText() { const effectiveAriaLabelText = getEffectiveAriaLabelText(this) || ""; const textContent = this.textContent || ""; - const typeLabelText = this.hasButtonType ? this.buttonTypeText : ""; const internalLabelText = this.effectiveBadgeDescriptionText || ""; // Use either the effective aria label text (if accessibleName is provided) or the button's text content const mainLabelText = effectiveAriaLabelText || textContent; - const labelParts = [mainLabelText, typeLabelText, internalLabelText].filter(part => part); + const labelParts = [mainLabelText, 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 {