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();