@ui5/webcomponents 2.8.0-rc.2 → 2.8.0

package/cypress/specs/Popover.cy.tsx

@@ -152,5 +152,181 @@ describe("Popover interaction", () => {
 			// assert
 			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").should("be.visible");
 		});
+
+		it("tests clicking outside the popover when 'mousedown' event propagation is stopped", () => {
+			cy.mount(
+				<>
+					<button id="opener">Open</button>
+					<Popover id="pop" open={true} opener="opener" placement="Bottom">
+						<span>popover content</span>
+					</Popover>
+					<button id="btn">Stops mousedown propagation</button>
+				</>
+			);
+
+			cy.get("#pop").should("be.visible");
+			cy.get("#btn").then(btn => {
+				btn.get(0).addEventListener("mousedown", event => {
+					event.stopPropagation();
+				});
+			});
+
+			// act
+			cy.get("#btn").realMouseDown();
+
+			// assert
+			cy.get("#pop").should("not.be.visible");
+		});
+	});
+});
+
+describe("Focusing", () => {
+	it("tests no focusable elements, but content is scrolling", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open</Button>
+				<Popover id="popoverId"
+							 style="width: 10rem; height: 10rem;"
+							 opener="btnOpen">
+					<div>
+						Note: The content of the prop will be rendered into a by assigning the
+						respective slot attribute (slot="footer"). Since you can't change the
+						DOM order of slots when declaring them within a prop, it might prove
+						beneficial to manually mount them as part of the component's children,
+						especially when facing problems with the reading order of screen
+						readers. Note: When passing a custom React component to this prop, you
+						have to make sure your component reads the slot prop and appends it to
+						the most outer element of your component. Learn more about it here.
+					</div>
+				</Popover>
+			</>
+		);
+
+		// act
+		cy.get("#popoverId").invoke("prop", "open", "true");
+
+		cy.get("#popoverId")
+			.shadow()
+			.find(".ui5-popup-content")
+			.should("be.focused");
+	});
+
+	it("tests first element is keyboard focusable scroll container", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open</Button>
+				<Popover id="popoverId"
+						 opener="btnOpen">
+					<div id="innerContent" style="width: 10rem; height: 10rem; overflow-y: auto;">
+						Note: The content of the prop will be rendered into a by assigning the
+						respective slot attribute (slot="footer"). Since you can't change the
+						DOM order of slots when declaring them within a prop, it might prove
+						beneficial to manually mount them as part of the component's children,
+						especially when facing problems with the reading order of screen
+						readers. Note: When passing a custom React component to this prop, you
+						have to make sure your component reads the slot prop and appends it to
+						the most outer element of your component. Learn more about it here.
+					</div>
+					<Button>Button</Button>
+				</Popover>
+			</>
+		);
+
+		// act
+		cy.get("#popoverId").invoke("prop", "open", "true");
+
+		cy.get("#innerContent")
+			.should("be.focused");
+	});
+});
+
+describe("Events", () => {
+	it("before-open", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpenPopover">Open</Button>
+				<Popover id="popoverId" opener="btnOpenPopover">
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="first">First group focusable</button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="second">Second group focusable</button>
+					</div>
+				</Popover>
+			</>
+		);
+
+		cy.get("#popoverId")
+			.should("not.be.visible");
+
+		const preventDefault = (e : Event) => {
+			e.preventDefault();
+		};
+
+		cy.get("#popoverId").then($dialog => {
+			$dialog.get(0).addEventListener("before-open", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", true);
+
+		cy.get("#popoverId")
+			.should("not.be.visible");
+
+		cy.get("#popoverId").then($popover => {
+			$popover.get(0).removeEventListener("before-open", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", true);
+
+		cy.get("#popoverId")
+			.should("be.visible");
+	});
+
+	it("before-close", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpenPopover">Open</Button>
+				<Popover id="popoverId" opener="btnOpenPopover">
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="first">First group focusable</button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="second">Second group focusable</button>
+					</div>
+				</Popover>
+			</>
+		);
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", true);
+
+		cy.get("#popoverId")
+			.should("be.visible");
+
+		const preventDefault = (e : Event) => {
+			e.preventDefault();
+		};
+
+		cy.get("#popoverId").then($popover => {
+			$popover.get(0).addEventListener("before-close", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", false);
+
+		cy.get("#popoverId")
+			.should("be.visible");
+
+		cy.get("#popoverId").then($popover => {
+			$popover.get(0).removeEventListener("before-close", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", false);
+
+		cy.get("#popoverId")
+			.should("not.be.visible");
 	});
 });

package/cypress/specs/Select.cy.tsx

@@ -35,6 +35,21 @@ describe("Select - Accessibility", () => {
 			.find("li.ui5-li-root")
 			.should("have.attr", "title", EXPECTED_TOOLTIP);
 	});
+
+	it("setting tooltip on the host is reflected on the select's shadow dom root", () => {
+		cy.mount(<Select tooltip="Go home">
+			<Option value="1">Option 1</Option>
+			<OptionCustom value="2">Option 2</OptionCustom>
+		</Select>);
+
+		cy.get("[ui5-select]")
+			.shadow()
+			.find(".ui5-select-root")
+			.as("select");
+
+		cy.get("@select")
+			.should("have.attr", "title", "Go home");
+	});
 });
 
 describe("Select - Popover", () => {

package/cypress/specs/TabContainer.cy.tsx

@@ -0,0 +1,29 @@
+import TabContainer from "../../src/TabContainer.js";
+import Tab from "../../src/Tab.js";
+
+describe("TabContainer general interaction", () => {
+	it("Tests no auto selection", () => {
+		cy.mount(
+			<TabContainer no-auto-selection id="tcNoAuto">
+				<Tab text="Products ID">
+					tab1
+				</Tab>
+				<Tab text="Availability">
+					tab2
+				</Tab>
+				<Tab text="Expiration Date">
+					tab3
+				</Tab>
+			</TabContainer>
+		);
+
+		cy.get("#tcNoAuto")
+			.then(tc => {
+				const tabContainer = tc.get(0) as TabContainer;
+				const allItems = tabContainer.allItems;
+				allItems.forEach(item => {
+					cy.wrap(item).should("have.prop", "selected", false);
+				});
+			});
+	});
+});

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";
@@ -531,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>
@@ -653,13 +653,13 @@ describe("Table - Navigated Rows", () => {
 			.shadow()
 			.find("#navigated-cell")
 			.should("exist")
-			.should("have.attr", "excluded-from-navigation", "");
+			.should("have.attr", "data-excluded-from-navigation");
 
 		cy.get("#row2")
 			.shadow()
 			.find("#navigated-cell")
 			.should("exist")
-			.should("have.attr", "excluded-from-navigation", "");
+			.should("have.attr", "data-excluded-from-navigation");
 
 		cy.get("#row1")
 			.shadow()
@@ -693,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>
@@ -737,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/TableDragAndDrop.cy.tsx

@@ -77,7 +77,7 @@ describe("API & Events", () => {
 					<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
 					<TableHeaderCell><span>ColumnB</span></TableHeaderCell>
 				</TableHeaderRow>
-				${Array.from({ length: 10 }).map((_, index) =>
+				{Array.from({ length: 10 }).map((_, index) =>
 					<TableRow rowKey={`${index}`} movable={true}>
 						<TableCell><Label>Cell A</Label></TableCell>
 						<TableCell><Label>Cell B</Label></TableCell>

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