fix(ui5-timeline): implement arrows navigation for inner elements (#12033)

fixes #11785

Author: GDamyanov

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

@@ -7,6 +7,7 @@ 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 Input from "@ui5/webcomponents/dist/Input.js";
 
 function Sample() {
 	return <Timeline layout="Vertical" accessibleName="vertical" id="timelineAccName">
@@ -261,6 +262,41 @@ describe("Timeline with growing mode", () => {
 			.last()
 			.should("be.focused");
 	});
+
+	it("Arrows navigation should work only on focused item", () => {
+		cy.mount(
+			<Timeline>
+				<TimelineItem titleText="first item"></TimelineItem>
+				<TimelineItem titleText="second item">
+					<Input id="input" />
+				</TimelineItem>
+				<TimelineItem titleText="last item"></TimelineItem>
+			</Timeline>
+		);
+
+		cy.get("[ui5-timeline]")
+			.as("timeline");
+
+		cy.get("#input")
+			.realClick();
+
+		cy.realPress("ArrowDown");
+
+		cy.get("@timeline")
+			.find("ui5-timeline-item")
+			.last()
+			.should("not.be.focused");
+
+		cy.get("#input")
+			.realClick();
+
+		cy.realPress("ArrowUp");
+
+		cy.get("@timeline")
+			.find("ui5-timeline-item")
+			.first()
+			.should("not.be.focused");
+	});
 });
 
 describe("Accessibility", () => {

packages/fiori/src/Timeline.ts

@@ -354,15 +354,17 @@ class Timeline extends UI5Element {
 	}
 
 	_onkeydown(e: KeyboardEvent) {
-		const target = e.target as ITimelineItem;
+		const target = e.target as ITimelineItem,
+			targetfocusDomRef = target?.getFocusDomRef(),
+			shouldHandleCustomArrowNavigation = targetfocusDomRef === this.getFocusDomRef() || target === this.growingButton;
 
-		if (isDown(e) || isRight(e)) {
+		if (shouldHandleCustomArrowNavigation && (isDown(e) || isRight(e))) {
 			this._handleDown();
 			e.preventDefault();
 			return;
 		}
 
-		if (isUp(e) || isLeft(e)) {
+		if (shouldHandleCustomArrowNavigation && (isUp(e) || isLeft(e))) {
 			this._handleUp(e);
 			e.preventDefault();
 			return;

packages/fiori/test/pages/Timeline.html

@@ -27,7 +27,9 @@ <h2>Timeline within Card Vertical</h2>
 					</ui5-card-header>
 					<ui5-timeline layout="Vertical" accessible-name="vertical" id="timelineAccName">
 						<ui5-timeline-item title-text="called" subtitle-text="20.02.2017 11:30" icon="phone"
-							name="Stanislava Baltova" name-clickable></ui5-timeline-item>
+							name="Stanislava Baltova" name-clickable>
+							 <ui5-input value="Input"></ui5-input>
+						</ui5-timeline-item>
 						<ui5-timeline-item title-text="called" subtitle-text="20.02.2017 11:30" icon="phone"
 							name="Stanislava Baltova"></ui5-timeline-item>
 						<ui5-timeline-item title-text="Weekly Sync - CP Design"