@ui5/webcomponents 2.9.0 → 2.9.1-rc.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.9.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0...v2.9.1-rc.0) (2025-04-10)
+
+
+### Bug Fixes
+
+* change event is only called once for range selection ([#11192](https://github.com/SAP/ui5-webcomponents/issues/11192)) ([e913485](https://github.com/SAP/ui5-webcomponents/commit/e9134855822284c6bb6f1a178e0368b7d76d81f7))
+* **ui5-form:** fix dangling aria-labelledby ([#11273](https://github.com/SAP/ui5-webcomponents/issues/11273)) ([d455af8](https://github.com/SAP/ui5-webcomponents/commit/d455af898f8a6235e2398321594e7a46366104f1)), closes [#11262](https://github.com/SAP/ui5-webcomponents/issues/11262)
+* **ui5-message-strip:** adjust accessibility ([#11267](https://github.com/SAP/ui5-webcomponents/issues/11267)) ([3311b17](https://github.com/SAP/ui5-webcomponents/commit/3311b1773dfe323a42f9c40ba503f8fbf461ca6e))
+* **ui5-table-growing:** add rootMargin to observer ([#11242](https://github.com/SAP/ui5-webcomponents/issues/11242)) ([da527cb](https://github.com/SAP/ui5-webcomponents/commit/da527cb42166c68c4f19742d54d7ee7d910d13dd))
+
+
+
+
+
 # [2.9.0](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.3...v2.9.0) (2025-04-04)
 
 

package/cypress/specs/Avatar.cy.tsx

@@ -21,7 +21,7 @@ describe("Accessibility", () => {
 		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.mount(<Avatar id="avatar-with-icon" icon={ICON_NAME} accessibleName={ACCESSIBLE_NAME}></Avatar>);
 
 		cy.get("#avatar-with-icon")
 			.shadow()

package/cypress/specs/Calendar.cy.tsx

@@ -489,7 +489,7 @@ describe("Calendar general interaction", () => {
 	});
 
 	it("Buttons for month and year in header are rendered with correct value", () => {
-		cy.mount(<Calendar id="calendar1" primary-calendar-type="Islamic" secondary-calendar-type="Gregorian"></Calendar>);
+		cy.mount(<Calendar id="calendar1" primaryCalendarType="Islamic" secondaryCalendarType="Gregorian"></Calendar>);
 		const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000;
 
 		cy.get<Calendar>("#calendar1").invoke("prop", "timestamp", timestamp);
@@ -516,7 +516,7 @@ describe("Calendar general interaction", () => {
 	});
 
 	it("Calendar render two type for Month when MonthPicker is opened", () => {
-		cy.mount(<Calendar id="calendar1" primary-calendar-type='Islamic' secondary-calendar-type='Gregorian'></Calendar>);
+		cy.mount(<Calendar id="calendar1" primaryCalendarType='Islamic' secondaryCalendarType='Gregorian'></Calendar>);
 		const timestamp = new Date(Date.UTC(2000, 0, 1, 0, 0, 0)).valueOf() / 1000;
 
 		cy.get<Calendar>("#calendar1").invoke("prop", "timestamp", timestamp);
@@ -542,7 +542,7 @@ describe("Calendar general interaction", () => {
 	});
 
 	it("Calendar render two type for Year when Year Picker is opened", () => {
-		cy.mount(<Calendar id="calendar1" primary-calendar-type='Islamic' secondary-calendar-type='Gregorian'></Calendar>);
+		cy.mount(<Calendar id="calendar1" primaryCalendarType='Islamic' secondaryCalendarType='Gregorian'></Calendar>);
 		const timestamp = new Date(Date.UTC(2000, 0, 1, 0, 0, 0)).valueOf() / 1000;
 
 		cy.get<Calendar>("#calendar1").invoke("prop", "timestamp", timestamp);

package/cypress/specs/ComboBox.cy.tsx

@@ -56,7 +56,7 @@ describe("Keyboard interaction", () => {
 	it("tests navigating with arrow down when item text is contained in the previous selected item (with grouping)", () => {
 		cy.mount(
 			<ComboBox>
-				<ComboBoxItemGroup header-text="Bulgaria">
+				<ComboBoxItemGroup headerText="Bulgaria">
 					<ComboBoxItem text="Bulgar"></ComboBoxItem>
 					<ComboBoxItem text="Bulg"></ComboBoxItem>
 					<ComboBoxItem text="Bul"></ComboBoxItem>

package/cypress/specs/DateTimePicker.cy.tsx

@@ -1,6 +1,7 @@
 import DateTimePicker from "../../src/DateTimePicker.js";
 import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
+import type ResponsivePopover from "../../src/ResponsivePopover.js";
 
 function DefaultDateTimePicker() {
 	return (
@@ -12,7 +13,7 @@ function DateTimePickerWithMinutes() {
 	return <DateTimePicker
 		id="dtMinutes"
 		formatPattern="dd/MM/yyyy, hh:mm a"
-		value="13/04/2020, 09:16 AM"/>;
+		value="13/04/2020, 09:16 AM" />;
 }
 
 function DateTimePickerWithSeconds({ initialValue }: { initialValue?: string }) {
@@ -178,12 +179,12 @@ describe("DateTimePicker general interaction", () => {
 			cy.get("ui5-calendar")
 				.shadow()
 				.as("calendar");
-			
+
 			cy.get("@calendar")
 				.find("ui5-daypicker")
 				.shadow()
 				.as("daypicker");
-			
+
 			cy.get("@daypicker")
 				.find(".ui5-dp-item--now")
 				.should("be.focused")
@@ -280,12 +281,12 @@ describe("DateTimePicker general interaction", () => {
 				cy.get("ui5-calendar")
 					.shadow()
 					.as("calendar");
-				
+
 				cy.get("@calendar")
 					.find("ui5-daypicker")
 					.shadow()
 					.as("daypicker");
-				
+
 				cy.get("@daypicker")
 					.find(".ui5-dp-item--selected")
 					.should("be.focused")
@@ -330,51 +331,51 @@ describe("DateTimePicker general interaction", () => {
 	it("tests change event is prevented on submit when prevent default is called", () => {
 		cy.mount(<DefaultDateTimePicker />);
 
-		// Prevent default behavior of ui5-change event.
 		cy.get("[ui5-datetime-picker]")
 			.as("dtp")
-			
+
+		cy.get("@dtp")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.as("input");
+
+		cy.get("@dtp")
+			.shadow()
+			.find("ui5-responsive-popover ui5-calendar")
+			.shadow()
+			.find("ui5-daypicker")
+			.as("daypicker");
+
 		cy.get("@dtp")
 			.then($el => {
-			$el[0].addEventListener("ui5-change", (ev: Event) => {
-				ev.preventDefault();
+				$el[0].addEventListener("ui5-change", (ev: Event) => {
+					ev.preventDefault();
+				});
 			});
-		});
 
+		// act: open the picker
 		cy.ui5DateTimePickerOpen("#dt");
 
-		cy.ui5DateTimePickerGetPopover("#dt").within(() => {
-			// Click the focused day and confirm the selection.
-			cy.get("ui5-calendar")
-				.shadow()
-				.as("calendar");
-
-			cy.get("@calendar")
-				.find("ui5-daypicker")
-				.shadow()
-				.as("daypicker");
-
-			cy.get("@daypicker")
-				.find("[data-sap-focus-ref]")
-				.should("be.focused")
-				.realClick();
-
-			cy.get("#ok").realClick();
-		});
+		// act: click today's date
+		cy.get("@daypicker")
+			.shadow()
+			.find("[data-sap-focus-ref]")
+			.should("be.focused")
+			.realClick();
 
+		// act: confirm selection
 		cy.get("@dtp")
 			.shadow()
-			.find("[ui5-responsive-popover]")
-			.should($rp => {
-				expect($rp.is(":popover-open")).to.be.false;
-			})
-			.and("not.have.attr", "open");
+			.find("ui5-responsive-popover #ok")
+			.realClick();
 
+		// assert: the picker is closed
 		cy.get("@dtp")
 			.shadow()
-			.find("[ui5-datetime-input]")
-			.as("input");
-		
+			.find("ui5-responsive-popover")
+			.should("exist").and("not.be.visible");
+
+		// assert: the value is not changed
 		cy.get("@input")
 			.should("be.focused")
 			.should("have.attr", "value", "");
@@ -454,7 +455,7 @@ describe("DateTimePicker general interaction", () => {
 				.find("ui5-daypicker")
 				.shadow()
 				.as("daypicker");
-			
+
 			cy.get("@daypicker")
 				.find("[data-sap-focus-ref]")
 				.realClick()

package/cypress/specs/F6.cy.tsx

@@ -872,18 +872,18 @@ describe("F6 navigation", () => {
 			cy.mount(
 				<div>
 					<div class="section" data-sap-ui-fastnavgroup="true">
-						<ui5-button>Non group focusable</ui5-button>
+						<Button>Non group focusable</Button>
 					</div>
 					<div data-sap-ui-fastnavgroup-container="true">
 						<div class="section" data-sap-ui-fastnavgroup="true">
-							<ui5-button id="first">First group focusable</ui5-button>
+							<Button id="first">First group focusable</Button>
 						</div>
 						<div class="section" data-sap-ui-fastnavgroup="true">
-							<ui5-button id="second">Second group focusable</ui5-button>
+							<Button id="second">Second group focusable</Button>
 						</div>
 					</div>
 					<div class="section" data-sap-ui-fastnavgroup="true">
-						<ui5-button>Non group focusable</ui5-button>
+						<Button>Non group focusable</Button>
 					</div>
 				</div>
 			);

package/cypress/specs/Form.cy.tsx

@@ -4,6 +4,7 @@ import FormItem from "../../src/FormItem.js";
 import FormGroup from "../../src/FormGroup.js";
 import Label from "../../src/Label.js";
 import Text from "../../src/Text.js";
+import Title from "../../src/Title.js";
 import Input from "../../src/Input.js";
 
 describe("General API", () => {
@@ -786,21 +787,21 @@ describe("Accessibility", () => {
 
 						<FormItem>
 							<Label id="cityLbl" for="cityInp" slot="labelContent">ZIP Code/City:</Label>
-							<Input id="cityInp" value="411" accessible-name-ref="cityLbl"></Input>
-							<Input value="Maintown" accessible-name-ref="cityLbl"></Input>
+							<Input id="cityInp" value="411" accessibleNameRef="cityLbl"></Input>
+							<Input value="Maintown" accessibleNameRef="cityLbl"></Input>
 						</FormItem>
 					</FormGroup>
 
 					<FormGroup headerText="Contact">
 						<FormItem>
 							<Label id="streetLbl" for="streetInp" slot="labelContent">Street:</Label>
-							<Input id="streetInp" value="Main St" accessible-name-ref="streetLbl"></Input>
-							<Input id="streetNumberInp" value="1618" accessible-name-ref="streetLbl"></Input>
+							<Input id="streetInp" value="Main St" accessibleNameRef="streetLbl"></Input>
+							<Input id="streetNumberInp" value="1618" accessibleNameRef="streetLbl"></Input>
 						</FormItem>
 
 						<FormItem>
 							<Label id="countryLbl" for="countrySel" slot="labelContent">Country:</Label>
-							<Input id="countrySel" accessible-name-ref="countryLbl"></Input>
+							<Input id="countrySel" accessibleNameRef="countryLbl"></Input>
 						</FormItem>
 					</FormGroup>
 				</Form>
@@ -813,19 +814,19 @@ describe("Accessibility", () => {
 
 					<FormItem>
 						<Label id="cityLbl2" for="cityInp2" slot="labelContent">ZIP Code/City:</Label>
-						<Input id="cityInp2" value="411" accessible-name-ref="cityLbl2"></Input>
-						<Input value="Maintown" accessible-name-ref="cityLbl2"></Input>
+						<Input id="cityInp2" value="411" accessibleNameRef="cityLbl2"></Input>
+						<Input value="Maintown" accessibleNameRef="cityLbl2"></Input>
 					</FormItem>
 
 					<FormItem>
 						<Label id="streetLbl2" for="streetInp2" slot="labelContent">Street:</Label>
-						<Input id="streetInp2" value="Main St" accessible-name-ref="streetLbl2"></Input>
-						<Input id="streetNumberInp" value="1618" accessible-name-ref="streetLbl2"></Input>
+						<Input id="streetInp2" value="Main St" accessibleNameRef="streetLbl2"></Input>
+						<Input id="streetNumberInp" value="1618" accessibleNameRef="streetLbl2"></Input>
 					</FormItem>
 
 					<FormItem>
 						<Label id="countryLbl2" for="countrySel2" slot="labelContent">Country:</Label>
-						<Input id="countrySel2" accessible-name-ref="countryLbl2"></Input>
+						<Input id="countrySel2" accessibleNameRef="countryLbl2"></Input>
 					</FormItem>
 				</Form>
 			</>);
@@ -856,3 +857,65 @@ describe("Accessibility", () => {
 			.should("be.focused");
 	});
 });
+
+
+ui5AccDescribe("Automated accessibility tests", () => {
+	it("with header text", () => {
+		cy.mount(
+			<Form headerText="Address">
+				<FormItem>
+					<Label slot="labelContent">Name:</Label>
+					<Text>Red Point Stores</Text>
+				</FormItem>
+				
+				<FormItem>
+					<Label slot="labelContent">ZIP Code/City:</Label>
+					<Text>411 Maintown</Text>
+				</FormItem>
+				
+				<FormItem>
+					<Label slot="labelContent">Street:</Label>
+					<Text>Main St 1618</Text>
+				</FormItem>
+
+				<FormItem>
+					<Label slot="labelContent">Country:</Label>
+					<Text>Germany</Text>
+				</FormItem>
+			</Form>
+		);
+
+		cy.ui5CheckA11y();
+	})
+
+	it("with custom header", () => {
+		cy.mount(
+			<Form>
+				<div slot="header">
+					<Title>Address</Title>
+				</div>
+				<FormItem>
+					<Label slot="labelContent">Name:</Label>
+					<Text>Red Point Stores</Text>
+				</FormItem>
+				
+				<FormItem>
+					<Label slot="labelContent">ZIP Code/City:</Label>
+					<Text>411 Maintown</Text>
+				</FormItem>
+				
+				<FormItem>
+					<Label slot="labelContent">Street:</Label>
+					<Text>Main St 1618</Text>
+				</FormItem>
+
+				<FormItem>
+					<Label slot="labelContent">Country:</Label>
+					<Text>Germany</Text>
+				</FormItem>
+			</Form>
+		);
+
+		cy.ui5CheckA11y();
+	})
+});

package/cypress/specs/FormSupport.cy.tsx

@@ -318,7 +318,7 @@ describe("Form support", () => {
 			<MultiComboBox id="multi_combobox8" name="multi_combobox8" value="ok">
 				<MultiComboBoxItem selected text="ok"></MultiComboBoxItem>
 			</MultiComboBox>
-			<MultiComboBox id="multi_combobox9" no-validation required
+			<MultiComboBox id="multi_combobox9" noValidation required
 				name="multi_combobox9"></MultiComboBox>
 			<MultiComboBox id="multi_combobox10" required name="multi_combobox10" value="ok"></MultiComboBox>
 			<MultiComboBox id="multi_combobox11" required name="multi_combobox11">
@@ -380,7 +380,7 @@ describe("Form support", () => {
 				<Token slot="tokens" text="ok"></Token>
 			</MultiInput>
 
-			<MultiInput id="multi_input9" allow-custom-values required name="multi_input9"></MultiInput>
+			<MultiInput id="multi_input9" required name="multi_input9"></MultiInput>
 			<MultiInput id="multi_input10" required name="multi_input10" value="ok"></MultiInput>
 			<MultiInput id="multi_input11" required name="multi_input11">
 				<Token slot="tokens" text="ok"></Token>
@@ -520,9 +520,9 @@ describe("Form support", () => {
 	it("ui5-range-slider in form", () => {
 		cy.mount(<form method="get">
 			<RangeSlider id="range_slider1"></RangeSlider>
-			<RangeSlider id="range_slider2" start-value="25" end-value="75"></RangeSlider>
+			<RangeSlider id="range_slider2" startValue={25} endValue={75}></RangeSlider>
 			<RangeSlider id="range_slider3" name="range_slider3"></RangeSlider>
-			<RangeSlider id="range_slider4" name="range_slider4" start-value="25" end-value="75"></RangeSlider>
+			<RangeSlider id="range_slider4" name="range_slider4" startValue={25} endValue={75}></RangeSlider>
 			<button type="submit">Submits forms</button>
 		</form>);
 

package/cypress/specs/Input.cy.tsx

@@ -342,7 +342,7 @@ describe("Input Tests", () => {
 describe("Input general interaction", () => {
 	it("handles suggestions selection cancel with ESC", () => {
 		cy.mount(
-			<Input id="myInputEsc" show-suggestions class="input3auto">
+			<Input id="myInputEsc" showSuggestions class="input3auto">
 				<SuggestionItem text="Chromium"></SuggestionItem>
 				<SuggestionItem text="Titanium"></SuggestionItem>
 				<SuggestionItem text="Iron"></SuggestionItem>

package/cypress/specs/Link.cy.tsx

@@ -23,7 +23,7 @@ describe("General API", () => {
 		cy.mount(
 			<>
 				<Link style="width: 100px" id="wrapping-link">Eu enim consectetur do amet elit Lorem ipsum dolor, sit amet consectetur adipisicing elit.</Link>
-				<Link style="width: 100px" id="non-wrapping-link" wrapping-type="None">Eu enim consectetur do amet elit Lorem ipsum dolor, sit amet consectetur adipisicing elit.</Link>
+				<Link style="width: 100px" id="non-wrapping-link" wrappingType="None">Eu enim consectetur do amet elit Lorem ipsum dolor, sit amet consectetur adipisicing elit.</Link>
 			</>
 		);
 
@@ -147,7 +147,7 @@ describe("General API", () => {
 	});
 
 	it("setting accessible-name applied on the host element is reflected on the anchor tag", () => {
-		cy.mount(<Link accessible-name="more info" tooltip="my tooltip">Click me</Link>);
+		cy.mount(<Link accessibleName="more info" tooltip="my tooltip">Click me</Link>);
 
 		cy.get("[ui5-link]")
 			.shadow()
@@ -200,7 +200,7 @@ describe("General API", () => {
 		cy.mount(
 			<>
 				<Link id="linkWithIcon" icon="employee">View employee profile</Link>
-				<Link id="linkWithEndIcon" end-icon="cloud">Weather today</Link>
+				<Link id="linkWithEndIcon" endIcon="cloud">Weather today</Link>
 			</>
 		);
 		cy.get("#linkWithIcon")

package/cypress/specs/MessageStrip.cy.tsx

@@ -68,14 +68,21 @@ describe("API", () => {
 		];
 
 		designs.forEach(({ design, btnText }) => {
-		  cy.mount(<MessageStrip class="top" design={design}>{design} design with icon and close button:</MessageStrip>);
+			cy.mount(<MessageStrip class="top" design={design}>{design} design with icon and close button:</MessageStrip>);
 
-		  cy.get("[ui5-message-strip]")
+			cy.get("[ui5-message-strip]")
 				.shadow()
 				.find("ui5-button")
 				.shadow()
 				.find("button")
 				.should("have.attr", "title", btnText);
+
+			cy.get("[ui5-message-strip]")
+				.shadow()
+				.find("ui5-button")
+				.shadow()
+				.find("button")
+				.should("have.attr", "aria-label", btnText);
 		});
 	});
 

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);
 		});