Skip to content

fix(ui5-icon): enable activation via screen reader virtual cursor #13156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dobrinyonkov merged 1 commit into from
Mar 5, 2026
Merged

fix(ui5-icon): enable activation via screen reader virtual cursor #13156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions packages/main/cypress/specs/Icon.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,24 +109,28 @@ describe("Icon general interaction", () => {
});
});

// Mouse click fires both native click and ui5-click for interactive icons
cy.get("@interactiveIcon").click();
cy.get("[ui5-input]").eq(0).should("have.prop", "value", "1");
cy.get("[ui5-input]").eq(1).should("have.prop", "value", "0");
cy.get("[ui5-input]").eq(1).should("have.prop", "value", "1");

// Enter key fires both native click and ui5-click for interactive icons
cy.get("@interactiveIcon").realPress("Enter");
cy.get("[ui5-input]").eq(0).should("have.prop", "value", "2");
cy.get("[ui5-input]").eq(1).should("have.prop", "value", "1");
cy.get("[ui5-input]").eq(1).should("have.prop", "value", "2");

// Space key fires both native click and ui5-click for interactive icons
cy.get("@interactiveIcon").realPress("Space");
cy.get("[ui5-input]").eq(0).should("have.prop", "value", "3");
cy.get("[ui5-input]").eq(1).should("have.prop", "value", "2");
cy.get("[ui5-input]").eq(1).should("have.prop", "value", "3");

// Non-interactive icon: mouse click fires native click but NOT ui5-click
cy.get("@nonInteractiveIcon").click();
cy.get("[ui5-input]").eq(2).should("have.prop", "value", "1");
cy.get("[ui5-input]").eq(3).should("have.prop", "value", "0");

cy.get("@interactiveClickStub").should("have.been.calledThrice");
cy.get("@interactiveUI5ClickStub").should("have.been.calledTwice");
cy.get("@interactiveUI5ClickStub").should("have.been.calledThrice");

cy.get("@nonInteractiveClickStub").should("have.been.calledOnce");
cy.get("@nonInteractiveUI5ClickStub").should("not.have.been.called");
Expand Down
19 changes: 15 additions & 4 deletions packages/main/src/Icon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,6 @@ const ICON_NOT_FOUND = "ICON_NOT_FOUND";
* ### Keyboard Handling
*
* - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.
* - [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.
*
* ### ES6 Module Import
*
Expand All @@ -109,9 +108,10 @@ const ICON_NOT_FOUND = "ICON_NOT_FOUND";
styles: iconCss,
})
/**
* Fired on mouseup, `SPACE` and `ENTER`.
* - on mouse click, the icon fires native `click` event
* - on `SPACE` and `ENTER`, the icon fires custom `click` event
* Fired when the component is activated by mouse/touch, keyboard (Enter or Space),
* or screen reader virtual cursor activation.
*
* **Note:** The event will not be fired if the `mode` property is set to `Decorative` or `Image`.
* @public
* @since 2.11.0
*/
Expand Down Expand Up @@ -224,6 +224,17 @@ class Icon extends UI5Element implements IIcon {
customTemplate?: object;
customTemplateAsString?: string;

_onclick(e: MouseEvent) {
if (this.mode !== IconMode.Interactive) {
return;
}

// prevents the native browser "click" event from firing
e.stopImmediatePropagation();

this.fireDecoratorEvent("click");
}

_onkeydown(e: KeyboardEvent) {
if (this.mode !== IconMode.Interactive) {
return;
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/IconTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export default function IconTemplate(this: Icon) {
xmlns="http://www.w3.org/2000/svg"
onKeyDown={this._onkeydown}
onKeyUp={this._onkeyup}
onClick={this._onclick}
>
{ this.hasIconTooltip &&
<title id={`${this._id}-tooltip`} > {this.effectiveAccessibleName} </title>
Expand Down
Loading