fix(ui5-button): move button type text from aria-label to aria-description (#12474)

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

Author: unazko

packages/main/cypress/specs/Button.cy.tsx

@@ -345,19 +345,22 @@ 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(<Button design="Emphasized" accessibleName="Custom Action Label">Button Text</Button>);
+		cy.mount(<Button accessibleName="Custom Action Label">Button Text</Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
 			.find("button")
 			.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", () => {

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 {