@ui5/webcomponents 2.8.0-rc.1 → 2.8.0-rc.3

package/cypress/specs/Table.cy.tsx

@@ -2,7 +2,7 @@ import Table from "../../src/Table.js";
 import TableHeaderRow from "../../src/TableHeaderRow.js";
 import TableCell from "../../src/TableCell.js";
 import TableRow from "../../src/TableRow.js";
-import TableSelection from "../../src/TableSelection.js";
+import TableSelectionMulti from "../../src/TableSelectionMulti.js";
 import TableHeaderCell from "../../src/TableHeaderCell.js";
 import TableHeaderCellActionAI from "../../src/TableHeaderCellActionAI.js";
 import Label from "../../src/Label.js";
@@ -60,38 +60,64 @@ describe("Table - Rendering", () => {
 });
 
 describe("Table - Popin Mode", () => {
-	beforeEach(() => {
+	function checkPopinState(expectedState: { poppedIn: string[], hidden: string[] }) {
+		cy.get("ui5-table-header-cell").each(($cell, index) => {
+			const id = $cell.attr("id") ?? "";
+			const shouldBePoppedIn = expectedState.poppedIn.includes(id);
+			const shouldBeHidden = expectedState.hidden.includes(id);
+			const roleCondition = shouldBePoppedIn || shouldBeHidden ? "not.have.attr" : "have.attr";
+
+			cy.wrap($cell)
+				.should(roleCondition, "role", ROLE_COLUMN_HEADER);
+			cy.get("ui5-table-header-row")
+				.shadow()
+				.find(`slot[name=default-${index + 1}]`)
+				.should(shouldBePoppedIn || shouldBeHidden ? "not.exist" : "exist");
+		});
+
+		cy.get("ui5-table-row").each($row => {
+			cy.wrap($row).find("ui5-table-cell").each(($cell, index) => {
+				const id = $cell.attr("id") ?? "NOT_FOUND";
+				const shouldBeHidden = expectedState.hidden.some(hiddenId => id.includes(hiddenId));
+				cy.wrap($row).shadow().find(`slot[name=default-${index + 1}]`)
+					.should(shouldBeHidden ? "not.exist" : "exist");
+			});
+		});
+	}
+
+	function mounTable(popinHidden = false) {
 		cy.mount(
 			<Table id="table" overflowMode="Popin">
 				<TableHeaderRow slot="headerRow">
 					<TableHeaderCell id="colA" minWidth="300px"><span>ColumnA</span></TableHeaderCell>
 					<TableHeaderCell id="colB" minWidth="200px">Column B</TableHeaderCell>
 					<TableHeaderCell id="colC" minWidth="200px">Column C</TableHeaderCell>
-					<TableHeaderCell id="colD" minWidth="150px" popinText="Column ?">Column D</TableHeaderCell>
+					<TableHeaderCell id="colD" minWidth="150px" popinText="Column ?" popinHidden={popinHidden}>Column D</TableHeaderCell>
 				</TableHeaderRow>
 				<TableRow>
-					<TableCell><Label>Cell A</Label></TableCell>
-					<TableCell><Label>Cell B</Label></TableCell>
-					<TableCell><Label>Cell C</Label></TableCell>
-					<TableCell><Label>Cell D</Label></TableCell>
+					<TableCell id="row-1-colA"><Label>Cell A</Label></TableCell>
+					<TableCell id="row-1-colB"><Label>Cell B</Label></TableCell>
+					<TableCell id="row-1-colC"><Label>Cell C</Label></TableCell>
+					<TableCell id="row-1-colD"><Label>Cell D</Label></TableCell>
 				</TableRow>
 				<TableRow>
-					<TableCell><Label>Cell A</Label></TableCell>
-					<TableCell><Label>Cell B</Label></TableCell>
-					<TableCell><Label>Cell C</Label></TableCell>
-					<TableCell><Label>Cell D</Label></TableCell>
+					<TableCell id="row-2-colA"><Label>Cell A</Label></TableCell>
+					<TableCell id="row-2-colB"><Label>Cell B</Label></TableCell>
+					<TableCell id="row-2-colC"><Label>Cell C</Label></TableCell>
+					<TableCell id="row-2-colD"><Label>Cell D</Label></TableCell>
 				</TableRow>
 				<TableRow>
-					<TableCell><Label>Cell A</Label></TableCell>
-					<TableCell><Label>Cell B</Label></TableCell>
-					<TableCell><Label>Cell C</Label></TableCell>
-					<TableCell><Label>Cell D</Label></TableCell>
+					<TableCell id="row-3-colA"><Label>Cell A</Label></TableCell>
+					<TableCell id="row-3-colB"><Label>Cell B</Label></TableCell>
+					<TableCell id="row-3-colC"><Label>Cell C</Label></TableCell>
+					<TableCell id="row-3-colD"><Label>Cell D</Label></TableCell>
 				</TableRow>
 			</Table>
 		);
-	});
+	}
 
 	it("no pop-in width 'optimal' table width", () => {
+		mounTable();
 		cy.get("ui5-table").then($table => {
 			$table.css("width", "850px");
 		});
@@ -103,17 +129,11 @@ describe("Table - Popin Mode", () => {
 		cy.get("ui5-table-header-cell")
 			.should("have.length", 4);
 
-		cy.get("ui5-table-header-cell").each(($cell, index) => {
-			cy.wrap($cell)
-				.should("have.attr", "role", ROLE_COLUMN_HEADER);
-			cy.get("ui5-table-header-row")
-				.shadow()
-				.find(`slot[name=default-${index + 1}]`)
-				.should("exist");
-		});
+		checkPopinState({ poppedIn: [], hidden: [] });
 	});
 
 	it("test with one by one popping in", () => {
+		mounTable();
 		const testWidths = [
 			{ width: 850, poppedIn: [] },
 			{ width: 700, poppedIn: ["colD"] },
@@ -127,22 +147,12 @@ describe("Table - Popin Mode", () => {
 				$table.css("width", `${width}px`);
 			});
 
-			cy.get("ui5-table-header-cell").each(($cell, index) => {
-				const id = $cell.attr("id") ?? "";
-				const shouldBePoppedIn = poppedIn.includes(id);
-				const roleCondition = shouldBePoppedIn ? "not.have.attr" : "have.attr";
-
-				cy.wrap($cell)
-					.should(roleCondition, "role", ROLE_COLUMN_HEADER);
-				cy.get("ui5-table-header-row")
-					.shadow()
-					.find(`slot[name=default-${index + 1}]`)
-					.should(shouldBePoppedIn ? "not.exist" : "exist");
-			});
+			checkPopinState({ poppedIn, hidden: [] });
 		});
 	});
 
 	it("test with one by one popping out", () => {
+		mounTable();
 		const testWidths = [
 			{ width: 150, poppedIn: ["colD", "colC", "colB"] },
 			{ width: 300, poppedIn: ["colD", "colC", "colB"] },
@@ -156,22 +166,12 @@ describe("Table - Popin Mode", () => {
 				$table.css("width", `${width}px`);
 			});
 
-			cy.get("ui5-table-header-cell").each(($cell, index) => {
-				const id = $cell.attr("id") ?? "";
-				const shouldBePoppedIn = poppedIn.includes(id);
-				const roleCondition = shouldBePoppedIn ? "not.have.attr" : "have.attr";
-
-				cy.wrap($cell)
-					.should(roleCondition, "role", ROLE_COLUMN_HEADER);
-				cy.get("ui5-table-header-row")
-					.shadow()
-					.find(`slot[name=default-${index + 1}]`)
-					.should(shouldBePoppedIn ? "not.exist" : "exist");
-			});
+			checkPopinState({ poppedIn, hidden: [] });
 		});
 	});
 
 	it("test with random widths", () => {
+		mounTable();
 		const expectedStates = [
 			{ width: 500, poppedIn: ["colD", "colC", "colB"] },
 			{ width: 700, poppedIn: ["colD", "colC"] },
@@ -187,24 +187,12 @@ describe("Table - Popin Mode", () => {
 			});
 
 			const expectedState = expectedStates.find(state => state.width >= randomWidth);
-			// eslint-disable-next-line cypress/no-unnecessary-waiting, no-loop-func
-			cy.get("ui5-table-header-cell").each(($cell, index) => {
-				const id = $cell.attr("id") ?? "";
-				const shouldBePoppedIn = expectedState?.poppedIn.includes(id);
-				const roleCondition = shouldBePoppedIn ? "not.have.attr" : "have.attr";
-
-				cy.wrap($cell)
-					.should(roleCondition, "role", ROLE_COLUMN_HEADER);
-
-				cy.get("ui5-table-header-row")
-					.shadow()
-					.find(`slot[name=default-${index + 1}]`)
-					.should(shouldBePoppedIn ? "not.exist" : "exist");
-			});
+			checkPopinState({ poppedIn: expectedState?.poppedIn ?? [], hidden: [] });
 		}
 	});
 
 	it("should show the popin-text in the popin area", () => {
+		mounTable();
 		cy.get("ui5-table").then($table => {
 			$table.css("width", "150px");
 		});
@@ -232,6 +220,40 @@ describe("Table - Popin Mode", () => {
 			return popinCellCount && popinCellCount === validPopinTextCount;
 		}).should("be.true");
 	});
+
+	it("should hide column in popin if popinHidden is set", () => {
+		mounTable(true);
+
+		const testWidths = [
+			{ width: 150, poppedIn: ["colC", "colB"], hidden: ["colD"] },
+			{ width: 300, poppedIn: ["colC", "colB"], hidden: ["colD"] },
+			{ width: 500, poppedIn: ["colC"], hidden: ["colD"] },
+			{ width: 700, poppedIn: [], hidden: ["colD"] },
+			{ width: 850, poppedIn: [], hidden: [] },
+		];
+
+		testWidths.forEach(({ width, poppedIn, hidden }) => {
+			cy.get("ui5-table").then($table => {
+				$table.css("width", `${width}px`);
+			});
+
+			checkPopinState({ poppedIn, hidden });
+		});
+	});
+
+	it("should hide popin if popinHidden, shows it if changed on runtime", () => {
+		mounTable(true);
+		cy.get("ui5-table").then($table => {
+			$table.css("width", "150px");
+		});
+
+		checkPopinState({ poppedIn: ["colC", "colB"], hidden: ["colD"] });
+
+		cy.get("#colD")
+			.invoke("removeAttr", "popin-hidden");
+
+		checkPopinState({ poppedIn: ["colC", "colB", "colD"], hidden: [] });
+	});
 });
 
 describe("Table - Horizontal alignment of cells", () => {
@@ -509,7 +531,7 @@ describe("Table - Horizontal Scrolling", () => {
 	beforeEach(() => {
 		cy.mount(
 			<Table id="table" overflowMode="Scroll" stickyTop="0px" style={{ width: "300px", overflow: "auto" }} accessibleNameRef="title">
-				<TableSelection id="selection" selected="0 2" slot="features"></TableSelection>
+				<TableSelectionMulti id="selection" selected="0 2" slot="features"></TableSelectionMulti>
 				<TableHeaderRow slot="headerRow" sticky>
 					<TableHeaderCell id="produtCol" width="200px"><span>Product</span></TableHeaderCell>
 					<TableHeaderCell id="supplierCol" width="200px">Supplier</TableHeaderCell>
@@ -671,7 +693,7 @@ describe("Table - Interactive Rows", () => {
 	it("fires the row-click event", () => {
 		cy.mount(
 			<Table id="table1">
-				<TableSelection id="selection" selected="1 2" slot="features"></TableSelection>
+				<TableSelectionMulti id="selection" selected="1 2" slot="features"></TableSelectionMulti>
 				<TableHeaderRow id="headerRow" slot="headerRow">
 					<TableHeaderCell>ColumnA</TableHeaderCell>
 					<TableHeaderCell>ColumnB</TableHeaderCell>
@@ -715,25 +737,6 @@ describe("Table - Interactive Rows", () => {
 		cy.get("@row2button").realPress("Space");
 		cy.get("@buttonClickHandler").should("have.been.calledThrice");
 		cy.get("@rowClickHandler").should("have.been.calledThrice");
-
-		// move the following tests to the TableSelection.cy.tsx
-		cy.get("#headerRow").shadow().find("#selection-cell").as("headerRowSelectionCell");
-		cy.get("@headerRowSelectionCell").find("#selection-component").as("headerRowCheckBox");
-		cy.get("@headerRowCheckBox").should("have.attr", "checked");
-		cy.get("#table1").then($table => {
-			$table.append(
-				`<ui5-table-row id="row3" row-key="3">
-					<ui5-table-cell>Cell A</ui5-table-cell>
-					<ui5-table-cell>Cell B</ui5-table-cell>
-				</ui5-table-row>`
-			);
-		});
-		cy.get("@headerRowCheckBox").should("not.have.attr", "checked");
-		cy.get("#row3").invoke("remove");
-		cy.get("@headerRowCheckBox").should("have.attr", "checked");
-		cy.get("#row2").invoke("remove");
-		cy.get("#row1").invoke("remove");
-		cy.get("@headerRowCheckBox").should("not.have.attr", "checked");
 	});
 });
 

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" }
+		]);
+	});
+});