From 2565e37e57c40f5d27f9b09212f904bed90a352b Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Tue, 29 Jul 2025 16:22:32 +0300 Subject: [PATCH 1/4] fix: arrow navigation on inner elements --- packages/fiori/cypress/specs/Timeline.cy.tsx | 32 ++++++++++++++++++++ packages/fiori/src/Timeline.ts | 7 +++-- packages/fiori/test/pages/Timeline.html | 4 ++- 3 files changed, 39 insertions(+), 4 deletions(-) diff --git a/packages/fiori/cypress/specs/Timeline.cy.tsx b/packages/fiori/cypress/specs/Timeline.cy.tsx index 53f1589d0785..b96e962315bf 100644 --- a/packages/fiori/cypress/specs/Timeline.cy.tsx +++ b/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 @@ -261,6 +262,37 @@ describe("Timeline with growing mode", () => { .last() .should("be.focused"); }); + + it("Arrows navigation should work only on focused item", () => { + cy.mount( + + + + + + + + ); + + cy.get("[ui5-timeline]") + .as("timeline"); + + cy.get("#input") + .realClick(); + + cy.realPress("ArrowDown"); + + cy.get("#secondItem") + .should("not.be.focused"); + + cy.get("#input") + .realClick(); + + cy.realPress("ArrowUp"); + + cy.get("#lastItem") + .should("not.be.focused"); + }); }); describe("Accessibility", () => { diff --git a/packages/fiori/src/Timeline.ts b/packages/fiori/src/Timeline.ts index b60463e10041..b7853770336f 100644 --- a/packages/fiori/src/Timeline.ts +++ b/packages/fiori/src/Timeline.ts @@ -354,15 +354,16 @@ class Timeline extends UI5Element { } _onkeydown(e: KeyboardEvent) { - const target = e.target as ITimelineItem; + const target = e.target as ITimelineItem, + isTagetTimeLineItem = target?.getFocusDomRef() === this.getFocusDomRef(); - if (isDown(e) || isRight(e)) { + if (isTagetTimeLineItem && (isDown(e) || isRight(e))) { this._handleDown(); e.preventDefault(); return; } - if (isUp(e) || isLeft(e)) { + if (isTagetTimeLineItem && (isUp(e) || isLeft(e))) { this._handleUp(e); e.preventDefault(); return; diff --git a/packages/fiori/test/pages/Timeline.html b/packages/fiori/test/pages/Timeline.html index 0e716b69dac2..aa540849b5a5 100644 --- a/packages/fiori/test/pages/Timeline.html +++ b/packages/fiori/test/pages/Timeline.html @@ -27,7 +27,9 @@

Timeline within Card Vertical

+ name="Stanislava Baltova" name-clickable> + + Date: Tue, 29 Jul 2025 16:42:25 +0300 Subject: [PATCH 2/4] fix: test --- packages/fiori/cypress/specs/Timeline.cy.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/cypress/specs/Timeline.cy.tsx b/packages/fiori/cypress/specs/Timeline.cy.tsx index b96e962315bf..7a15548007ac 100644 --- a/packages/fiori/cypress/specs/Timeline.cy.tsx +++ b/packages/fiori/cypress/specs/Timeline.cy.tsx @@ -282,7 +282,7 @@ describe("Timeline with growing mode", () => { cy.realPress("ArrowDown"); - cy.get("#secondItem") + cy.get("#firstItem") .should("not.be.focused"); cy.get("#input") From 3408656612df172b9c32bf2535fb01b26fda4aa4 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Tue, 29 Jul 2025 16:55:57 +0300 Subject: [PATCH 3/4] refactor: tests --- packages/fiori/cypress/specs/Timeline.cy.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/fiori/cypress/specs/Timeline.cy.tsx b/packages/fiori/cypress/specs/Timeline.cy.tsx index 7a15548007ac..ed0bfdd52666 100644 --- a/packages/fiori/cypress/specs/Timeline.cy.tsx +++ b/packages/fiori/cypress/specs/Timeline.cy.tsx @@ -266,11 +266,11 @@ describe("Timeline with growing mode", () => { it("Arrows navigation should work only on focused item", () => { cy.mount( - + - + ); @@ -282,7 +282,9 @@ describe("Timeline with growing mode", () => { cy.realPress("ArrowDown"); - cy.get("#firstItem") + cy.get("@timeline") + .find("ui5-timeline-item") + .last() .should("not.be.focused"); cy.get("#input") @@ -290,7 +292,9 @@ describe("Timeline with growing mode", () => { cy.realPress("ArrowUp"); - cy.get("#lastItem") + cy.get("@timeline") + .find("ui5-timeline-item") + .first() .should("not.be.focused"); }); }); From f819e26e7dd7c511d3f503f024b25d8e56c5e4ba Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Wed, 30 Jul 2025 10:49:45 +0300 Subject: [PATCH 4/4] fix: apply custom arrow navigation only when needed --- packages/fiori/cypress/specs/Timeline.cy.tsx | 2 +- packages/fiori/src/Timeline.ts | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/fiori/cypress/specs/Timeline.cy.tsx b/packages/fiori/cypress/specs/Timeline.cy.tsx index ed0bfdd52666..51c7bf03c03d 100644 --- a/packages/fiori/cypress/specs/Timeline.cy.tsx +++ b/packages/fiori/cypress/specs/Timeline.cy.tsx @@ -265,7 +265,7 @@ describe("Timeline with growing mode", () => { it("Arrows navigation should work only on focused item", () => { cy.mount( - + diff --git a/packages/fiori/src/Timeline.ts b/packages/fiori/src/Timeline.ts index b7853770336f..c609752f4ce6 100644 --- a/packages/fiori/src/Timeline.ts +++ b/packages/fiori/src/Timeline.ts @@ -355,15 +355,16 @@ class Timeline extends UI5Element { _onkeydown(e: KeyboardEvent) { const target = e.target as ITimelineItem, - isTagetTimeLineItem = target?.getFocusDomRef() === this.getFocusDomRef(); + targetfocusDomRef = target?.getFocusDomRef(), + shouldHandleCustomArrowNavigation = targetfocusDomRef === this.getFocusDomRef() || target === this.growingButton; - if (isTagetTimeLineItem && (isDown(e) || isRight(e))) { + if (shouldHandleCustomArrowNavigation && (isDown(e) || isRight(e))) { this._handleDown(); e.preventDefault(); return; } - if (isTagetTimeLineItem && (isUp(e) || isLeft(e))) { + if (shouldHandleCustomArrowNavigation && (isUp(e) || isLeft(e))) { this._handleUp(e); e.preventDefault(); return;