feat(ui5-li-custom): maintain focus position with F7 across list items

F7 navigation now remembers the focused element position when
moving between list items. Pressing F7 focuses the element at
the same index that was previously focused in another item.

The List component stores a shared _lastFocusedElementIndex
property, and ListItem uses getTabbableElements to reliably
find focusable elements. Helper methods handle focusing by
index and updating the stored position.

Author: kgogov

packages/main/cypress/specs/List.cy.tsx

@@ -1353,6 +1353,47 @@ describe("List Tests", () => {
 		cy.get("[ui5-button]").last().should("be.focused");
 	});
 
+	it("keyboard handling on F7 maintains focus position across list items", () => {
+		cy.mount(
+			<List>
+				<ListItemCustom>
+					<Button>Item 1 - First</Button>
+					<Button>Item 1 - Second</Button>
+					<Button>Item 1 - Third</Button>
+				</ListItemCustom>
+				<ListItemCustom>
+					<Button>Item 2 - First</Button>
+					<Button>Item 2 - Second</Button>
+					<Button>Item 2 - Third</Button>
+				</ListItemCustom>
+			</List>
+		);
+
+		// Focus first list item
+		cy.get("[ui5-li-custom]").first().click();
+		cy.get("[ui5-li-custom]").first().should("be.focused");
+
+		// F7 to enter (should go to first button)
+		cy.realPress("F7");
+		cy.get("[ui5-button]").eq(0).should("be.focused");
+
+		// Tab to second button
+		cy.realPress("Tab");
+		cy.get("[ui5-button]").eq(1).should("be.focused");
+
+		// F7 to exit back to list item
+		cy.realPress("F7");
+		cy.get("[ui5-li-custom]").first().should("be.focused");
+
+		// Navigate to second list item with ArrowDown
+		cy.realPress("ArrowDown");
+		cy.get("[ui5-li-custom]").last().should("be.focused");
+
+		// F7 should focus the second button (same index as previous item)
+		cy.realPress("F7");
+		cy.get("[ui5-button]").eq(4).should("be.focused").and("contain", "Item 2 - Second");
+	});
+
 	it("keyboard handling on TAB when 2 level nested UI5Element is focused", () => {
 		cy.mount(
 			<div>

packages/main/src/List.ts

@@ -534,6 +534,7 @@ class List extends UI5Element {
 	_beforeElement?: HTMLElement | null;
 	_afterElement?: HTMLElement | null;
 	_startMarkerOutOfView: boolean = false;
+	_lastFocusedElementIndex?: number;
 
 	handleResizeCallback: ResizeObserverCallback;
 	onItemFocusedBound: (e: CustomEvent) => void;

packages/main/src/ListItem.ts

@@ -6,6 +6,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
+import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import type { AccessibilityAttributes, AriaRole, AriaHasPopup } from "@ui5/webcomponents-base";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
@@ -21,6 +22,7 @@ import ListItemBase from "./ListItemBase.js";
 import type RadioButton from "./RadioButton.js";
 import type CheckBox from "./CheckBox.js";
 import type { IButton } from "./Button.js";
+import type List from "./List.js";
 import {
 	DELETE,
 	ARIA_LABEL_LIST_ITEM_CHECKBOX,
@@ -200,12 +202,6 @@ abstract class ListItem extends ListItemBase {
 	@property()
 	mediaRange = "S";
 
-	/**
-	 * Stores the last focused element within the list item when navigating with F7.
-	 * @private
-	 */
-	_lastInnerFocusedElement?: HTMLElement;
-
 	/**
 	 * Defines the delete button, displayed in "Delete" mode.
 	 * **Note:** While the slot allows custom buttons, to match
@@ -521,24 +517,23 @@ abstract class ListItem extends ListItemBase {
 		return this.shadowRoot!.querySelector("li");
 	}
 
-	async _handleF7(e: KeyboardEvent) {
-		e.preventDefault(); // Prevent browser default behavior (F7 = Caret Browsing toggle)
+	_getList(): List | null {
+		return this.closest("[ui5-list]");
+	}
+
+	_handleF7(e: KeyboardEvent) {
+		e.preventDefault();
 
 		const focusDomRef = this.getFocusDomRef()!;
 		const activeElement = getActiveElement();
+		const list = this._getList();
 
 		if (activeElement === focusDomRef) {
-			// On list item - restore to stored element or go to first focusable
-			if (this._lastInnerFocusedElement) {
-				this._lastInnerFocusedElement.focus();
-			} else {
-				const firstFocusable = await getFirstFocusableElement(focusDomRef);
-				firstFocusable?.focus();
-				this._lastInnerFocusedElement = firstFocusable || undefined;
-			}
+			this._focusInternalElement(list);
 		} else {
-			// On internal element - store it and go back to list item
-			this._lastInnerFocusedElement = activeElement as HTMLElement;
+			if (activeElement) {
+				this._updateStoredFocusIndex(list, activeElement as HTMLElement);
+			}
 			focusDomRef.focus();
 		}
 	}
@@ -548,14 +543,47 @@ abstract class ListItem extends ListItemBase {
 		const activeElement = getActiveElement();
 
 		if (activeElement === focusDomRef) {
-			// On list item - always go to first focusable (no memory)
 			const firstFocusable = await getFirstFocusableElement(focusDomRef);
 			firstFocusable?.focus();
 		} else {
-			// On internal element - go back to list item
 			focusDomRef.focus();
 		}
 	}
+
+	_getFocusableElements(): HTMLElement[] {
+		const focusDomRef = this.getFocusDomRef()!;
+		return getTabbableElements(focusDomRef);
+	}
+
+	_focusInternalElement(list: List | null) {
+		const focusables = this._getFocusableElements();
+		if (!focusables.length) {
+			return;
+		}
+
+		const targetIndex = list?._lastFocusedElementIndex ?? 0;
+		const safeIndex = Math.min(targetIndex, focusables.length - 1);
+		const elementToFocus = focusables[safeIndex];
+
+		elementToFocus.focus();
+
+		if (list) {
+			list._lastFocusedElementIndex = safeIndex;
+		}
+	}
+
+	_updateStoredFocusIndex(list: List | null, activeElement: HTMLElement) {
+		if (!list) {
+			return;
+		}
+
+		const focusables = this._getFocusableElements();
+		const currentIndex = focusables.indexOf(activeElement);
+
+		if (currentIndex !== -1) {
+			list._lastFocusedElementIndex = currentIndex;
+		}
+	}
 }
 
 export default ListItem;

packages/main/test/pages/ListItemCustomF7.html

@@ -38,21 +38,22 @@ <h2>F7/F2 Key Test</h2>
 		<p><strong>F7 vs F2 Behavior:</strong></p>
 		<ul>
 			<li><strong>F2:</strong> Simple navigation - always goes to first focusable element</li>
-			<li><strong>F7:</strong> Smart navigation - remembers last focused element</li>
+			<li><strong>F7:</strong> Smart navigation - remembers last focused element position across items</li>
 		</ul>
 
 		<p><strong>Test Steps:</strong></p>
 		<ol>
-			<li>Click on a list item</li>
+			<li>Click on first list item</li>
 			<li>Press <strong>F7</strong> → should go to first button</li>
 			<li>Press <strong>TAB</strong> to move to second button</li>
 			<li>Press <strong>F7</strong> → should return to list item</li>
-			<li>Press <strong>F7</strong> again → should return to second button (memory working)</li>
+			<li>Press <strong>ArrowDown</strong> → should go to second list item</li>
+			<li>Press <strong>F7</strong> → should go to SECOND button (maintains position!)</li>
 			<li>Test <strong>F2</strong> → should always go to first button (no memory)</li>
 		</ol>
 	</div>
 
-	<ui5-list id="test-list">
+	<ui5-list id="test-list" header-text="List with Custom Items">
 		<ui5-li-custom>
 			<div class="buttons">
 				<ui5-button>First Button</ui5-button>