feat(ui5-timeline): improve keyboard handling (#12021)

ui5-timeline keyboard handling improvements:

- press F2 on focused timeline item will move the focus to the first interactive element inside the timeline item
- press F2 on focused interactive element inside timeline item will move the focus to the parent timeline item
- press Tab on interactive element inside timeline item will move the focus to the next interactive element inside the same timeline item if such element exists otherwise will move the focus to closest interactive element in timeline chain

Author: GDamyanov

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

@@ -7,6 +7,8 @@ import messageInformation from "@ui5/webcomponents-icons/dist/message-informatio
 import Label from "@ui5/webcomponents/dist/Label.js";
 import Avatar from "@ui5/webcomponents/dist/Avatar.js";
 import UI5Element from "@ui5/webcomponents-base";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import Input from "@ui5/webcomponents/dist/Input.js";
 
 function Sample() {
 	return <Timeline layout="Vertical" accessibleName="vertical" id="timelineAccName">
@@ -133,7 +135,9 @@ describe("Timeline with group items interactions", () => {
 		cy.get("@currentGroupButton")
 			.realClick();
 
-		cy.realPress("Tab");
+		cy.realPress("F2");
+
+		cy.realPress("ArrowDown");
 
 		cy.get("[ui5-timeline]")
 			.find("[ui5-timeline-group-item][group-name='Meetings']")
@@ -263,6 +267,113 @@ describe("Timeline with growing mode", () => {
 	});
 });
 
+describe("Keyboard interactions", () => {
+	it("F2 should move the focus to interactive items and then should revert the focus to parent timeline item", () => {
+		cy.mount(
+			<Timeline>
+				<TimelineItem  titleText="first item" subtitleText="20.02.2017 11:30" >
+					<Button id="button" title="Click me"></Button>
+				</TimelineItem>
+				<TimelineItem titleText="coming up" subtitleText="20.02.2017 11:30"></TimelineItem>
+				<TimelineItem titleText="coming up" subtitleText="20.02.2017 11:30" ></TimelineItem>
+			</Timeline>
+		);
+
+		cy.get("[ui5-timeline]")
+			.as("timeline");
+
+		cy.get("@timeline")
+			.find("ui5-timeline-item")
+			.first()
+			.as("firstItem")
+			.realClick();
+
+		cy.get("@firstItem")
+			.should("be.focused");
+
+		cy.realPress("F2");
+
+		cy.get("#button")
+			.should("be.focused");
+
+		cy.realPress("F2");
+
+		cy.get("@firstItem")
+			.should("be.focused");
+	});
+
+	it("should move the focus to the next interactive item inside timeline item when Tab is pressed", () => {
+		cy.mount(
+			<Timeline>
+				<TimelineItem  titleText="first item" subtitleText="20.02.2017 11:30" >
+					<Button id="button1" title="Click me"></Button>
+					<Button id="button2" title="Click me"></Button>
+				</TimelineItem>
+				<TimelineItem titleText="coming up" subtitleText="20.02.2017 11:30"></TimelineItem>
+				<TimelineItem titleText="coming up" subtitleText="20.02.2017 11:30" ></TimelineItem>
+			</Timeline>
+		);
+
+		cy.get("[ui5-timeline]")
+			.as("timeline");
+
+		cy.get("@timeline")
+			.find("ui5-timeline-item")
+			.first()
+			.as("firstItem")
+			.realClick();
+
+		cy.get("@firstItem")
+			.should("be.focused");
+
+		cy.realPress("F2");
+
+		cy.get("#button1")
+			.should("be.focused");
+
+		cy.realPress("Tab");
+
+		cy.get("#button2")
+			.should("be.focused");
+	});
+
+	it("should move the focus to interactive element inside next timeline item with interactive elements when pressing Tab", () => {
+		cy.mount(
+			<Timeline>
+				<TimelineItem  titleText="first item" subtitleText="20.02.2017 11:30" >
+					<Button id="button1" title="Click me"></Button>
+				</TimelineItem>
+				<TimelineItem titleText="coming up" subtitleText="20.02.2017 11:30"></TimelineItem>
+				<TimelineItem titleText="coming up" subtitleText="20.02.2017 11:30">
+					<Button id="button2" title="Click me"></Button>
+				</TimelineItem>
+			</Timeline>
+		);
+
+		cy.get("[ui5-timeline]")
+			.as("timeline");
+
+		cy.get("@timeline")
+			.find("ui5-timeline-item")
+			.first()
+			.as("firstItem")
+			.realClick();
+
+		cy.get("@firstItem")
+			.should("be.focused");
+
+		cy.realPress("F2");
+
+		cy.get("#button1")
+			.should("be.focused");
+
+		cy.realPress("Tab");
+
+		cy.get("#button2")
+			.should("be.focused");
+	});
+});
+
 describe("Accessibility", () => {
 	beforeEach(() => {
 		cy.mount(

packages/fiori/src/Timeline.ts

@@ -7,14 +7,13 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import {
-	isTabNext,
-	isTabPrevious,
 	isSpace,
 	isEnter,
 	isUp,
 	isDown,
 	isLeft,
 	isRight,
+	isF2,
 } 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";
@@ -33,6 +32,8 @@ import TimelineCss from "./generated/themes/Timeline.css.js";
 import TimelineLayout from "./types/TimelineLayout.js";
 // Mode
 import TimelineGrowingMode from "./types/TimelineGrowingMode.js";
+import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 
 /**
  * Interface for components that may be slotted inside `ui5-timeline` as items
@@ -353,8 +354,10 @@ class Timeline extends UI5Element {
 		}
 	}
 
-	_onkeydown(e: KeyboardEvent) {
-		const target = e.target as ITimelineItem;
+	async _onkeydown(e: KeyboardEvent) {
+		const target = e.target as ITimelineItem,
+			targetfocusDomRef = target?.getFocusDomRef(),
+			shouldHandleCustomArrowNavigation = targetfocusDomRef === this.getFocusDomRef() || target === this.growingButton;
 
 		if (isDown(e) || isRight(e)) {
 			this._handleDown();
@@ -368,36 +371,22 @@ class Timeline extends UI5Element {
 			return;
 		}
 
-		if (target.nameClickable && !target.getFocusDomRef()!.matches(":has(:focus-within)")) {
-			return;
-		}
-
-		if (isTabNext(e)) {
-			this._handleNextOrPreviousItem(e, true);
-		} else if (isTabPrevious(e)) {
-			this._handleNextOrPreviousItem(e);
-		}
-	}
-
-	_handleNextOrPreviousItem(e: KeyboardEvent, isNext?: boolean) {
-		const target = e.target as ITimelineItem | ToggleButton;
-		let updatedTarget = target;
-
-		if ((target as ITimelineItem).isGroupItem) {
-			updatedTarget = target.shadowRoot!.querySelector<ToggleButton>("[ui5-toggle-button]")!;
-		}
-
-		const nextTargetIndex = isNext ? this._navigableItems.indexOf(updatedTarget) + 1 : this._navigableItems.indexOf(updatedTarget) - 1;
-		const nextTarget = this._navigableItems[nextTargetIndex];
+		if (isF2(e)) {
+			e.stopImmediatePropagation();
+			const activeElement = getActiveElement();
+			const focusDomRef = this.getFocusDomRef();
 
-		if (!nextTarget) {
-			return;
-		}
+			if (!focusDomRef) {
+				return;
+			}
 
-		if (nextTarget) {
-			e.preventDefault();
-			nextTarget.focus();
-			this._itemNavigation.setCurrentItem(nextTarget);
+			if (activeElement === focusDomRef) {
+				const firstFocusable = await getFirstFocusableElement(focusDomRef);
+				firstFocusable?.focus();
+			} else {
+				const parentItem = (e.target as HTMLElement)?.closest("ui5-timeline-item") as HTMLElement;
+				parentItem?.focus();
+			}
 		}
 	}