diff --git a/packages/main/cypress/specs/Icon.cy.tsx b/packages/main/cypress/specs/Icon.cy.tsx
index 687ed2e00069..0eb1bddf06c5 100644
--- a/packages/main/cypress/specs/Icon.cy.tsx
+++ b/packages/main/cypress/specs/Icon.cy.tsx
@@ -274,4 +274,68 @@ 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, type and description
+ expect(accessibilityInfo).to.not.be.undefined;
+ expect(accessibilityInfo.role).to.equal("button");
+ expect(accessibilityInfo.type).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 have role, type and description
+ expect(accessibilityInfo).to.not.be.undefined;
+ expect(accessibilityInfo.role).to.equal("img");
+ expect(accessibilityInfo.type).to.equal("Image");
+ expect(accessibilityInfo.description).to.equal(accessibleName);
+ });
+ });
+});
diff --git a/packages/main/src/Icon.ts b/packages/main/src/Icon.ts
index a44406ef717b..8d0c91fc1261 100644
--- a/packages/main/src/Icon.ts
+++ b/packages/main/src/Icon.ts
@@ -3,10 +3,13 @@ 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";
import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
@@ -14,6 +17,8 @@ import IconTemplate from "./IconTemplate.js";
import type IconDesign from "./types/IconDesign.js";
import IconMode from "./types/IconMode.js";
+import { ICON_ARIA_TYPE_IMAGE, ICON_ARIA_TYPE_INTERACTIVE } from "./generated/i18n/i18n-defaults.js";
+
// Styles
import iconCss from "./generated/themes/Icon.css.js";
@@ -117,6 +122,10 @@ class Icon extends UI5Element implements IIcon {
eventDetails!: {
click: void
}
+
+ @i18n("@ui5/webcomponents")
+ static i18nBundle: I18nBundle;
+
/**
* Defines the component semantic design.
* @default "Default"
@@ -327,6 +336,29 @@ class Icon extends UI5Element implements IIcon {
get hasIconTooltip() {
return this.showTooltip && this.effectiveAccessibleName;
}
+
+ _getAriaTypeDescription() {
+ switch (this.mode) {
+ case IconMode.Interactive:
+ return Icon.i18nBundle.getText(ICON_ARIA_TYPE_INTERACTIVE);
+ case IconMode.Image:
+ return Icon.i18nBundle.getText(ICON_ARIA_TYPE_IMAGE);
+ default:
+ return "";
+ }
+ }
+
+ get accessibilityInfo() {
+ if (this.mode === IconMode.Decorative) {
+ return undefined;
+ }
+
+ return {
+ role: this.effectiveAccessibleRole as AriaRole,
+ type: this._getAriaTypeDescription(),
+ description: this.effectiveAccessibleName,
+ };
+ }
}
Icon.define();
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index f5779d84beb6..62454d372ae0 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -933,3 +933,9 @@ DYNAMIC_DATE_RANGE_NEXT_COMBINED_TEXT=Next X {0} (included)
#XFLD: Suffix text for included date range options.
DYNAMIC_DATE_RANGE_INCLUDED_TEXT=(included)
+
+#XACT: ARIA announcement for icon type image
+ICON_ARIA_TYPE_IMAGE=Image
+
+#XACT: ARIA announcement for icon type interactive
+ICON_ARIA_TYPE_INTERACTIVE=Button
\ No newline at end of file