feat(ui5-li-custom): implement arrow key navigation for internal elements

Arrow Up/Down keys now navigate between same-index focusable elements
across list items when focus is inside the internal content of list items.
This allows users to navigate column-wise through structured list items.

Key features:
- Navigate between corresponding elements across items (e.g., first button
  to first button in next/previous item)
- Automatically skip items without focusable elements
- Works across ui5-li-group boundaries
- Preserves existing F2/F7/Tab navigation
- Only prevents default scroll when List handles the event (growing button)

Author: kgogov

packages/main/src/List.ts

@@ -989,8 +989,9 @@ class List extends UI5Element {
 		}
 
 		if (isDown(e)) {
-			this._handleDown();
-			e.preventDefault();
+			if (this._handleDown()) {
+				e.preventDefault();
+			}
 			return;
 		}
 
@@ -1169,10 +1170,10 @@ class List extends UI5Element {
 
 	_handleDown() {
 		if (!this.growsWithButton) {
-			return;
+			return false;
 		}
 
-		this._shouldFocusGrowingButton();
+		return this._shouldFocusGrowingButton();
 	}
 
 	_onfocusin(e: FocusEvent) {
@@ -1351,7 +1352,9 @@ class List extends UI5Element {
 
 		if (currentIndex !== -1 && currentIndex === lastIndex) {
 			this.focusGrowingButton();
+			return true;
 		}
+		return false;
 	}
 
 	getGrowingButton() {

packages/main/src/ListItem.ts

@@ -1,6 +1,6 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import {
-	isSpace, isEnter, isDelete, isF2, isF7,
+	isSpace, isEnter, isDelete, isF2, isF7, isUp, isDown,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
@@ -258,10 +258,23 @@ abstract class ListItem extends ListItemBase {
 	}
 
 	_onkeydown(e: KeyboardEvent) {
-		if ((isSpace(e) || isEnter(e)) && this._isTargetSelfFocusDomRef(e)) {
+		const isInternalElementFocused = this._isTargetSelfFocusDomRef(e);
+
+		if ((isSpace(e) || isEnter(e)) && isInternalElementFocused) {
 			return;
 		}
 
+		// Handle Arrow Up/Down navigation between internal elements
+		const isArrowKey = isUp(e) || isDown(e);
+
+		if (isInternalElementFocused && isArrowKey) {
+			const offset = isUp(e) ? -1 : 1;
+			if (this._navigateToAdjacentItem(offset)) {
+				e.preventDefault();
+				return;
+			}
+		}
+
 		super._onkeydown(e);
 
 		const itemActive = this.type === ListItemType.Active,
@@ -584,6 +597,37 @@ abstract class ListItem extends ListItemBase {
 			list._lastFocusedElementIndex = currentIndex;
 		}
 	}
+
+	_navigateToAdjacentItem(offset: -1 | 1): boolean {
+		const list = this._getList();
+		if (!list) {
+			return false;
+		}
+
+		const focusables = this._getFocusableElements();
+		const currentElementIndex = focusables.indexOf(getActiveElement() as HTMLElement);
+		if (currentElementIndex === -1) {
+			return false;
+		}
+
+		const allItems = list.getItems().filter(item => "hasConfigurableMode" in item && item.hasConfigurableMode) as ListItem[];
+		let itemIndex = allItems.indexOf(this as ListItem) + offset;
+
+		while (itemIndex >= 0 && itemIndex < allItems.length) {
+			const targetFocusables = allItems[itemIndex]._getFocusableElements();
+
+			if (targetFocusables.length > 0) {
+				const elementIndex = Math.min(currentElementIndex, targetFocusables.length - 1);
+				targetFocusables[elementIndex].focus();
+				list._lastFocusedElementIndex = elementIndex;
+				return true;
+			}
+
+			itemIndex += offset;
+		}
+
+		return false;
+	}
 }
 
 export default ListItem;

packages/main/src/ListItemCustom.ts

@@ -1,5 +1,5 @@
 import {
-	isTabNext, isTabPrevious, isF2, isF7,
+	isTabNext, isTabPrevious, isF2, isF7, isUp, isDown,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
@@ -57,25 +57,27 @@ class ListItemCustom extends ListItem {
 	declare accessibleName?: string;
 
 	_onkeydown(e: KeyboardEvent) {
-		const isTab = isTabNext(e) || isTabPrevious(e);
 		const isFocused = this.matches(":focus");
+		const shouldHandle = isFocused
+			|| isTabNext(e) || isTabPrevious(e)
+			|| isF2(e) || isF7(e)
+			|| isUp(e) || isDown(e);
 
-		if (!isTab && !isFocused && !isF2(e) && !isF7(e)) {
-			return;
+		if (shouldHandle) {
+			super._onkeydown(e);
 		}
-
-		super._onkeydown(e);
 	}
 
 	_onkeyup(e: KeyboardEvent) {
-		const isTab = isTabNext(e) || isTabPrevious(e);
 		const isFocused = this.matches(":focus");
+		const shouldHandle = isFocused
+			|| isTabNext(e) || isTabPrevious(e)
+			|| isF2(e) || isF7(e)
+			|| isUp(e) || isDown(e);
 
-		if (!isTab && !isFocused && !isF2(e) && !isF7(e)) {
-			return;
+		if (shouldHandle) {
+			super._onkeyup(e);
 		}
-
-		super._onkeyup(e);
 	}
 
 	get classes(): ClassMap {