feat(ui5-icon): implement accessibilityInfo getter

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

@@ -274,4 +274,64 @@ describe("Icon general interaction", () => {
             .find(".ui5-icon-root")
             .should("have.attr", "role", "img");
     });
-});
+
+    it("Tests accessibilityInfo getter", () => {
+        const interactiveMode = "Interactive";
+        const imageMode = "Image";
+        const decorativeMode = "Decorative";
+        const accessibleName = "Test Icon";
+
+        // Test with Interactive mode
+        cy.mount(
+            <Icon
+                name="add-equipment"
+                mode={interactiveMode}
+                accessibleName={accessibleName}
+            />
+        );
+
+        cy.get("[ui5-icon][mode='Interactive']").then($icon => {
+            const icon = $icon[0] as any;
+            const accessibilityInfo = icon.accessibilityInfo;
+
+            // For Interactive mode, accessibilityInfo should have role and description
+            expect(accessibilityInfo).to.not.be.undefined;
+            expect(accessibilityInfo.role).to.equal("button");
+            expect(accessibilityInfo.description).to.equal(accessibleName);
+        });
+
+        // Test with Decorative mode
+        cy.mount(
+            <Icon
+                name="add-equipment"
+                mode={decorativeMode}
+                accessibleName={accessibleName}
+            />
+        );
+
+        cy.get("[ui5-icon][mode='Decorative']").then($icon => {
+            const icon = $icon[0] as any;
+            const accessibilityInfo = icon.accessibilityInfo;
+
+            // For Decorative mode, accessibilityInfo should be undefined
+            expect(accessibilityInfo).to.be.undefined;
+        });
+
+        // Test with Image mode
+        cy.mount(
+            <Icon
+                name="add-equipment"
+                mode={imageMode}
+                accessibleName={accessibleName}
+            />
+        );
+
+        cy.get("[ui5-icon][mode='Image']").then($icon => {
+            const icon = $icon[0] as any;
+            const accessibilityInfo = icon.accessibilityInfo;
+
+            // For Image mode, accessibilityInfo should be undefined
+            expect(accessibilityInfo).to.be.undefined;
+        });
+    });
+});

packages/main/src/Icon.ts

@@ -3,6 +3,7 @@ import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
 import type { IconData, UnsafeIconData } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import { getIconData, getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -327,6 +328,16 @@ class Icon extends UI5Element implements IIcon {
 	get hasIconTooltip() {
 		return this.showTooltip && this.effectiveAccessibleName;
 	}
+
+	get accessibilityInfo() {
+		if (this.mode === IconMode.Interactive) {
+			return {
+				role: this.effectiveAccessibleRole as AriaRole,
+				description: this.effectiveAccessibleName,
+			};
+		}
+		return undefined;
+	}
 }
 
 Icon.define();