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

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.8.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.1...v2.8.0-rc.2) (2025-02-20)
+
+
+### Bug Fixes
+
+* **ui5-avatar:** fix acc-name announcement ([#10854](https://github.com/SAP/ui5-webcomponents/issues/10854)) ([cb37653](https://github.com/SAP/ui5-webcomponents/commit/cb37653ae80a82ba0a588d127490798f787705af)), closes [#10461](https://github.com/SAP/ui5-webcomponents/issues/10461)
+* **ui5-checkbox:** ensure consistent focus behavior ([#10639](https://github.com/SAP/ui5-webcomponents/issues/10639)) ([a73c8d8](https://github.com/SAP/ui5-webcomponents/commit/a73c8d814e7769d81ba43d2239f51269a6fe0859))
+* **ui5-list:** add correct focus style and accessibility roles for no-data item ([#10503](https://github.com/SAP/ui5-webcomponents/issues/10503)) ([9a0bc7c](https://github.com/SAP/ui5-webcomponents/commit/9a0bc7c33f3ff104c50e84f7ffecf69f7dfe116a)), closes [#10436](https://github.com/SAP/ui5-webcomponents/issues/10436)
+* **ui5-popover:** don't close the popover if the opener is clicked ([#10780](https://github.com/SAP/ui5-webcomponents/issues/10780)) ([bc9eb08](https://github.com/SAP/ui5-webcomponents/commit/bc9eb0841074918d5c26ee7a37b51f8284ce87ae))
+* **ui5-popover:** popover is opened from header slot ([#10856](https://github.com/SAP/ui5-webcomponents/issues/10856)) ([c224672](https://github.com/SAP/ui5-webcomponents/commit/c22467261d7598fdc080fde214bf737142715865)), closes [#10544](https://github.com/SAP/ui5-webcomponents/issues/10544)
+* **ui5-tag:** fix tag alignment ([#10852](https://github.com/SAP/ui5-webcomponents/issues/10852)) ([ae629dc](https://github.com/SAP/ui5-webcomponents/commit/ae629dce61baa751819e7b968cb4fa779309f4e1)), closes [#10810](https://github.com/SAP/ui5-webcomponents/issues/10810)
+
+
+### Features
+
+* **ui5-table-header-cell:** add popinHidden property ([#10834](https://github.com/SAP/ui5-webcomponents/issues/10834)) ([12e7dcd](https://github.com/SAP/ui5-webcomponents/commit/12e7dcd187f9f94150643bab7cbdc8ad7590337c))
+
+
+
+
+
 # [2.8.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.0...v2.8.0-rc.1) (2025-02-13)
 
 

package/cypress/specs/Avatar.cy.tsx

@@ -1,4 +1,5 @@
 import Avatar from "../../src/Avatar.js";
+import "@ui5/webcomponents-icons/dist/supplier.js";
 
 describe("Accessibility", () => {
 	it("checks if initials of avatar are correctly announced", () => {
@@ -15,4 +16,18 @@ describe("Accessibility", () => {
 			.find(".ui5-avatar-root")
 			.should("have.attr", "aria-label", expectedLabel);
 	});
+
+	it("checks if accessible-name is correctly passed to the icon", () => {
+		const ACCESSIBLE_NAME = "Supplier Icon";
+		const ICON_NAME = "supplier";
+
+		cy.mount(<Avatar id="avatar-with-icon" icon={ICON_NAME} accessible-name={ACCESSIBLE_NAME}></Avatar>);
+
+		cy.get("#avatar-with-icon")
+			.shadow()
+			.find("ui5-icon")
+			.shadow()
+			.find("svg")
+			.should("have.attr", "aria-label", ACCESSIBLE_NAME);
+	});
 });

package/cypress/specs/Input.cy.tsx

@@ -2,6 +2,8 @@ import Input from "../../src/Input.js";
 import SuggestionItem from "../../src/SuggestionItem.js";
 import SuggestionItemCustom from "../../src/SuggestionItemCustom.js";
 import SuggestionItemGroup from "../../src/SuggestionItemGroup.js";
+import Dialog from "../../src/Dialog.js";
+import Button from "../../src/Button.js";
 
 describe("Input Tests", () => {
 	it("tets input event prevention", () => {
@@ -534,4 +536,62 @@ describe("Change event behavior when selecting the same suggestion item", () =>
 			expect(changeCount).to.equal(1);
 		});
 	});
+
+	it("should not close the dialog when item is selected", () => {
+		cy.mount(
+			<>
+				<Button>Open</Button>
+				<Dialog>
+					<Input showSuggestions={true}>
+						<SuggestionItem text="First item"></SuggestionItem>
+						<SuggestionItem text="Second item"></SuggestionItem>
+					</Input>
+				</Dialog>
+			</>
+		);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("[ui5-dialog]")
+			.as("dialog");
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		cy.get("@button")
+			.then($btn => {
+				$btn[0].addEventListener("click", () => {
+					cy.get("@dialog").then($dialog => {
+						$dialog[0].setAttribute("open", "");
+					});
+				});
+			});
+
+		cy.get("@dialog")
+			.then($dialog => {
+				$dialog[0].addEventListener("close", () => {
+					$dialog[0].removeAttribute("open");
+				});
+			});
+
+		cy.get("@button")
+			.realClick();
+
+		cy.get("@input")
+			.realClick();
+
+		cy.get("@input")
+			.realType("f");
+
+		cy.get("[ui5-suggestion-item")
+			.eq(0)
+			.as("suggestion-item");
+
+		cy.get("@suggestion-item")
+			.click();
+
+		cy.get("@dialog")
+			.should("have.attr", "open");
+	});
 });

package/cypress/specs/Popover.cy.tsx

@@ -63,3 +63,94 @@ describe("Popover opener", () => {
 		cy.get("#btnClosePopover").realClick();
 	});
 });
+
+describe("Popover interaction", () => {
+	describe("Automatic Closing", () => {
+		it("tests clicking outside the popover", () => {
+			cy.mount(
+				<>
+					<button id="opener">Open</button>
+					<Popover id="pop" open={true} opener="opener">
+						<Button id="btnClosePopover">Close</Button>
+					</Popover>
+				</>
+			);
+
+			cy.get("#pop").should("be.visible");
+
+			// act
+			cy.get("body").realClick();
+
+			// assert
+			cy.get("#pop").should("not.be.visible");
+		});
+
+		it("tests clicking on the opener", () => {
+			cy.mount(
+				<>
+					<button id="opener">Open</button>
+					<Popover id="pop" open={true} opener="opener">
+						<Button id="btnClosePopover">Close</Button>
+					</Popover>
+				</>
+			);
+
+			cy.get("#pop").should("be.visible");
+
+			// act
+			cy.get("#opener").realClick();
+
+			// assert
+			cy.get("#pop").should("be.visible");
+		});
+
+		it("tests clicking on the opener if both the popover and the opener are located in a shadow root", () => {
+			class OpenerShadowRootTest extends HTMLElement {
+				_shadow: ShadowRoot | null = null;
+
+				constructor() {
+					super();
+				}
+
+				connectedCallback() {
+					if (this._shadow) {
+						return;
+					}
+
+					this._shadow = this.attachShadow({ mode: "open" });
+
+					const btn = document.createElement("button");
+					btn.textContent = "Opener in Shadow Root";
+					btn.setAttribute("id", "opener");
+
+					const pop = document.createElement("ui5-popover") as Popover;
+					pop.opener = "opener";
+					pop.open = true;
+
+					this._shadow.appendChild(btn);
+					this._shadow.appendChild(pop);
+				}
+			}
+
+			cy.window().then(win => {
+				win.customElements.define("opener-shadow-root-test", OpenerShadowRootTest);
+			});
+
+			cy.mount(
+				<>
+					{/* @ts-expect-error */}
+					<opener-shadow-root-test id="openerShadowRooTest"></opener-shadow-root-test>
+				</>
+			);
+
+			// assert
+			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").should("be.visible");
+
+			// act
+			cy.get("#openerShadowRooTest").shadow().find("button").realClick();
+
+			// assert
+			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").should("be.visible");
+		});
+	});
+});

package/cypress/specs/Table.cy.tsx

@@ -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", () => {

package/cypress/specs/TableSelection.cy.tsx

@@ -0,0 +1,243 @@
+import Label from "../../src/Label.js";
+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 TableSelectionMode from "../../src/types/TableSelectionMode.js";
+import TableSelection from "../../src/TableSelection.js";
+
+function mountTestpage(selectionMode: TableSelectionMode) {
+	cy.mount(
+		<>
+			<Table id="table0" noDataText="No data found">
+				<TableSelection id="selection" slot="features" mode={selectionMode}></TableSelection>
+				<TableHeaderRow slot="headerRow">
+					<TableHeaderCell id="colA"><span>ColumnA</span></TableHeaderCell>
+					<TableHeaderCell id="colB">Column B</TableHeaderCell>
+					<TableHeaderCell id="colC">Column C</TableHeaderCell>
+					<TableHeaderCell id="colD">Column D</TableHeaderCell>
+				</TableHeaderRow>
+				<TableRow rowKey="0">
+					<TableCell><Label>Cell A</Label></TableCell>
+					<TableCell><Label>Cell B</Label></TableCell>
+					<TableCell><Label>Cell C</Label></TableCell>
+					<TableCell><Label>Cell D</Label></TableCell>
+				</TableRow>
+				<TableRow rowKey="1">
+					<TableCell><Label>Cell A</Label></TableCell>
+					<TableCell><Label>Cell B</Label></TableCell>
+					<TableCell><Label>Cell C</Label></TableCell>
+					<TableCell><Label>Cell D</Label></TableCell>
+				</TableRow>
+				<TableRow rowKey="2">
+					<TableCell><Label>Cell A</Label></TableCell>
+					<TableCell><Label>Cell B</Label></TableCell>
+					<TableCell><Label>Cell C</Label></TableCell>
+					<TableCell><Label>Cell D</Label></TableCell>
+				</TableRow>
+				<TableRow rowKey="3">
+					<TableCell><Label>Cell A</Label></TableCell>
+					<TableCell><Label>Cell B</Label></TableCell>
+					<TableCell><Label>Cell C</Label></TableCell>
+					<TableCell><Label>Cell D</Label></TableCell>
+				</TableRow>
+				<TableRow rowKey="4">
+					<TableCell><Label>Cell A</Label></TableCell>
+					<TableCell><Label>Cell B</Label></TableCell>
+					<TableCell><Label>Cell C</Label></TableCell>
+					<TableCell><Label>Cell D</Label></TableCell>
+				</TableRow>
+			</Table>
+		</>
+	);
+
+	cy.get("#table0").children("ui5-table-header-row").first().as("headerRow");
+	cy.get("#table0").children("ui5-table-row").get("[row-key=\"0\"]").as("row0");
+	cy.get("#table0").children("ui5-table-row").get("[row-key=\"4\"]").as("row4");
+}
+
+describe("Mode - None", () => {
+	before(() => {
+		mountTestpage(TableSelectionMode.None);
+	});
+
+	it("selection should be not active", () => {
+		cy.get("#selection").should("have.attr", "mode", TableSelectionMode.None);
+		cy.get("@headerRow").shadow().find("#selection-cell")
+			.should("not.exist");
+		cy.get("@row0").shadow().find("#selection-cell")
+			.should("not.exist");
+	});
+});
+
+const testConfig = {
+	"Single": {
+		"config": {
+			"mode": "Single",
+		},
+		"cases": {
+			"BOXES": {
+				"header": {
+					"exists": true,
+					"checkbox": false,
+				},
+				"row": {
+					"exists": true,
+					"checkbox": true,
+				},
+			},
+			"SPACE": {
+				"space_0": "0",
+				"space_4": "4",
+			},
+			"ARROWS_BOX": {
+				"arrow_initial": "0",
+				"arrow_down": "1",
+				"arrow_up": "0",
+			},
+			"MOUSE": {
+				"mouse_0": "0",
+				"mouse_4": "4",
+			},
+			"RANGE_MOUSE": {
+				"range_mouse_initial": "0",
+				"range_mouse_final": "4",
+				"range_mouse_edge": "0",
+			},
+			"RANGE_KEYBOARD": {
+				"initial": "0",
+				"block_1": "0",
+				"block_2": "3",
+			},
+		},
+	},
+	"Multiple": {
+		"config": {
+			"mode": "Multiple",
+		},
+		"cases": {
+			"BOXES": {
+				"header": {
+					"exists": true,
+					"checkbox": true
+				},
+				"row": {
+					"exists": true,
+					"checkbox": true
+				}
+			},
+			"SPACE": {
+				"space_0": "0",
+				"space_4": "0 4"
+			},
+			"ARROWS_BOX": {
+				"arrow_initial": "0",
+				"arrow_down": "0",
+				"arrow_up": "0"
+			},
+			"MOUSE": {
+				"mouse_0": "0",
+				"mouse_4": "0 4"
+			},
+			"RANGE_MOUSE": {
+				"range_mouse_initial": "0",
+				"range_mouse_final": "0 1 2 3 4",
+				"range_mouse_edge": "0 1 2 3 4"
+			},
+			"RANGE_KEYBOARD": {
+				"initial": "0",
+				"block_1": "0 1",
+				"block_2": "0 1 3 4"
+			}
+		}
+	}
+};
+
+// I've had to check the attribute this way because
+// should("have.attr"... and similar functions always returned '' instead of the actual value
+// It could be a timing issue but .wait didn't help either
+function checkSelection(rowIndex: string) {
+	cy.get("#selection").then(sel => {
+		expect(sel.get(0).getAttribute("selected")).to.equal(rowIndex);
+	});
+}
+
+Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
+	describe(`Mode - ${mode}`, () => {
+		beforeEach(() => {
+			mountTestpage(testConfigEntry.config.mode as TableSelectionMode);
+		});
+
+		it("Correct boxes are shown", () => {
+			cy.get("@headerRow").shadow().find("#selection-cell")
+				.should(testConfigEntry.cases.BOXES.header.exists ? "exist" : "not.exist");
+			cy.get("@row0").shadow().find("#selection-cell")
+				.should(testConfigEntry.cases.BOXES.row.exists ? "exist" : "not.exist");
+
+			cy.get("@headerRow").shadow().find("#selection-component")
+				.should(testConfigEntry.cases.BOXES.header.checkbox ? "exist" : "not.exist");
+			cy.get("@row0").shadow().find("#selection-component")
+				.should(testConfigEntry.cases.BOXES.row.checkbox ? "exist" : "not.exist");
+		});
+
+		it("select row via SPACE", () => {
+			cy.get("@row0").realClick({ position: "left" });
+			cy.get("@row0").realPress("Space");
+			checkSelection(testConfigEntry.cases.SPACE.space_0);
+
+			cy.get("@row4").realClick();
+			cy.get("@row4").realPress("Space");
+			cy.get("#selection").should("have.attr", "mode", testConfigEntry.config.mode);
+			checkSelection(testConfigEntry.cases.SPACE.space_4);
+		});
+
+		it("select row via arrows (radio focus)", () => {
+			cy.get("@row0").shadow().find("#selection-component").realClick();
+			checkSelection(testConfigEntry.cases.ARROWS_BOX.arrow_initial);
+
+			cy.realPress("ArrowDown");
+			checkSelection(testConfigEntry.cases.ARROWS_BOX.arrow_down);
+
+			cy.realPress("ArrowUp");
+			checkSelection(testConfigEntry.cases.ARROWS_BOX.arrow_up);
+		});
+
+		it("select row via mouse", () => {
+			cy.get("@row0").shadow().find("#selection-component").realClick();
+			checkSelection(testConfigEntry.cases.MOUSE.mouse_0);
+
+			cy.get("@row4").shadow().find("#selection-component").realClick();
+			checkSelection(testConfigEntry.cases.MOUSE.mouse_4);
+		});
+
+		it("range selection with mouse", () => {
+			cy.get("@row0").shadow().find("#selection-component").realClick();
+			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_initial);
+
+			// Need to simulate keydown with SHIFT key to set range selection flag shiftKeyPressed
+			// Cypress does not trigger keydown when just calling realClick with shiftKey: true
+			// That is why selection of the row is not supressed, and we end up with 0 4 1 2 3
+			cy.get("@row4").trigger("keydown", { bubbles: true, key: "Shift", shiftKey: true });
+			cy.get("@row4").shadow().find("#selection-component").realClick({ shiftKey: true });
+			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_final);
+
+			cy.get("@row4").trigger("keydown", { bubbles: true, key: "Shift", shiftKey: true });
+			cy.get("@row0").shadow().find("#selection-component").realClick();
+			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_edge);
+		});
+
+		it("range selection with keyboard", () => {
+			cy.get("@row0").realClick({ position: "center" });
+			cy.get("@row0").realPress("Space");
+			checkSelection(testConfigEntry.cases.RANGE_KEYBOARD.initial);
+
+			cy.realPress(["Shift", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowUp", "ArrowUp"]);
+			checkSelection(testConfigEntry.cases.RANGE_KEYBOARD.block_1);
+
+			cy.realPress(["ArrowDown", "ArrowDown", "Space"]);
+			cy.realPress(["Shift", "ArrowDown"]);
+			checkSelection(testConfigEntry.cases.RANGE_KEYBOARD.block_2);
+		});
+	});
+});