@ui5/webcomponents 2.7.2 → 2.7.4

package/cypress/specs/TableNavigation.cy.tsx

@@ -0,0 +1,223 @@
+import Table from "../../src/Table.js";
+import TableHeaderRow from "../../src/TableHeaderRow.js";
+import TableHeaderCell from "../../src/TableHeaderCell.js";
+import TableRow from "../../src/TableRow.js";
+import TableCell from "../../src/TableCell.js";
+import TableGrowing from "../../src/TableGrowing.js";
+
+describe("Table - Keyboard Navigation", () => {
+	beforeEach(() => {
+		cy.mount(
+			<>
+				<input id="before-table1" type="Number" value="0"/>
+				<Table id="table0">
+					<TableGrowing id="growing" type="Button" slot="features"></TableGrowing>
+					<TableHeaderRow slot="headerRow">
+						<TableHeaderCell><a id="row0-link" href="test.html">Link</a></TableHeaderCell>
+						<TableHeaderCell>Header2</TableHeaderCell>
+						<TableHeaderCell>Header3</TableHeaderCell>
+						<TableHeaderCell>Header4</TableHeaderCell>
+					</TableHeaderRow>
+					<TableRow>
+						<TableCell>Row1Cell0</TableCell>
+						<TableCell><input id="row1-input"/></TableCell>
+						<TableCell><button id="row1-button">Button 1</button></TableCell>
+						<TableCell>Row1Cell3</TableCell>
+					</TableRow>
+					<TableRow id="interactive-row" interactive>
+						<TableCell>Row2Cell0</TableCell>
+						<TableCell><input id="row2-input"/></TableCell>
+						<TableCell><button id="row2-button">Button 2</button></TableCell>
+						<TableCell>Row2Cell3</TableCell>
+					</TableRow>
+					<TableRow id="notinteractive-row"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell> Here the table structure is broken. There is only one cell in row 5. </TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				</Table>
+				<input id="after-table1"/>
+			</>
+		);
+
+		cy.document().then(doc => {
+			const table = doc.getElementById("table0");
+			const input = doc.getElementById("before-table1");
+			table?.addEventListener("ui5-row-click", () => {
+				if (input instanceof HTMLInputElement) {
+					input.valueAsNumber++;
+				}
+			});
+		});
+
+		cy.get("#table0").children("ui5-table-row").as("rows");
+		cy.get("#table0").children("ui5-table-header-row").as("headerRow");
+	});
+
+	function getCell(row: number, cell: number, headerRow: boolean) {
+		if (headerRow) {
+			return cy.get("@headerRow").children("ui5-table-header-cell").eq(cell);
+		}
+		return cy.get("@rows").eq(row)
+			.children("ui5-table-cell")
+			.eq(cell);
+	}
+
+	function performActions(actions: { element: Cypress.Chainable, click?: string, condition?: string, conditionValue?:string, type?: string, press?: string | string[] }[]) {
+		actions.forEach(action => {
+			if (action.click) {
+				// @ts-ignore
+				action.element.click(action.click);
+			}
+			if (action.condition) {
+				if (action.conditionValue) {
+					// timing issue - without wait the check is failing
+					action.element.wait(0).should(action.condition, action.conditionValue);
+				} else {
+					action.element.wait(0).should(action.condition);
+				}
+			}
+			if (action.type) {
+				action.element.type(action.type);
+			}
+			if (action.press) {
+				// @ts-ignore
+				action.element.realPress(action.press);
+			}
+		});
+	}
+
+	it("should navigate on rows", () => {
+		performActions([
+			// left click is needed to focus the row
+			// otherwise the it would click in the center of the row where an input is
+			// resulting in a focus on the input instead of the row
+			{ element: cy.get("@rows").eq(0), click: "left" },
+			{ element: cy.get("@rows").eq(0), type: "{leftarrow}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{uparrow}", condition: "be.focused" },
+			{ element: cy.get("@headerRow"), type: "{uparrow}", condition: "be.focused" },
+			{ element: cy.get("@headerRow"), type: "{downarrow}{downarrow}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(1), type: "{pagedown}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(21), type: "{pagedown}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(24), type: "{pagedown}", condition: "be.focused" },
+			{ element: cy.get("#growing").shadow().find("#growing-button"), type: "{pageup}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(5), type: "{pageup}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{end}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(24), type: "{end}", condition: "be.focused" },
+			{ element: cy.get("#growing").shadow().find("#growing-button"), type: "{home}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{home}", condition: "be.focused" },
+			{ element: cy.get("@headerRow"), condition: "be.focused" }
+		]);
+	});
+
+	it("should navigate on cells", () => {
+		performActions([
+			{ element: cy.get("@rows").eq(0), click: "left" },
+			{ element: cy.get("@rows").eq(0), type: "{rightarrow}", condition: "be.focused" },
+			{ element: getCell(0, 0, false), type: "{leftarrow}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{rightarrow}{rightarrow}", condition: "be.focused" },
+			{ element: getCell(0, 1, false), type: "{home}", condition: "be.focused" },
+			{ element: getCell(0, 0, false), type: "{end}", condition: "be.focused" },
+			{ element: getCell(0, 3, false), type: "{rightarrow}", condition: "be.focused" },
+			{ element: getCell(0, 3, false), type: "{end}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{end}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(24), type: "{rightarrow}{rightarrow}{rightarrow}", condition: "be.focused" },
+			{ element: getCell(24, 2, false), type: "{pageup}", condition: "be.focused" },
+			{ element: getCell(4, 0, false), type: "{pageup}", condition: "be.focused" },
+			{ element: getCell(0, 0, false), type: "{pageup}", condition: "be.focused" },
+			{ element: getCell(0, 0, true), type: "{pagedown}", condition: "be.focused" },
+			{ element: getCell(19, 0, false), type: "{pagedown}", condition: "be.focused" },
+			{ element: getCell(24, 0, false), type: "{pagedown}", condition: "be.focused" },
+			{ element: cy.get("#growing").shadow().find("#growing-button"), type: "{home}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{home}", condition: "be.focused" },
+			{ element: cy.get("@headerRow"), type: "{downarrow}{rightarrow}", condition: "be.focused" },
+			{ element: getCell(0, 0, false), type: "{downarrow}{rightarrow}", condition: "be.focused" },
+			{ element: getCell(1, 1, false), type: "{downarrow}{rightarrow}", condition: "be.focused" },
+			{ element: getCell(2, 2, false), type: "{downarrow}{rightarrow}", condition: "be.focused" },
+			{ element: getCell(3, 3, false), type: "{downarrow}", condition: "be.focused" },
+			{ element: getCell(4, 0, false), condition: "be.focused" }
+		]);
+	});
+
+	it("should handle F2/F7/Enter/Tab/Up/Down", () => {
+		cy.get("@rows").eq(0).get("#row1-input").as("row1Input");
+		cy.get("@rows").eq(1).get("#row2-input").as("row2Input");
+
+		performActions([
+			{ element: cy.get("@rows").eq(0), click: "left" },
+			{ element: cy.get("@rows").eq(0), press: "F2", condition: "be.focused" },
+			{ element: cy.get("@row1Input"), press: "F2", condition: "be.focused" },
+			{ element: getCell(0, 1, false), press: "F2", condition: "be.focused" },
+			{ element: cy.get("@row1Input"), press: "F7", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), press: "F7", condition: "be.focused" },
+			{ element: cy.get("@row1Input").eq(0), type: "{downarrow}", condition: "be.focused" },
+			{ element: cy.get("@row1Input").eq(0), type: "{uparrow}", condition: "be.focused" },
+			{ element: cy.get("@row1Input").eq(0), press: ["F2", "{uparrow}"], condition: "be.focused" },
+			{ element: getCell(0, 1, true), press: "F2", condition: "be.focused" },
+			{ element: getCell(0, 1, true), type: "{leftarrow}", condition: "be.focused" },
+			{ element: getCell(0, 0, true), type: "{enter}", condition: "be.focused" },
+			{ element: cy.get("@headerRow").get("#row0-link"), type: "{downarrow}", condition: "be.focused" },
+			{ element: getCell(0, 0, false), press: "Tab", condition: "be.focused" },
+			{ element: cy.get("#after-table1"), press: ["Shift", "Tab"], condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{downarrow}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(1), press: "F7", condition: "be.focused" },
+			{ element: cy.get("@row2Input").eq(0), press: "Tab", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(1).get("#row2-button"), press: "F7", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(1), type: "{uparrow}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), press: "F7", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0).get("#row1-button"), type: "{uparrow}", condition: "be.focused" },
+			{ element: getCell(0, 2, true), press: "F7", condition: "be.focused" },
+			{ element: cy.get("@headerRow"), type: "{downarrow}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), press: "F7", condition: "be.focused" },
+			{ element: getCell(0, 2, false), press: "F7", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{downarrow}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(1), press: "F7", condition: "be.focused" },
+			{ element: getCell(1, 2, false), press: ["Shift", "Tab"], condition: "be.focused" },
+			{ element: cy.get("#before-table1"), press: "Tab", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(1), press: "Tab", condition: "be.focused" }
+		]);
+	});
+
+	it("should should work correctly for interactive rows", () => {
+		cy.get("@rows").eq(1).get("#row2-button").as("row2Button");
+		cy.get("#table0").get("#before-table1").as("input");
+		cy.get("@rows").get("#interactive-row").as("row");
+
+		performActions([
+			{ element: cy.get("@row"), click: "left" },
+			{ element: cy.get("@input"), condition: "have.value", conditionValue: "1" },
+			{ element: cy.get("@row"), type: "{enter}" },
+			{ element: cy.get("@input"), condition: "have.value", conditionValue: "2" },
+			{ element: cy.get("@rows").get("#notinteractive-row"), click: "left" },
+			{ element: cy.get("@input"), condition: "have.value", conditionValue: "2" },
+			{ element: cy.get("@row2Button"), click: "left" },
+			{ element: cy.get("@input"), condition: "have.value", conditionValue: "2" },
+			{ element: cy.get("@row2Button"), type: "{enter}" },
+			{ element: cy.get("@input"), condition: "have.value", conditionValue: "2" },
+			{ element: cy.get("@row2Button"), press: "F7" },
+			{ element: cy.get("@row"), condition: "be.focused" },
+			{ element: cy.get("@row"), press: "Space" },
+			{ element: cy.get("@input"), condition: "have.value", conditionValue: "2" },
+			{ element: cy.get("@row"), type: "{enter}" },
+			{ element: cy.get("@input"), condition: "have.value", conditionValue: "3" }
+		]);
+	});
+});

package/cypress/specs/TableNavigationFixedHeader.cy.tsx

@@ -0,0 +1,199 @@
+import Table from "../../src/Table.js";
+import TableHeaderRow from "../../src/TableHeaderRow.js";
+import TableHeaderCell from "../../src/TableHeaderCell.js";
+import TableRow from "../../src/TableRow.js";
+import TableCell from "../../src/TableCell.js";
+import Label from "../../src/Label.js";
+import Bar from "../../src/Bar.js";
+import Title from "../../src/Title.js";
+import Slider from "../../src/Slider.js";
+
+describe("Table - Keyboard Navigation with Fixed Headers", () => {
+	function isDisplayedInsideViewport(element: string) {
+		cy.get(element).then($el => {
+			const el = $el[0];
+			const rect = el.getBoundingClientRect();
+
+			expect(rect.top).to.be.at.least(0);
+			expect(rect.left).to.be.at.least(0);
+			expect(rect.bottom).to.be.lessThan(Cypress.config("viewportHeight"));
+			expect(rect.right).to.be.lessThan(Cypress.config("viewportWidth"));
+		});
+	}
+
+	it("scrollable container - focused row should always be below the header", () => {
+		cy.mount(
+			<div style="height:300px; overflow:auto;">
+				<Bar id="toolbar" design="Header" accessible-name-ref="title" style="position: sticky; top: 0; z-index: 2; height: 50px;">
+					<Title tabindex={0} level="H3" id="title" slot="startContent">My Selectable Products (3)</Title>
+					<Slider id="slider" min={0} max={100} step={1} value={100}
+						label-interval="0"/>
+				</Bar>
+				<Table id="table0" overflow-mode="Popin" sticky-top="50px" accessible-name-ref="title" no-data-text="No data found">
+					<TableHeaderRow sticky slot="headerRow">
+						<TableHeaderCell id="colA" min-width="300px"><span>ColumnA</span></TableHeaderCell>
+						<TableHeaderCell id="colB" min-width="200px">Column B</TableHeaderCell>
+						<TableHeaderCell id="colC" min-width="200px">Column C</TableHeaderCell>
+						<TableHeaderCell id="colD" min-width="150px">Column D</TableHeaderCell>
+					</TableHeaderRow>
+					<TableRow id="row-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-2"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-3"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-4"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-5"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-6"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-7"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-8"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-9"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-10"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-11"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-12"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-13"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-14"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-15"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-16"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-17"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-18"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-19"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-20"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-21"> <TableCell>A</TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				</Table>
+			</div>
+		);
+
+		cy.get("#table0").children("ui5-table-row").as("rows");
+		cy.get("#table0").children("ui5-table-header-row").as("headerRow");
+		cy.get("@rows").get("#row-21").as("lastRow");
+
+		cy.get("@lastRow").scrollIntoView();
+		cy.get("@lastRow").click("left");
+		cy.get("@lastRow").should("be.focused");
+
+		for (let i = 20; i > 0; i--) {
+			cy.realPress("{uparrow}");
+			cy.get("@rows").get(`#row-${i}`).should("be.focused");
+
+			isDisplayedInsideViewport("@headerRow");
+
+			cy.get("@headerRow").then($headerRow => {
+				cy.get("@rows").get(`#row-${i}`).then($row => {
+					const headerRowBottom = $headerRow[0].getBoundingClientRect().bottom;
+					const focusedRowTop = $row[0].getBoundingClientRect().top;
+
+					expect(focusedRowTop).to.be.at.least(headerRowBottom);
+				});
+			});
+		}
+	});
+
+	it("scrollable table - focused row should always be below the header", () => {
+		cy.mount(
+			<Table id="table1" overflow-mode="Popin" sticky-top="0" accessible-name-ref="title" no-data-text="No data found" style="height: 300px; overflow: auto;">
+				<TableHeaderRow sticky slot="headerRow">
+					<TableHeaderCell id="colA" min-width="300px"><span>ColumnA</span></TableHeaderCell>
+					<TableHeaderCell id="colB" min-width="200px">Column B</TableHeaderCell>
+					<TableHeaderCell id="colC" min-width="200px">Column C</TableHeaderCell>
+					<TableHeaderCell id="colD" min-width="150px">Column D</TableHeaderCell>
+				</TableHeaderRow>
+				<TableRow id="row-1-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-2-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-3-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-4-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-5-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-6-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-7-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-8-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-9-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-10-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-11-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-12-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-13-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-14-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-15-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-16-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-17-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-18-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-19-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-20-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-21-1"> <TableCell>A</TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+			</Table>
+		);
+
+		cy.get("#table1").children("ui5-table-row").as("rows");
+		cy.get("#table1").children("ui5-table-header-row").as("headerRow");
+		cy.get("@rows").get("#row-21-1").as("lastRow");
+
+		cy.get("@lastRow").scrollIntoView();
+		cy.get("@lastRow").click("left");
+		cy.get("@lastRow").should("be.focused");
+
+		for (let i = 20; i > 0; i--) {
+			cy.realPress("{uparrow}");
+			cy.get("@rows").get(`#row-${i}-1`).should("be.focused");
+
+			isDisplayedInsideViewport("@headerRow");
+
+			cy.get("@headerRow").then($headerRow => {
+				cy.get("@rows").get(`#row-${i}-1`).then($row => {
+					const headerRowBottom = $headerRow[0].getBoundingClientRect().bottom;
+					const focusedRowTop = $row[0].getBoundingClientRect().top;
+
+					expect(focusedRowTop).to.be.at.least(headerRowBottom);
+				});
+			});
+		}
+	});
+
+	it("body as scroll container - focused row should always be below the header", () => {
+		cy.mount(
+			<>
+				<Bar id="toolbar2" design="Header" accessible-name-ref="title" style="position: sticky; top: 0; z-index: 2; height: 50px;">
+					<Title tabindex={0} level="H3" id="title" slot="startContent">My Selectable Products (3)</Title>
+					<Slider id="slider" min={0} max={100} step={1} value={100}
+						label-interval="0"></Slider>
+				</Bar>
+				<Table id="table2" overflow-mode="Popin" sticky-top="50px" accessible-name-ref="title" no-data-text="No data found">
+					<TableHeaderRow sticky slot="headerRow">
+						<TableHeaderCell id="colA" min-width="300px"><span>ColumnA</span></TableHeaderCell>
+						<TableHeaderCell id="colB" min-width="200px">Column B</TableHeaderCell>
+						<TableHeaderCell id="colC" min-width="200px">Column C</TableHeaderCell>
+						<TableHeaderCell id="colD" min-width="150px">Column D</TableHeaderCell>
+					</TableHeaderRow>
+					${Array.from({ length: 100 }).map((row, index) =>
+						<TableRow id={`row-${index + 1}-2`}>
+							<TableCell><Label><b>Notebook Basic ${index + 1}</b><br/>HT-100${index + 1}</Label></TableCell>
+							<TableCell><Label>Technocom</Label></TableCell>
+							<TableCell><Label>32 x 21 x 4 cm</Label></TableCell>
+							<TableCell><Label style="color: #2b7c2b"><b>3.7</b> KG</Label></TableCell>
+							<TableCell style="text-align: end;"><Label style="text-align: end;"><b>29</b> EUR</Label></TableCell>
+						</TableRow>
+					)}
+				</Table>
+			</>
+		);
+
+		cy.get("#table2").children("ui5-table-row").as("rows");
+		cy.get("#table2").children("ui5-table-header-row").as("headerRow");
+		cy.get("@rows").get("#row-100-2").as("lastRow");
+
+		cy.get("@lastRow").scrollIntoView();
+		cy.get("@lastRow").click("left");
+		cy.get("@lastRow").should("be.focused");
+
+		for (let i = 99; i > 0; i--) {
+			cy.realPress("{uparrow}");
+			cy.get("@rows").get(`#row-${i}-2`).should("be.focused");
+
+			isDisplayedInsideViewport("@headerRow");
+
+			cy.get("@headerRow").then($headerRow => {
+				cy.get("@rows").get(`#row-${i}-2`).then($row => {
+					const headerRowBottom = $headerRow[0].getBoundingClientRect().bottom;
+					const focusedRowTop = $row[0].getBoundingClientRect().top;
+
+					expect(focusedRowTop).to.be.at.least(headerRowBottom);
+				});
+			});
+		}
+	});
+});