feat(ui5-button): add accessibilityInfo getter (#12704)

Author: tsanislavgatev

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

@@ -577,4 +577,61 @@ describe("Accessibility", () => {
 		cy.get("@tag")
 			.should("have.text", "999+");
 	});
+
+	it("accessibilityInfo returns correct properties for different button states", () => {
+		cy.mount(<Button design="Emphasized" accessibleDescription="Submit form">Submit</Button>);
+
+		cy.get<Button>("[ui5-button]")
+			.then($button => {
+				const button = $button.get(0);
+				const info = button.accessibilityInfo;
+
+				expect(info.description).to.include("Submit form");
+				expect(info.description).to.include(Button.i18nBundle.getText(BUTTON_ARIA_TYPE_EMPHASIZED));
+				expect(info.role).to.equal("button");
+				expect(info.disabled).to.be.false;
+			});
+	});
+
+	it("accessibilityInfo reflects custom role and disabled state", () => {
+		cy.mount(<Button accessibleRole="Link" disabled>Navigate</Button>);
+
+		cy.get<Button>("[ui5-button]")
+			.then($button => {
+				const button = $button.get(0);
+				const info = button.accessibilityInfo;
+
+				expect(info.role).to.equal("link");
+				expect(info.disabled).to.be.true;
+				expect(info.description).to.be.undefined;
+			});
+	});
+
+	it("accessibilityInfo updates when properties change", () => {
+		cy.mount(<Button>Click me</Button>);
+
+		cy.get<Button>("[ui5-button]")
+			.as("button");
+
+		cy.get<Button>("@button")
+			.then($button => {
+				const button = $button.get(0);
+				expect(button.accessibilityInfo.disabled).to.be.false;
+				expect(button.accessibilityInfo.role).to.equal("button");
+
+				button.disabled = true;
+				button.accessibleRole = "Link";
+				button.design = "Negative";
+			});
+
+		cy.get<Button>("@button")
+			.then($button => {
+				const button = $button.get(0);
+				const info = button.accessibilityInfo;
+
+				expect(info.disabled).to.be.true;
+				expect(info.role).to.equal("link");
+				expect(info.description).to.include("Negative Action");
+			});
+	});
 });

packages/main/src/Button.ts

@@ -29,7 +29,7 @@ import toLowercaseEnumValue from "@ui5/webcomponents-base/dist/util/toLowercaseE
 import ButtonDesign from "./types/ButtonDesign.js";
 import ButtonType from "./types/ButtonType.js";
 import ButtonBadgeDesign from "./types/ButtonBadgeDesign.js";
-import type ButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
+import ButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
 import type ButtonBadge from "./ButtonBadge.js";
 import ButtonTemplate from "./ButtonTemplate.js";
 import {
@@ -39,6 +39,8 @@ import {
 	BUTTON_ARIA_TYPE_ATTENTION,
 	BUTTON_BADGE_ONE_ITEM,
 	BUTTON_BADGE_MANY_ITEMS,
+	BUTTON_ROLE_DESCRIPTION,
+	LINK_ROLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -658,6 +660,28 @@ class Button extends UI5Element implements IButton {
 		};
 	}
 
+	get accessibilityInfo() {
+		return {
+			description: this.ariaDescriptionText,
+			role: this.effectiveAccRole,
+			disabled: this.disabled,
+			children: this.text,
+			type: this.effectiveAccRoleTranslation,
+		};
+	}
+
+	get effectiveAccRoleTranslation(): string {
+		if (this.role === ButtonAccessibleRole.Button) {
+			return Button.i18nBundle.getText(BUTTON_ROLE_DESCRIPTION);
+		}
+
+		if (this.role === ButtonAccessibleRole.Link) {
+			return Button.i18nBundle.getText(LINK_ROLE_DESCRIPTION);
+		}
+
+		return "";
+	}
+
 	get effectiveBadgeDescriptionText() {
 		if (!this.shouldRenderBadge) {
 			return "";

packages/main/src/i18n/messagebundle.properties

@@ -85,6 +85,12 @@ BUTTON_BADGE_ONE_ITEM={0} item
 #XACT: ARIA announcement for the Button Badge with value more than 1 - "{0} items"
 BUTTON_BADGE_MANY_ITEMS={0} items
 
+#ACC: ARIA announcement for the Button role attribute
+BUTTON_ROLE_DESCRIPTION=Button
+
+#ACC: ARIA announcement for the Link role attribute
+LINK_ROLE_DESCRIPTION=Link
+
 #XACT: Text for Today item in CalendarLegend
 CAL_LEGEND_TODAY_TEXT=Today