diff --git a/packages/fiori/cypress/specs/ShellBarBranding.cy.tsx b/packages/fiori/cypress/specs/ShellBarBranding.cy.tsx index 3c9c124bba37..5634c2eccc44 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("[slot='branding']").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..7ada92b4581f 100644 --- a/packages/fiori/src/ShellBarBranding.ts +++ b/packages/fiori/src/ShellBarBranding.ts @@ -136,26 +136,34 @@ 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(); - } + private _getAnchor() { + return this.shadowRoot?.querySelector("a") as HTMLAnchorElement | null; + } + + _onclick(e: MouseEvent) { + this._activate(e); } _onkeydown(e: KeyboardEvent) { - if (isSpace(e)) { + if (isEnter(e) && !this.href) { + e.preventDefault(); + this._getAnchor()?.click(); + } else if (isSpace(e)) { e.preventDefault(); - return; } + } - if (isEnter(e)) { - this._fireClick(); + _onkeyup(e: KeyboardEvent) { + if (!isSpace(e)) { + return; } + + this._getAnchor()?.click(); } }