diff --git a/packages/fiori/cypress/specs/Timeline.cy.tsx b/packages/fiori/cypress/specs/Timeline.cy.tsx index 53f1589d0785..51c7bf03c03d 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,41 @@ 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("@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", () => { diff --git a/packages/fiori/src/Timeline.ts b/packages/fiori/src/Timeline.ts index b60463e10041..c609752f4ce6 100644 --- a/packages/fiori/src/Timeline.ts +++ b/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; 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> + +