fix(ui5-list): enable forms mode navigation

packages/fiori/src/NotificationListItemBase.ts

@@ -2,7 +2,6 @@ import { isSpace, isF2 } from "@ui5/webcomponents-base/dist/Keys.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
 import { getEventMark } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
@@ -99,12 +98,6 @@ class NotificationListItemBase extends ListItemBase {
 		return this.getFocusDomRef();
 	}
 
-	shouldForwardTabAfter() {
-		const aContent = getTabbableElements(this.getHeaderDomRef()!);
-
-		return aContent.length === 0 || (aContent[aContent.length - 1] === getActiveElement());
-	}
-
 	static async onDefine() {
 		NotificationListItemBase.i18nFioriBundle = await getI18nBundle("@ui5/webcomponents-fiori");
 	}

packages/main/src/List.ts

@@ -28,6 +28,8 @@ import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
 import Orientation from "@ui5/webcomponents-base/dist/types/Orientation.js";
 import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
+import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import ListSelectionMode from "./types/ListSelectionMode.js";
 import ListGrowingMode from "./types/ListGrowingMode.js";
 import type ListAccessibleRole from "./types/ListAccessibleRole.js";
@@ -546,8 +548,6 @@ class List extends UI5Element {
 
 		this._handleResize = this.checkListInViewport.bind(this);
 
-		this._handleResize = this.checkListInViewport.bind(this);
-
 		// Indicates the List bottom most part has been detected by the IntersectionObserver
 		// for the first time.
 		this.initialIntersection = true;
@@ -893,11 +893,6 @@ class List extends UI5Element {
 	_onkeydown(e: KeyboardEvent) {
 		if (isCtrl(e)) {
 			this._moveItem(e.target as ListItemBase, e);
-			return;
-		}
-
-		if (isTabNext(e)) {
-			this._handleTabNext(e);
 		}
 	}
 
@@ -995,31 +990,6 @@ class List extends UI5Element {
 		this.fireEvent("load-more");
 	}
 
-	/*
-	* KEYBOARD SUPPORT
-	*/
-	_handleTabNext(e: KeyboardEvent) {
-		let lastTabbableEl;
-		const target = getNormalizedTarget(e.target as HTMLElement);
-
-		if (!lastTabbableEl) {
-			return;
-		}
-
-		if (lastTabbableEl === target) {
-			if (this.getFirstItem(x => x.selected && x._focusable)) {
-				this.focusFirstSelectedItem();
-			} else if (this.getPreviouslyFocusedItem()) {
-				this.focusPreviouslyFocusedItem();
-			} else {
-				this.focusFirstItem();
-			}
-
-			e.stopImmediatePropagation();
-			e.preventDefault();
-		}
-	}
-
 	_onfocusin(e: FocusEvent) {
 		const target = getNormalizedTarget(e.target as HTMLElement);
 		// If the focusin event does not origin from one of the 'triggers' - ignore it.
@@ -1218,13 +1188,30 @@ class List extends UI5Element {
 	}
 
 	onForwardBefore(e: CustomEvent) {
+		const activeElement = getActiveElement() as HTMLElement;
+		const item = e.detail.item as ListItemBase;
+		const isFirstItem = this.getItems().indexOf(item) === 0;
+		const isFirstTabbable = getTabbableElements(item).shift() === getActiveElement();
+		const isItemFocused = item.getFocusDomRef() === activeElement;
+
 		this.setPreviouslyFocusedItem(e.target as ListItemBase);
-		this.focusBeforeElement();
-		e.stopPropagation();
+
+		if (isItemFocused && (isFirstItem && !isFirstTabbable)) {
+			this.focusBeforeElement();
+			e.stopPropagation();
+		}
 	}
 
 	onForwardAfter(e: CustomEvent) {
-		this.setPreviouslyFocusedItem(e.target as ListItemBase);
+		const item = e.detail.item as ListItemBase;
+		const isLastItem = this.getItems().indexOf(item) === this.getItems().length - 1;
+		const isLastTabbable = isLastItem && getTabbableElements(item).pop() === getActiveElement();
+
+		this.setPreviouslyFocusedItem(item);
+
+		if (!isLastTabbable) {
+			return;
+		}
 
 		if (!this.growsWithButton) {
 			this.focusAfterElement();

packages/main/src/ListItem.ts

@@ -1,7 +1,7 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import { getEventMark } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
 import {
-	isSpace, isEnter, isDelete, isF2,
+	isSpace, isEnter, isDelete, isF2, isF7,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -262,7 +262,7 @@ abstract class ListItem extends ListItemBase {
 			this.activate();
 		}
 
-		if (isF2(e)) {
+		if (isF2(e) || isF7(e)) {
 			const activeElement = getActiveElement();
 			const focusDomRef = this.getFocusDomRef()!;
 

packages/main/src/ListItemBase.ts

@@ -5,15 +5,13 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
-import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
 	isEnter,
 	isSpace,
 	isTabNext,
 	isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import { getEventMark } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
 
 // Styles
@@ -165,29 +163,13 @@ class ListItemBase extends UI5Element implements ITabbable {
 	}
 
 	_handleTabNext(e: KeyboardEvent) {
-		if (this.shouldForwardTabAfter()) {
-			if (!this.fireEvent("_forward-after", {}, true)) {
-				e.preventDefault();
-			}
+		if (!this.fireEvent("_forward-after", { item: this, target: e.target }, true)) {
+			e.preventDefault();
 		}
 	}
 
 	_handleTabPrevious(e: KeyboardEvent) {
-		const target = e.target as HTMLElement;
-
-		if (this.shouldForwardTabBefore(target)) {
-			this.fireEvent("_forward-before");
-		}
-	}
-
-	/**
-	 * Determines if th current list item either has no tabbable content or
-	 * [Tab] is performed onto the last tabbale content item.
-	 */
-	shouldForwardTabAfter() {
-		const aContent = getTabbableElements(this.getFocusDomRef()!);
-
-		return aContent.length === 0 || (aContent[aContent.length - 1] === getActiveElement());
+		this.fireEvent("_forward-before", { item: this, target: e.target });
 	}
 
 	/**
@@ -223,13 +205,7 @@ class ListItemBase extends UI5Element implements ITabbable {
 	}
 
 	get _effectiveTabIndex() {
-		if (!this._focusable) {
-			return -1;
-		}
-		if (this.selected) {
-			return 0;
-		}
-		return this.forcedTabIndex;
+		return -1;
 	}
 }