feat(ui5-menu): Enhance keyboard navigation

packages/main/cypress/specs/Menu.cy.ts

@@ -456,5 +456,83 @@ describe("Menu interaction", () => {
 				.find("[ui5-responsive-popover]")
 				.should("have.attr", "accessible-name", "Select an option from the menu");
 		});
+
+		it("Menu items - navigation in endContent", () => {
+			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			<ui5-menu id="menu" opener="btnOpen">
+				<ui5-menu-item id="item1" text="Item 1" loading-delay="500" loading></ui5-menu-item>
+				<ui5-menu-item id="item2" text="Item 2">
+					<ui5-button id="newLock" slot="endContent" icon="locked" design="Transparent"></ui5-button>
+					<ui5-button id="newUnlock" slot="endContent" icon="unlocked" design="Transparent"></ui5-button>
+					<ui5-button id="newFavorite" slot="endContent" icon="favorite" design="Transparent"></ui5-button>
+				</ui5-menu-item>
+				<ui5-menu-item text="Item3" additional-text="Ctrl+F" icon="add-folder" ></ui5-menu-item>
+			</ui5-menu>`);
+
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
+			cy.get("[ui5-menu] > [ui5-menu-item]")
+				.as("items");
+
+			cy.realPress("{downarrow}");
+
+			cy.get("@items")
+				.eq(1)
+				.should("be.focused");
+
+			cy.realPress("{rightarrow}");
+
+			cy.get("@items")
+				.eq(1)
+				.get("[ui5-button]")
+				.as("endContent");
+
+			cy.get("@endContent")
+				.eq(1)
+				.should("be.focused");
+
+			cy.realPress("{rightarrow}");
+
+			cy.get("@endContent")
+				.eq(2)
+				.should("be.focused");
+
+			cy.realPress("{rightarrow}");
+
+			cy.get("@endContent")
+				.eq(3)
+				.should("be.focused");
+
+			cy.realPress("{rightarrow}");
+
+			cy.get("@endContent")
+				.eq(3)
+				.should("be.focused");
+
+			cy.realPress("{leftarrow}");
+
+			cy.get("@endContent")
+				.eq(2)
+				.should("be.focused");
+
+			cy.realPress("{leftarrow}");
+
+			cy.get("@endContent")
+				.eq(1)
+				.should("be.focused");
+
+			cy.realPress("{leftarrow}");
+
+			cy.get("@endContent")
+				.eq(1)
+				.should("be.focused");
+
+			cy.realPress("{downarrow}");
+
+			cy.get("@items")
+				.eq(2)
+				.should("be.focused");
+		});
 	});
 });

packages/main/src/Menu.ts

@@ -7,6 +7,9 @@ import {
 	isLeft,
 	isRight,
 	isEnter,
+	isTabNext,
+	isDown,
+	isUp,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import {
 	isPhone,
@@ -356,15 +359,18 @@ class Menu extends UI5Element {
 	}
 
 	_itemKeyDown(e: KeyboardEvent) {
-		if (!isLeft(e) && !isRight(e)) {
-			return;
+		if (isTabNext(e)) {
+			e.preventDefault();
+			e.stopImmediatePropagation();
 		}
 
 		const shouldCloseMenu = this.isRtl ? isRight(e) : isLeft(e);
 		const shouldOpenMenu = this.isRtl ? isLeft(e) : isRight(e);
 		const item = e.target as MenuItem;
 		const parentElement = item.parentElement as MenuItem;
 
+		const menuItem = parentElement.hasAttribute("ui5-menu-item") ? parentElement : item;
+
 		if (isEnter(e)) {
 			e.preventDefault();
 		}
@@ -375,6 +381,24 @@ class Menu extends UI5Element {
 			parentElement.selected = false;
 			(parentElement._popover.opener as HTMLElement)?.focus();
 		}
+		if (!menuItem.hasAttribute("ui5-menu-item")) {
+			return;
+		}
+		if (isUp(e)) {
+			this._handleNextOrPreviousItem(menuItem);
+		} else if (isDown(e)) {
+			this._handleNextOrPreviousItem(menuItem, true);
+		} else if (isLeft(e) || isRight(e)) {
+			menuItem._itemKeyDown(e);
+		}
+	}
+
+	_handleNextOrPreviousItem(menuItem: MenuItem, isNext?: boolean) {
+		const currentIndex = this._menuItems.indexOf(menuItem);
+		const nextItem = isNext ? this._menuItems[currentIndex + 1] : this._menuItems[currentIndex - 1];
+		const focusItem = nextItem || this._menuItems[currentIndex];
+
+		focusItem.focus();
 	}
 
 	_beforePopoverOpen(e: CustomEvent) {

packages/main/src/MenuItem.ts

@@ -7,6 +7,12 @@ import AriaHasPopup from "@ui5/webcomponents-base/dist/types/AriaHasPopup.js";
 import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 import "@ui5/webcomponents-icons/dist/nav-back.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import {
+	isLeft,
+	isRight,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import type { ListItemAccessibilityAttributes } from "./ListItem.js";
 import ListItem from "./ListItem.js";
 import ResponsivePopover from "./ResponsivePopover.js";
@@ -201,6 +207,44 @@ class MenuItem extends ListItem implements IMenuItem {
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
 
+	_itemNavigation: ItemNavigation;
+	_lastFocusedItemIndex: number | null;
+
+	constructor() {
+		super();
+
+		this._itemNavigation = new ItemNavigation(this, {
+			getItemsCallback: () => this._navigableItems,
+		});
+		this._lastFocusedItemIndex = null;
+	}
+
+	get _navigableItems() {
+		return [...this.endContent] as Array<HTMLElement>;
+	}
+
+	_itemKeyDown(e: KeyboardEvent) {
+		if (isLeft(e)) {
+			this._handleNextOrPreviousItem(e);
+		} else if (isRight(e)) {
+			this._handleNextOrPreviousItem(e, true);
+		}
+	}
+
+	_handleNextOrPreviousItem(e: KeyboardEvent, isNext?: boolean) {
+		const target = e.target as MenuItem | HTMLElement;
+
+		const nextTargetIndex = isNext ? this._navigableItems.indexOf(target) + 1 : this._navigableItems.indexOf(target) - 1;
+		const nextTarget = this._navigableItems[nextTargetIndex];
+
+		if (nextTarget) {
+			e.preventDefault();
+
+			this._itemNavigation.setCurrentItem(nextTarget);
+			this._itemNavigation._focusCurrentItem();
+		}
+	}
+
 	get placement(): `${PopoverPlacement}` {
 		return this.isRtl ? "Start" : "End";
 	}
@@ -259,6 +303,8 @@ class MenuItem extends ListItem implements IMenuItem {
 		this._menuItems.forEach(item => {
 			item._siblingsWithIcon = siblingsWithIcon;
 		});
+
+		this._itemNavigation._navigationMode = NavigationMode.Horizontal;
 	}
 
 	get _focusable() {