diff --git a/packages/base/src/Keys.ts b/packages/base/src/Keys.ts index 611665090c1e..729854ddcfcc 100644 --- a/packages/base/src/Keys.ts +++ b/packages/base/src/Keys.ts @@ -106,6 +106,10 @@ type KeyCodes = typeof KeyCodes[keyof typeof KeyCodes]; const isEnter = (event: KeyboardEvent): boolean => (event.key ? event.key === "Enter" : event.keyCode === KeyCodes.ENTER) && !hasModifierKeys(event); +const isEnterCtrl = (event: KeyboardEvent): boolean => (event.key ? event.key === "Enter" : event.keyCode === KeyCodes.ENTER) && checkModifierKeys(event, true, false, false); + +const isEnterAlt = (event: KeyboardEvent): boolean => (event.key ? event.key === "Enter" : event.keyCode === KeyCodes.ENTER) && checkModifierKeys(event, false, true, false); + const isEnterShift = (event: KeyboardEvent): boolean => (event.key ? event.key === "Enter" : event.keyCode === KeyCodes.ENTER) && checkModifierKeys(event, false, false, true); const isCtrl = (event: KeyboardEvent): boolean => checkModifierKeys(event, true, false, false); @@ -256,6 +260,8 @@ const isColon = (event: KeyboardEvent): boolean => ((event.key ? event.key === " export { isEnter, + isEnterCtrl, + isEnterAlt, isEnterShift, isCtrl, isSpace, diff --git a/packages/fiori/src/NavigationMenuItem.ts b/packages/fiori/src/NavigationMenuItem.ts index 0e5d7b73a171..eb02357b7bfb 100644 --- a/packages/fiori/src/NavigationMenuItem.ts +++ b/packages/fiori/src/NavigationMenuItem.ts @@ -5,7 +5,13 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import MenuItem from "@ui5/webcomponents/dist/MenuItem.js"; import type SideNavigationItemDesign from "./types/SideNavigationItemDesign.js"; import NavigationMenu from "./NavigationMenu.js"; -import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js"; +import { + isSpace, + isEnter, + isEnterShift, + isEnterCtrl, + isEnterAlt, +} from "@ui5/webcomponents-base/dist/Keys.js"; import type SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js"; // Templates @@ -167,7 +173,8 @@ class NavigationMenuItem extends MenuItem { e.preventDefault(); } - if (isEnter(e)) { + // "Enter" + "Meta" is missing since it is often reserved by the operating system or window manager + if (isEnter(e) || isEnterShift(e) || isEnterCtrl(e) || isEnterAlt(e)) { this._activate(e); } @@ -175,6 +182,7 @@ class NavigationMenuItem extends MenuItem { } _onkeyup(e: KeyboardEvent) { + // "Space" + modifier is often reserved by the operating system or window manager if (isSpace(e)) { this._activate(e); diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts index 5dd80faf7720..bd2fa018c7d5 100644 --- a/packages/fiori/src/SideNavigation.ts +++ b/packages/fiori/src/SideNavigation.ts @@ -17,10 +17,7 @@ import { isTablet, isCombi, } from "@ui5/webcomponents-base/dist/Device.js"; -import { - isSpace, - isEnter, -} from "@ui5/webcomponents-base/dist/Keys.js"; + import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js"; import type SideNavigationItemBase from "./SideNavigationItemBase.js"; import { isInstanceOfSideNavigationSelectableItemBase } from "./SideNavigationSelectableItemBase.js"; @@ -716,22 +713,6 @@ class SideNavigation extends UI5Element { return this._isOverflow; } - _onkeydownOverflow(e: KeyboardEvent) { - if (isSpace(e)) { - e.preventDefault(); - } - - if (isEnter(e)) { - this._handleOverflowClick(); - } - } - - _onkeyupOverflow(e: KeyboardEvent) { - if (isSpace(e)) { - this._handleOverflowClick(); - } - } - captureRef(ref: HTMLElement & { associatedItem?: UI5Element} | null) { if (ref) { ref.associatedItem = this; diff --git a/packages/fiori/src/SideNavigationItem.ts b/packages/fiori/src/SideNavigationItem.ts index 78bc732e3b9c..137ad4b6d060 100644 --- a/packages/fiori/src/SideNavigationItem.ts +++ b/packages/fiori/src/SideNavigationItem.ts @@ -9,6 +9,9 @@ import { isRight, isSpace, isEnter, + isEnterShift, + isEnterCtrl, + isEnterAlt, isMinus, isPlus, } from "@ui5/webcomponents-base/dist/Keys.js"; @@ -261,12 +264,14 @@ class SideNavigationItem extends SideNavigationSelectableItemBase { return; } + // "Space" + modifier is often reserved by the operating system or window manager if (this.unselectable && isSpace(e)) { this._toggle(); return; } - if (this.unselectable && isEnter(e)) { + // "Enter" + "Meta" is missing since it is often reserved by the operating system or window manager + if (this.unselectable && (isEnter(e) || isEnterShift(e) || isEnterCtrl(e) || isEnterAlt(e))) { this._toggle(); } diff --git a/packages/fiori/src/SideNavigationSelectableItemBase.ts b/packages/fiori/src/SideNavigationSelectableItemBase.ts index 8121113047f6..f570de7d790d 100644 --- a/packages/fiori/src/SideNavigationSelectableItemBase.ts +++ b/packages/fiori/src/SideNavigationSelectableItemBase.ts @@ -4,6 +4,9 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import { isSpace, isEnter, + isEnterShift, + isEnterCtrl, + isEnterAlt, isLeft, isRight, } from "@ui5/webcomponents-base/dist/Keys.js"; @@ -255,7 +258,8 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase { e.preventDefault(); } - if (isEnter(e)) { + // "Enter" + "Meta" is missing since it is often reserved by the operating system or window manager + if (isEnter(e) || isEnterShift(e) || isEnterCtrl(e) || isEnterAlt(e)) { this._activate(e); } @@ -269,6 +273,7 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase { } _onkeyup(e: KeyboardEvent) { + // "Space" + modifier is often reserved by the operating system or window manager if (isSpace(e)) { this._activate(e);