fix(ui5-timeline): enhance keyboard navigation

packages/fiori/cypress/specs/Timeline.cy.tsx

@@ -246,18 +246,18 @@ describe("Timeline with growing mode", () => {
 			.last()
 			.should("be.focused");
 
-		cy.realPress("Tab");
+		cy.realPress("ArrowDown");
 
 		cy.get("@timeline")
 			.shadow()
 			.find("[id$='growing-btn']")
 			.should("be.focused");
 
-		cy.realPress("Tab");
+		cy.realPress("ArrowUp");
 
 		cy.get("@timeline")
 			.find("ui5-timeline-item")
-			.first()
+			.last()
 			.should("be.focused");
 	});
 });

packages/fiori/src/Timeline.ts

@@ -11,6 +11,10 @@ import {
 	isTabPrevious,
 	isSpace,
 	isEnter,
+	isUp,
+	isDown,
+	isLeft,
+	isRight,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
@@ -163,6 +167,9 @@ class Timeline extends UI5Element {
 	@query(".ui5-timeline-end-marker")
 	timelineEndMarker!: HTMLElement;
 
+	@query((`[id="ui5-timeline-growing-btn"]`))
+	growingButton!: HTMLElement;
+
 	@i18n("@ui5/webcomponents-fiori")
 	static i18nBundle: I18nBundle;
 
@@ -338,6 +345,18 @@ class Timeline extends UI5Element {
 	_onkeydown(e: KeyboardEvent) {
 		const target = e.target as ITimelineItem;
 
+		if (isDown(e) || isRight(e)) {
+			this._handleDown();
+			e.preventDefault();
+			return;
+		}
+
+		if (isUp(e) || isLeft(e)) {
+			this._handleUp(e);
+			e.preventDefault();
+			return;
+		}
+
 		if (target.nameClickable && !target.getFocusDomRef()!.matches(":has(:focus-within)")) {
 			return;
 		}
@@ -371,6 +390,44 @@ class Timeline extends UI5Element {
 		}
 	}
 
+	_handleDown() {
+		if (this.growsWithButton) {
+			this.focusGrowingButton();
+		}
+	}
+
+	focusGrowingButton() {
+		const items = this._navigableItems;
+		const lastIndex = items.length - 1;
+		const currentIndex = this._itemNavigation._currentIndex;
+
+		if (currentIndex !== -1 && currentIndex === lastIndex) {
+			this.growingButton?.focus();
+		}
+	}
+
+	_handleUp(e: KeyboardEvent) {
+		if (this.growingButton === e.target) {
+			const items = this._navigableItems;
+			const lastItem = items[items.length - 1];
+
+			this.focusItem(lastItem);
+
+			e.preventDefault();
+			e.stopImmediatePropagation();
+		}
+	}
+
+	/**
+	 * Focuses a list item and sets its tabindex to "0" via the ItemNavigation
+	 * @protected
+	 * @param item
+	 */
+	focusItem(item: ITimelineItem | ToggleButton) {
+		this._itemNavigation.setCurrentItem(item);
+		item.focus();
+	}
+
 	get _navigableItems() {
 		const navigatableItems: Array<ITimelineItem | ToggleButton> = [];
 

packages/fiori/src/TimelineTemplate.tsx

@@ -36,7 +36,7 @@ function moreRow(this: Timeline) {
 		<li class="ui5-timeline-list-item ui5-timeline-list-growing">
 			<div class="ui5-tli-icon-outer">
 				<Button icon={this.growingButtonIcon}
-					id={`${this._id}-growing-btn`}
+					id={"ui5-timeline-growing-btn"}
 					class={{
 						"ui5-timeline-growing-row-inner": true,
 						"ui5-timeline-growing-row-inner--active": this._loadMoreActive