@ui5/webcomponents 2.9.0 → 2.10.0-rc.0

package/cypress/specs/RadioButton.cy.tsx

@@ -0,0 +1,499 @@
+
+import RadioButton from "../../src/RadioButton.js";
+import Input from "../../src/Input.js";
+import Label from "../../src/Label.js";
+
+describe("Rendering", () => {
+	it("DOM structure", () => {
+		cy.mount(
+			<>
+				<RadioButton id="testRbtn" text="N/A" disabled name="test"></RadioButton>
+				<RadioButton id="testRbtn1" text="Male" name="test"></RadioButton>
+				<RadioButton id="groupRbReadOnly" name="a" readonly text="Option E"></RadioButton>
+			</>);
+
+		cy.get("#testRbtn1")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("not.have.attr", "aria-disabled");
+
+		cy.get("#testRbtn1")
+			.shadow()
+			.find("input")
+			.should("not.have.attr", "disabled");
+
+		cy.get("#testRbtn")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("have.attr", "aria-disabled");
+
+		cy.get("#testRbtn")
+			.shadow()
+			.find("input")
+			.should("have.attr", "disabled");
+
+		cy.get("#groupRbReadOnly")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("have.attr", "aria-disabled");
+
+		cy.get("#groupRbReadOnly")
+			.shadow()
+			.find("input")
+			.should("have.attr", "readonly");
+
+		cy.get("#groupRbReadOnly")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("have.attr", "aria-disabled");
+	});
+});
+
+describe("RadioButton general interaction", () => {
+	it("tests change event", () => {
+		const changeEventStub = cy.stub().as("myStub");
+		cy.mount(<RadioButton id="rb1" onChange={changeEventStub}></RadioButton>);
+
+		cy.get("#rb1")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("exist");
+
+		cy.get("@myStub").should("not.have.been.called");
+
+		cy.get("#rb1").realClick();
+		cy.get("@myStub").should("have.been.called");
+
+		cy.get("#rb1").realClick();
+		cy.get("@myStub").should("have.been.calledOnce");
+	});
+
+	it("tests change event upon ENTER", () => {
+		const changeEventStub = cy.stub().as("myStub");
+		cy.mount(
+			<>
+				<RadioButton id="rb1"></RadioButton>
+				<RadioButton id="rb2" text="Option B" onChange={changeEventStub}></RadioButton>
+			</>);
+
+		cy.get("#rb1")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("exist");
+
+		cy.get("#rb1").realClick();
+		cy.get("#rb1").should("be.focused");
+		cy.get("#rb1").realPress("Tab");
+
+		cy.get("#rb2")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("exist");
+
+		cy.get("@myStub").should("not.have.been.called");
+		cy.get("#rb2").realPress("Enter");
+		cy.get("@myStub").should("have.been.called");
+
+		cy.get("#rb2").realPress("Enter");
+		cy.get("@myStub").should("have.been.calledOnce");
+	});
+
+	it("tests change event upon SPACE", () => {
+		const changeEventStub = cy.stub().as("myStub");
+		cy.mount(
+			<>
+				<RadioButton id="rb2" text="Option B"></RadioButton>
+				<RadioButton id="rb3" wrappingType="Normal" text="Option C" onChange={changeEventStub}></RadioButton>
+			</>);
+
+		cy.get("#rb2")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("exist");
+
+		cy.get("#rb2").realClick();
+		cy.get("#rb2").should("be.focused");
+		cy.get("#rb2").realPress("Tab");
+
+		cy.get("#rb3")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("exist");
+
+		cy.get("@myStub").should("not.have.been.called");
+		cy.get("#rb3").realPress("Space");
+		cy.get("@myStub").should("have.been.called");
+
+		cy.get("#rb3").realPress("Space");
+		cy.get("@myStub").should("have.been.calledOnce");
+	});
+
+	it("tests change event not fired, when disabled", () => {
+		const changeEventStub = cy.stub().as("myStub");
+		cy.mount(<RadioButton id="rb4" disabled text="Option D" onChange={changeEventStub}></RadioButton>);
+
+		cy.get("#rb4")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("exist");
+
+		cy.get("#rb4").realClick();
+		cy.get("#rb4").should("be.focused");
+		cy.get("#rb4").realPress("Space");
+		cy.get("#rb4").realPress("Enter");
+
+		cy.get("@myStub").should("not.have.been.called");
+	});
+
+	it("tests radio buttons selection within group with ARROW-RIGHT key", () => {
+		cy.mount(
+			<>
+				<Input id="tabField"></Input>
+				<RadioButton id="groupRb1" name="a" wrappingType="None" text="Option A long long should shrink long long text text text text text text text text"></RadioButton>
+				<RadioButton id="groupRb2" name="a" disabled text="Option C"></RadioButton>
+				<RadioButton id="groupRb3" name="a" text="Option D"></RadioButton>
+				<RadioButton id="groupRbReadOnly" name="a" readonly text="Option E"></RadioButton>
+			</>);
+
+		cy.get("#tabField").should("exist");
+		cy.get("#tabField").realClick();
+		cy.get("#tabField").should("be.focused");
+		cy.get("#tabField").realPress("Tab");
+
+		cy.get("#groupRb1").should("exist");
+		cy.get("#groupRb1").should("be.focused");
+		cy.get("#groupRb1").realPress("ArrowRight");
+
+		cy.get("#groupRb1").should("have.prop", "checked", false);
+		cy.get("#groupRb3").should("have.prop", "checked", true);
+
+		cy.get("#groupRb3").should("exist");
+		cy.get("#groupRb3").should("be.focused");
+		cy.get("#groupRb3").realPress("ArrowRight");
+
+		cy.get("#groupRb3").should("have.prop", "checked", true);
+		cy.get("#groupRbReadOnly").should("have.prop", "checked", false);
+		cy.get("#groupRbReadOnly").should("be.focused");
+	});
+
+	it("tests radio buttons selection within group with ARROW-LEFT key", () => {
+		cy.mount(
+			<>
+				<RadioButton id="groupRb4" name="b" wrappingType="None" text="Option A long long should shrink long long text text text text text text text text"></RadioButton>
+				<RadioButton id="groupRb5" name="b" disabled text="Option C"></RadioButton>
+				<RadioButton id="groupRb6" name="b" text="Option D"></RadioButton>
+			</>);
+
+		cy.get("#groupRb4").should("exist");
+		cy.get("#groupRb6").should("exist");
+		cy.get("#groupRb4").realClick();
+
+		cy.get("#groupRb4").should("be.focused");
+
+		cy.realPress("ArrowLeft");
+
+		cy.get("#groupRb4").should("have.prop", "checked", false);
+		cy.get("#groupRb6").should("have.prop", "checked", true);
+	});
+
+	it("tests tabindex within group with selected item", () => {
+		cy.mount(
+			<>
+				<RadioButton id="testRbtn11" name="test2" checked text="Selected A"></RadioButton>
+				<RadioButton id="testRbtn12" name="test2" disabled text="Disabled B"></RadioButton>
+				<RadioButton id="testRbtn13" name="test2" text="Standard C"></RadioButton>
+			</>);
+
+		cy.get("#testRbtn11")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("have.attr", "tabindex", "0");
+
+		cy.get("#testRbtn12")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("have.attr", "tabindex", "-1");
+
+		cy.get("#testRbtn13")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("have.attr", "tabindex", "-1");
+	});
+
+	it("tests tabindex within group with no checked item", () => {
+		cy.mount(
+			<>
+				<RadioButton id="testRbtn1" text="Male" name="test"></RadioButton>
+				<RadioButton id="testRbtn2" text="Female" name="test"></RadioButton>
+			</>);
+
+		cy.get("#testRbtn1")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("have.attr", "tabindex", "0");
+
+		cy.get("#testRbtn2")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("have.attr", "tabindex", "-1");
+	});
+
+	it("tests radio buttons selection within group by clicking", () => {
+		cy.mount(
+			<>
+				<RadioButton id="groupRb4" name="b" wrappingType="None" text="Option A long long should shrink long long text text text text text text text text"></RadioButton>
+				<RadioButton id="groupRb6" checked name="b" text="Option D"></RadioButton>
+			</>);
+
+		cy.get("#groupRb4")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("exist");
+
+		cy.get("#groupRb6")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("exist");
+
+		cy.get("#groupRb4").realClick();
+
+		cy.get("#groupRb6")
+			.should("have.prop", "checked", false);
+
+		cy.get("#groupRb6")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("have.attr", "tabindex", "-1");
+
+		cy.get("#groupRb4").should("have.prop", "checked", true);
+
+		cy.get("#groupRb4")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("have.attr", "tabindex", "0");
+	});
+
+	it("tests single selection within group, even if multiple radios are set as checked", () => {
+		cy.mount(
+			<>
+				<RadioButton id="groupRb8" text="Critical" valueState="Critical" checked name="GroupB"></RadioButton>
+				<RadioButton id="groupRb9" text="Negative" valueState="Negative" checked name="GroupB"></RadioButton>
+				<RadioButton id="groupRb10" text="Default selected" valueState="None" checked name="GroupB"></RadioButton>
+			</>);
+
+		cy.get("#groupRb8").should("not.have.attr", "checked");
+		cy.get("#groupRb9").should("not.have.attr", "checked");
+		cy.get("#groupRb10").should("have.attr", "checked");
+	});
+
+	it("tests change event from radio buttons within group", () => {
+		const changeEventStub = cy.stub().as("myStub");
+		cy.mount(<RadioButton id="groupRb7" text="None selected" onChange={changeEventStub} valueState="None" name="GroupB"></RadioButton>);
+
+		cy.get("#groupRb7")
+			.shadow()
+			.find(".ui5-radio-root")
+			.should("exist");
+
+		cy.get("@myStub").should("not.have.been.called");
+
+		cy.get("#groupRb7").realClick();
+
+		cy.get("@myStub").should("be.calledOnce");
+		cy.get("#groupRb7").should("have.prop", "checked", true);
+	});
+
+	it("tests truncating and wrapping", () => {
+		const RADIOBUTTON_DEFAULT_HEIGHT = 44;
+		cy.mount(
+			<>
+				<RadioButton id="truncatingRb" wrappingType="None" text="Long long long long long long long long long long text that should truncate at some point"></RadioButton>
+				<br />
+				<RadioButton id="wrappingRb" wrappingType="Normal" text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s." class="radiobutton2auto"></RadioButton>
+			</>);
+
+		cy.get("#truncatingRb").should("have.prop", "wrappingType", "None");
+		cy.get("#wrappingRb").should("have.prop", "wrappingType", "Normal");
+
+		cy.get("#truncatingRb").invoke("height").should($truncatedLabelHeight => {
+			expect($truncatedLabelHeight).to.be.equal(RADIOBUTTON_DEFAULT_HEIGHT);
+		});
+		cy.get("#wrappingRb").invoke("height").should($truncatedLabelHeight => {
+			expect($truncatedLabelHeight).to.be.equal(RADIOBUTTON_DEFAULT_HEIGHT);
+		});
+	});
+
+	it("tests accessibleName", () => {
+		const RADIOBUTTON_LABEL = "Sample Label";
+		const RADIOBUTTON_TEXT = "Sample Text";
+
+		cy.mount(
+			<>
+				<RadioButton id="rb-acc-name" accessible-name="Sample Label"></RadioButton>
+				<RadioButton id="rb-acc-name-text" text="Sample Text" accessible-name="Sample Label"></RadioButton>
+			</>);
+
+		cy.get("#rb-acc-name").should('have.prop', "ariaLabelText", RADIOBUTTON_LABEL);
+		cy.get("#rb-acc-name-text").should('have.prop', "ariaLabelText", `${RADIOBUTTON_LABEL} ${RADIOBUTTON_TEXT}`);
+	});
+
+	it("tests accessibleNameRef", () => {
+		const LABEL_TEXT = "Label for this radio button:";
+		cy.mount(
+			<>
+				<Label id="lbl-rb-acc-name-ref">{LABEL_TEXT}</Label>
+				<RadioButton id="rb-acc-name-ref" accessibleNameRef="lbl-rb-acc-name-ref"></RadioButton>
+			</>);
+
+		cy.get("#rb-acc-name-ref").should("have.prop", "ariaLabelText", LABEL_TEXT);
+	});
+
+	it("tests accessibleNameRef and radio button text together", () => {
+		const LABEL_TEXT = "Label for this radio button:";
+		const RADIO_BUTTON_TEXT = "Sample Text";
+		cy.mount(
+			<>
+				<Label id="lbl-rb-acc-name-ref-with-text">{LABEL_TEXT}</Label>
+				<RadioButton id="rb-acc-name-ref-with-text" accessibleNameRef="lbl-rb-acc-name-ref-with-text" text={RADIO_BUTTON_TEXT}></RadioButton>
+			</>);
+
+		cy.get("#rb-acc-name-ref-with-text").should("have.prop", "ariaLabelText", `${LABEL_TEXT} ${RADIO_BUTTON_TEXT}`);
+	});
+
+	it("tests accessibleNameRef when the radio button is wrapped by another custom element", () => {
+		const LABEL_TEXT = "Label for this radio button:";
+		cy.mount(
+			<>
+				<Label id="lbl-rb-acc-name-ref">{LABEL_TEXT}</Label>
+				<RadioButton id="rb-acc-name-ref-wrapped" accessibleNameRef="lbl-rb-acc-name-ref"></RadioButton>
+			</>);
+
+		cy.get("#rb-acc-name-ref-wrapped").should("have.prop", "ariaLabelText", LABEL_TEXT);
+	});
+
+	it("correctly assigns tabindex when the whole group has been removed from DOM and added back to DOM", () => {
+		cy.mount(<div id="rbGroupContainer"></div>);
+
+		cy.get("#rbGroupContainer").then(($el) => {
+			$el[0].innerHTML = `
+				<ui5-radio-button id="optionA" name="sameGroup" text="A"></ui5-radio-button>
+				<ui5-radio-button id="optionB" name="sameGroup" text="B"></ui5-radio-button>
+				<ui5-radio-button id="optionC" name="sameGroup" text="C"></ui5-radio-button>
+			`;
+		});
+
+		cy.get("#optionA").shadow().find(".ui5-radio-root").should('have.attr', "tabindex", "0");
+		cy.get("#optionB").shadow().find(".ui5-radio-root").should('have.attr', "tabindex", "-1");
+		cy.get("#optionC").shadow().find(".ui5-radio-root").should('have.attr', "tabindex", "-1");
+
+		cy.get("#rbGroupContainer").then(($el) => {
+			$el[0].innerHTML = "";
+			$el[0].innerHTML = `
+				<ui5-radio-button id="optionA" name="sameGroup" text="A"></ui5-radio-button>
+				<ui5-radio-button id="optionB" name="sameGroup" text="B"></ui5-radio-button>
+				<ui5-radio-button id="optionC" name="sameGroup" text="C"></ui5-radio-button>
+			`;
+		});
+
+		cy.get("#optionA").shadow().find(".ui5-radio-root").should('have.attr', "tabindex", "0");
+		cy.get("#optionB").shadow().find(".ui5-radio-root").should('have.attr', "tabindex", "-1");
+		cy.get("#optionC").shadow().find(".ui5-radio-root").should('have.attr', "tabindex", "-1");
+	});
+
+	it("tests form interaction", () => {
+		cy.mount(
+			<form id="formWithRequiredRadio">
+				<RadioButton id="formRadioBtnRequired" value="optionA" name="formGroup" text="Option A" required></RadioButton>
+				<RadioButton value="optionB" name="formGroup" text="Option B"></RadioButton>
+				<RadioButton value="optionC" name="formGroup" text="Option C"></RadioButton>
+				<Input type="submit" />
+			</form>);
+
+		cy.get<HTMLFormElement>("#formWithRequiredRadio").then(($el) => {
+			return $el[0].checkValidity()
+		}).should("be.false");
+		cy.get("#formRadioBtnRequired").should("have.prop", "required", true);
+		cy.get("#formRadioBtnRequired").should("have.prop", "checked", false);
+
+		cy.get("#formRadioBtnRequired")
+			.shadow()
+			.find(".ui5-radio-root")
+			.realClick();
+
+		cy.get<HTMLFormElement>("#formWithRequiredRadio").then(($el) => {
+			return $el[0].checkValidity()
+		}).should("be.true");
+		cy.get("#formRadioBtnRequired").should("have.prop", "checked", true);
+	});
+
+	it("tests dynamically creating of buttons", () => {
+		cy.mount(<div id="radioContainer"></div>);
+
+		cy.get("#radioContainer").then($container => {
+			const rb1 = document.createElement("ui5-radio-button") as RadioButton;
+			const rb2 = document.createElement("ui5-radio-button") as RadioButton;
+
+			cy.spy<RadioButton>((rb1 as RadioButton), "appendChild").as("showOutsideViewport");
+
+			rb1.id = "testDRbtn11";
+			rb1.name = "test2";
+			rb1.text = "A";
+
+			$container[0].appendChild(rb1);
+
+			cy.spy<RadioButton>((rb2 as RadioButton), "appendChild").as("showOutsideViewport");
+
+			rb2.id = "testDRbtn12";
+			rb2.name = "test2";
+			rb2.text = "B";
+
+			$container[0].appendChild(rb2);
+		});
+
+		cy.get("#testDRbtn11")
+			.should("be.visible");
+
+		cy.get("#testDRbtn12")
+			.should("be.visible");
+	});
+});
+
+describe("RadioButton keyboard handling in RTL", () => {
+	it("Arrow Left", () => {
+		cy.mount(
+			<div dir="rtl">
+				<RadioButton id="rtlOptionA" name="rtlGroup" text="Option A" checked></RadioButton>
+				<RadioButton id="rtlOptionB" name="rtlGroup" text="Option B"></RadioButton>
+				<RadioButton id="rtlOptionC" name="rtlGroup" text="Option C"></RadioButton>
+			</div>);
+
+		cy.get("#rtlOptionA").should("exist");
+		cy.get("#rtlOptionA").realClick().realPress("ArrowLeft");
+
+		cy.get("#rtlOptionB").should("have.prop", "checked", true);
+
+		cy.get("#rtlOptionB").should("exist");
+		cy.get("#rtlOptionB").realPress("ArrowLeft");
+
+		cy.get("#rtlOptionC").should("have.prop", "checked", true);
+	});
+
+	it("Arrow Right", () => {
+		cy.mount(
+			<div dir="rtl">
+				<RadioButton id="rtlOptionA" name="rtlGroup" text="Option A" checked></RadioButton>
+				<RadioButton id="rtlOptionB" name="rtlGroup" text="Option B"></RadioButton>
+				<RadioButton id="rtlOptionC" name="rtlGroup" text="Option C"></RadioButton>
+			</div>);
+
+		cy.get("#rtlOptionA").should("exist");
+		cy.get("#rtlOptionA").realClick().realPress("ArrowRight");
+
+		cy.get("#rtlOptionC").should("have.prop", "checked", true);
+
+		cy.get("#rtlOptionC").should("exist");
+		cy.get("#rtlOptionC").realPress("ArrowRight");
+
+		cy.get("#rtlOptionB").should("have.prop", "checked", true);
+	});
+});

