diff --git a/packages/fiori/cypress/specs/ShellBarBranding.cy.tsx b/packages/fiori/cypress/specs/ShellBarBranding.cy.tsx index 3c9c124bba37..45937f52e853 100644 --- a/packages/fiori/cypress/specs/ShellBarBranding.cy.tsx +++ b/packages/fiori/cypress/specs/ShellBarBranding.cy.tsx @@ -109,4 +109,21 @@ describe("ShellBarBranding", () => { .should("have.attr", "tabIndex", "0"); }); }); + + it("fires click event on Enter and Space", () => { + basicTemplate(); + + cy.get("#shellbarBranding").then(branding => { + branding.get(0).addEventListener("ui5-click", cy.stub().as("brandingClick")); + }); + + cy.get("@shellbarBranding") + .find("a") + .focus() + .realPress("Enter") + .realPress("Space"); + + cy.get("@brandingClick") + .should("have.been.calledTwice"); + }); }); diff --git a/packages/fiori/src/ShellBarBranding.ts b/packages/fiori/src/ShellBarBranding.ts index 5809f854c162..8566fc5396c4 100644 --- a/packages/fiori/src/ShellBarBranding.ts +++ b/packages/fiori/src/ShellBarBranding.ts @@ -136,25 +136,35 @@ class ShellBarBranding extends UI5Element { this.fireDecoratorEvent("click"); } - _onclick(e: MouseEvent) { + private _activate(e: Event) { e.stopPropagation(); this._fireClick(); } - _onkeyup(e: KeyboardEvent) { - if (isSpace(e)) { - this._fireClick(); - } + _onclick(e: MouseEvent) { + this._activate(e); } _onkeydown(e: KeyboardEvent) { - if (isSpace(e)) { + if (isEnter(e) && !this.href) { + this._activate(e); + e.preventDefault(); + } else if (isSpace(e)) { e.preventDefault(); + } + } + + _onkeyup(e: KeyboardEvent) { + if (!isSpace(e)) { return; } - if (isEnter(e)) { - this._fireClick(); + this._activate(e); + + if (this.href && !e.defaultPrevented) { + const customEvent = new MouseEvent("click"); + customEvent.stopImmediatePropagation(); + this.getDomRef()!.dispatchEvent(customEvent); } } }