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 {