package/cypress/specs/RatingIndicator.cy.tsx

@@ -173,7 +173,7 @@ describe("RatingIndicator", () => {
 			cy.mount(
 				<>
 					<label id="label-acc-name-ref">{ACCESSIBLE_NAME_REF_TEXT}</label>
-					<RatingIndicator id="rating-indicator-acc-name-ref" accessible-name-ref="label-acc-name-ref"></RatingIndicator>
+					<RatingIndicator id="rating-indicator-acc-name-ref" accessibleNameRef="label-acc-name-ref"></RatingIndicator>
 				</>
 			);
 

package/cypress/specs/Select.cy.tsx

@@ -208,7 +208,7 @@ describe("Select - Accessibility", () => {
 describe("Select - Popover", () => {
 	it("Popover should render custom value state", () => {
 		cy.mount(
-			<Select id="warningSelect" value-state="Critical">
+			<Select id="warningSelect" valueState="Critical">
 				<Option>This option has text bigger than ui5-select's width</Option>
 				<div slot="valueStateMessage">Custom message</div>
 			</Select>

package/cypress/specs/TabContainer.cy.tsx

@@ -4,7 +4,7 @@ import Tab from "../../src/Tab.js";
 describe("TabContainer general interaction", () => {
 	it("Tests no auto selection", () => {
 		cy.mount(
-			<TabContainer no-auto-selection id="tcNoAuto">
+			<TabContainer noAutoSelection id="tcNoAuto">
 				<Tab text="Products ID">
 					tab1
 				</Tab>

package/cypress/specs/Table.cy.tsx

@@ -743,14 +743,14 @@ describe("Table - Interactive Rows", () => {
 describe("Table - HeaderCell", () => {
 	beforeEach(() => {
 		cy.mount(
-			<Table overflow-mode="Popin">
+			<Table overflowMode="Popin">
 				<TableHeaderRow slot="headerRow">
-					<TableHeaderCell min-width="300px">Column A</TableHeaderCell>
-					<TableHeaderCell min-width="200px" sort-indicator="Ascending">
+					<TableHeaderCell minWidth="300px">Column A</TableHeaderCell>
+					<TableHeaderCell minWidth="200px" sortIndicator="Ascending">
 						<Label required wrappingType="None">Column B</Label>
 						<TableHeaderCellActionAI slot="action"></TableHeaderCellActionAI>
 					</TableHeaderCell>
-					<TableHeaderCell min-width="150px" popin-text="Popin Text">
+					<TableHeaderCell minWidth="150px" popinText="Popin Text">
 						<Label required>Column C</Label>
 					</TableHeaderCell>
 				</TableHeaderRow>

package/cypress/specs/TableNavigationFixedHeader.cy.tsx

@@ -24,17 +24,17 @@ describe("Table - Keyboard Navigation with Fixed Headers", () => {
 	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;">
+				<Bar id="toolbar" design="Header" 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">
+				<Table id="table0" overflowMode="Popin" stickyTop="50px" accessibleNameRef="title" noDataText="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>
+						<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">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>
@@ -88,12 +88,12 @@ describe("Table - Keyboard Navigation with Fixed Headers", () => {
 
 	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;">
+			<Table id="table1" overflowMode="Popin" stickyTop="0" accessibleNameRef="title" noDataText="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>
+					<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">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>
@@ -147,17 +147,17 @@ describe("Table - Keyboard Navigation with Fixed Headers", () => {
 	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;">
+				<Bar id="toolbar2" design="Header" 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">
+				<Table id="table2" overflowMode="Popin" stickyTop="50px" accessibleNameRef="title" noDataText="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>
+						<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">Column D</TableHeaderCell>
 					</TableHeaderRow>
 					${Array.from({ length: 100 }).map((row, index) =>
 						<TableRow id={`row-${index + 1}-2`}>

package/cypress/specs/TableSelection.cy.tsx

@@ -215,15 +215,10 @@ Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
 			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();
+			cy.get("@row0").shadow().find("#selection-component").realClick({ shiftKey: true });
 			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_edge);
 		});