diff --git a/packages/main/cypress/specs/Icon.cy.tsx b/packages/main/cypress/specs/Icon.cy.tsx
index 687ed2e00069..5b2f791f6608 100644
--- a/packages/main/cypress/specs/Icon.cy.tsx
+++ b/packages/main/cypress/specs/Icon.cy.tsx
@@ -274,4 +274,64 @@ describe("Icon general interaction", () => {
.find(".ui5-icon-root")
.should("have.attr", "role", "img");
});
-});
\ No newline at end of file
+
+ it("Tests accessibilityInfo getter", () => {
+ const interactiveMode = "Interactive";
+ const imageMode = "Image";
+ const decorativeMode = "Decorative";
+ const accessibleName = "Test Icon";
+
+ // Test with Interactive mode
+ cy.mount(
+
+ );
+
+ 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(
+
+ );
+
+ 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(
+
+ );
+
+ 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;
+ });
+ });
+});
diff --git a/packages/main/src/Icon.ts b/packages/main/src/Icon.ts
index a44406ef717b..a032234d3adb 100644
--- a/packages/main/src/Icon.ts
+++ b/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();