@ui5/webcomponents 2.9.0-rc.0 → 2.9.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.9.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.1...v2.9.0-rc.2) (2025-03-27)
+
+
+### Bug Fixes
+
+* **framework:** .d.ts errors that require skipLibCheck ([#11189](https://github.com/SAP/ui5-webcomponents/issues/11189)) ([92f0e68](https://github.com/SAP/ui5-webcomponents/commit/92f0e68c3b3b71ff27f707621b8b3da2248a2719))
+* **ui5-bar:** remove responsive paddings ([#11105](https://github.com/SAP/ui5-webcomponents/issues/11105)) ([e2024b1](https://github.com/SAP/ui5-webcomponents/commit/e2024b1bb7caaf12452a7e20b863eb569405706f)), closes [#10012](https://github.com/SAP/ui5-webcomponents/issues/10012)
+* **ui5-breadcrumbs:** show all items in popover on mobile ([#11138](https://github.com/SAP/ui5-webcomponents/issues/11138)) ([4d75b7d](https://github.com/SAP/ui5-webcomponents/commit/4d75b7db79ede9beee7611dde03de818ba48ad61)), closes [#9697](https://github.com/SAP/ui5-webcomponents/issues/9697)
+* **ui5-date-*:** make tests stable ([#11191](https://github.com/SAP/ui5-webcomponents/issues/11191)) ([b1d9311](https://github.com/SAP/ui5-webcomponents/commit/b1d931167bf29b600797974b29b788fbc3405b1f)), closes [#11188](https://github.com/SAP/ui5-webcomponents/issues/11188)
+* **ui5-input:** remove additional icon in Edge ([#11114](https://github.com/SAP/ui5-webcomponents/issues/11114)) ([9d2dfb1](https://github.com/SAP/ui5-webcomponents/commit/9d2dfb1293194fce19c99157892ac2db6ceff62f))
+* **ui5-popover:** fix popover flickering ([#10955](https://github.com/SAP/ui5-webcomponents/issues/10955)) ([712aae4](https://github.com/SAP/ui5-webcomponents/commit/712aae458b0a9279646ea079cb734674ae3e7b4f))
+* **ui5-tree:** noDataText is now properly rendered ([#11095](https://github.com/SAP/ui5-webcomponents/issues/11095)) ([e1c152c](https://github.com/SAP/ui5-webcomponents/commit/e1c152cbec16a47dd42e9813c68c0052828d6cdf)), closes [#11073](https://github.com/SAP/ui5-webcomponents/issues/11073)
+
+
+
+
+
+# [2.9.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.0...v2.9.0-rc.1) (2025-03-20)
+
+
+### Bug Fixes
+
+* **ui5-carousel:** fix typo mistake ([#11107](https://github.com/SAP/ui5-webcomponents/issues/11107)) ([e23f746](https://github.com/SAP/ui5-webcomponents/commit/e23f746bca7b858b92b15d1d4903432d65289422)), closes [#11032](https://github.com/SAP/ui5-webcomponents/issues/11032)
+* **ui5-combobox:** properly navigate with arrow down keys ([#11097](https://github.com/SAP/ui5-webcomponents/issues/11097)) ([967ef56](https://github.com/SAP/ui5-webcomponents/commit/967ef56962aa9f341305ed00a09177d62405a785)), closes [#11029](https://github.com/SAP/ui5-webcomponents/issues/11029)
+* **ui5-input:** fire input event on escape key ([#11079](https://github.com/SAP/ui5-webcomponents/issues/11079)) ([8b85288](https://github.com/SAP/ui5-webcomponents/commit/8b852881dd9364216f5051b587f2e7e5102b4945)), closes [#11021](https://github.com/SAP/ui5-webcomponents/issues/11021)
+* **ui5-li:** announce active state ([#11064](https://github.com/SAP/ui5-webcomponents/issues/11064)) ([b6b70a9](https://github.com/SAP/ui5-webcomponents/commit/b6b70a9f8ab2a78bceb0a8bca8ed2c12c63ea13d))
+* **ui5-list-item-group-header:** typo fixed ([#11100](https://github.com/SAP/ui5-webcomponents/issues/11100)) ([e8af105](https://github.com/SAP/ui5-webcomponents/commit/e8af1059d118fc77dcaef0b7dd7012ad406fde7a))
+* **ui5-menu-item:** remove dot from class ([#11119](https://github.com/SAP/ui5-webcomponents/issues/11119)) ([66bedb4](https://github.com/SAP/ui5-webcomponents/commit/66bedb421036af054cfc45a512953342f9917cdb)), closes [#11043](https://github.com/SAP/ui5-webcomponents/issues/11043)
+* **ui5-menu:** fix menu item type fix ([#11129](https://github.com/SAP/ui5-webcomponents/issues/11129)) ([3e68c57](https://github.com/SAP/ui5-webcomponents/commit/3e68c576fb9a577e51acf99e0608691b15b213fb)), closes [#10933](https://github.com/SAP/ui5-webcomponents/issues/10933)
+* **ui5-multi-combobox:** fix deletion of long tokens ([#11080](https://github.com/SAP/ui5-webcomponents/issues/11080)) ([5c6d746](https://github.com/SAP/ui5-webcomponents/commit/5c6d746b2354acc09172a53b0a1507ab3ff4458e)), closes [#10977](https://github.com/SAP/ui5-webcomponents/issues/10977)
+* **ui5-multiinput:** correct failing test ([#11111](https://github.com/SAP/ui5-webcomponents/issues/11111)) ([b30330d](https://github.com/SAP/ui5-webcomponents/commit/b30330d38ae574f628611f21b9078ee98df7b592))
+* **ui5-tag:** fix click event ([#11102](https://github.com/SAP/ui5-webcomponents/issues/11102)) ([3eec3bb](https://github.com/SAP/ui5-webcomponents/commit/3eec3bbbfc2fcaf6a5b4c6e70c7fcb7cd7e1bcec)), closes [#11096](https://github.com/SAP/ui5-webcomponents/issues/11096)
+
+
+### Features
+
+* **ui5-input:** support accessible description ([#10821](https://github.com/SAP/ui5-webcomponents/issues/10821)) ([410f4d2](https://github.com/SAP/ui5-webcomponents/commit/410f4d2fbc2f62742e419e437824a435c79fc6ef)), closes [#10131](https://github.com/SAP/ui5-webcomponents/issues/10131)
+* **ui5-search:** introduce experimental component ([#11125](https://github.com/SAP/ui5-webcomponents/issues/11125)) ([48f16fb](https://github.com/SAP/ui5-webcomponents/commit/48f16fb1d05957b3779aeb4868f3cebe5cac5bc2))
+* **ui5-select:** "icon" property introduced ([#11060](https://github.com/SAP/ui5-webcomponents/issues/11060)) ([0b242e3](https://github.com/SAP/ui5-webcomponents/commit/0b242e3e0e6d7c03dcbebd4fc798338627ebeb09)), closes [#10859](https://github.com/SAP/ui5-webcomponents/issues/10859)
+* **ui5-side-navigation:** enable the web component in popover placement ([#10701](https://github.com/SAP/ui5-webcomponents/issues/10701)) ([a4565fe](https://github.com/SAP/ui5-webcomponents/commit/a4565fe3a3ecb5a3d150942ed72faabbbc770b4a))
+
+
+
+
+
 # [2.9.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.1-rc.0...v2.9.0-rc.0) (2025-03-13)
 
 

package/cypress/specs/Breadcrumbs.mobile.cy.tsx

@@ -0,0 +1,53 @@
+import Breadcrumbs from "../../src/Breadcrumbs.js";
+import BreadcrumbsItem from "../../src/BreadcrumbsItem.js";
+
+describe("Breadcrumbs mobile behavior", () => {
+    before(() => {
+        cy.ui5SimulateDevice("phone");
+    });
+
+    it("displays all items in the popover on mobile", () => {
+        const breadcrumbItems = [
+            "Products",
+            "Categories",
+            "Laptops",
+            "Gaming Laptops",
+            "XPS Pro"
+        ];
+
+        cy.mount(
+            <Breadcrumbs>
+                {breadcrumbItems.map((item, index) => (
+                    <BreadcrumbsItem key={index} href={`#${item}`}>{item}</BreadcrumbsItem>
+                ))}
+            </Breadcrumbs>
+        );
+
+        // Open the overflow popover by clicking on the dropdown arrow within shadow DOM
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find(".ui5-breadcrumbs-dropdown-arrow-link-wrapper ui5-link")
+            .click();
+
+        // Wait for the popover to be fully open
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find("ui5-responsive-popover")
+            .shadow()
+            .find("ui5-dialog")
+            .should("be.visible");
+
+        // Verify that all items are displayed in the popover
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find("ui5-responsive-popover ui5-list ui5-li")
+            .should("have.length", breadcrumbItems.length);
+
+        // Verify the items are in the correct order (reversed)
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find("ui5-responsive-popover ui5-list ui5-li")
+            .eq(0)
+            .should("contain.text", breadcrumbItems[breadcrumbItems.length - 1]);
+    });
+});

package/cypress/specs/Button.cy.tsx

@@ -41,6 +41,7 @@ describe("Button general interaction", () => {
 			.find(".ui5-button-icon")
 			.should("not.exist", "icon is not present");
 	});
+
 	it("tests button's endIon rendering", () => {
 		cy.mount(<Button>Action Bar Button</Button>);
 
@@ -387,3 +388,11 @@ describe("Accessibility", () => {
 			.should("have.text", "999+");
 	});
 });
+
+ui5AccDescribe("Automated accessibility tests", () => {
+	it("Icon only", () => {
+		cy.mount(<Button icon="message-information"></Button>);
+
+		cy.ui5CheckA11y();
+	})
+});

package/cypress/specs/ColorPicker.cy.tsx

@@ -1,10 +1,10 @@
 import ColorPicker from "../../src/ColorPicker.js";
 
-describe("Color Picker tests", () => {
+describe("Color Picker general interaction tests", () => {
 	it("should not display color channel inputs and alpha slider in simplified mode", () => {
 		cy.mount(<ColorPicker simplified={true}></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
@@ -23,35 +23,104 @@ describe("Color Picker tests", () => {
 			.should("not.exist");
 	});
 
-	it("should toggle display to RGB or HSL when button is selected", () => {
+	it("should fire change event when color is changed", () => {
+		cy.mount(<ColorPicker></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.then($item => {
+				$item.get(0).addEventListener("change", cy.stub().as("valueChanged"));
+			});
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#red", "123");
+
+		cy.get("@valueChanged")
+			.should("have.been.calledOnce");
+	});
+
+	it("should correctly parse rgb value to color", () => {
+		cy.mount(<ColorPicker value="rgb(0, 255, 0)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "00ff00");
+	});
+
+	it("should correctly parse rgba value color", () => {
+		cy.mount(<ColorPicker value="rgba(255, 0, 255, 0.5)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "ff00ff");
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput("#alpha", "0.5");
+	});
+
+	it("should correctly parse HEX value to color", () => {
+		cy.mount(<ColorPicker value="#fafafa"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "fafafa");
+	});
+
+	it("should correctly parse short form HEX value to color", () => {
+		cy.mount(<ColorPicker value="#123"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "112233");
+	});
+
+	it("should correctly parse CSS color value to color", () => {
+		cy.mount(<ColorPicker value="gray"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "808080");
+	});
+
+	it("should toggle display from RGB to HSL when arrow button is selected", () => {
 		cy.mount(<ColorPicker value="rgba(112, 178, 225, 1)"></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
 			.ui5ColorPickerToggleColorMode();
 
 		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#hue")
-			.should("have.attr", "value", "205");
+			.ui5ColorPickerValidateInput("#hue", "205");
 
 		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#saturation")
-			.should("have.attr", "value", "65");
+			.ui5ColorPickerValidateInput("#saturation", "65");
 
 		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#light")
-			.should("have.attr", "value", "66");
+			.ui5ColorPickerValidateInput("#light", "66");
+	});
+
+	it("should update value when color is changed via the RGB input fields", () => {
+		cy.mount(<ColorPicker value="rgba(62, 128, 99, 1)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#red", "123");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#green", "56");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#blue", "93");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(123, 56, 93, 1)");
 	});
 
-	it("should update value when hue is changed via the input field", () => {
+	it("should update value when color is changed via the Hue input field", () => {
 		cy.mount(<ColorPicker value="rgba(112, 178, 225, 1)"></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
@@ -61,13 +130,13 @@ describe("Color Picker tests", () => {
 			.ui5ColorPickerUpdateInput("#hue", "130");
 
 		cy.get<ColorPicker>("@colorPicker")
-			.should("have.attr", "value", "rgba(112, 225, 131, 1)");
+			.should("have.value", "rgba(112, 225, 131, 1)");
 	});
 
-	it("should update value when saturation is changed via the input field", () => {
+	it("should update value when color is changed via the Saturation input field", () => {
 		cy.mount(<ColorPicker value="rgba(112, 225, 131, 1)"></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
@@ -77,13 +146,13 @@ describe("Color Picker tests", () => {
 			.ui5ColorPickerUpdateInput("#saturation", "44");
 
 		cy.get<ColorPicker>("@colorPicker")
-			.should("have.attr", "value", "rgba(130, 206, 143, 1)");
+			.should("have.value", "rgba(130, 206, 143, 1)");
 	});
 
-	it("should update value when light is changed via the input field", () => {
+	it("should update value when color is changed via the Light input field", () => {
 		cy.mount(<ColorPicker value="rgba(130, 206, 143, 1)"></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
@@ -93,13 +162,126 @@ describe("Color Picker tests", () => {
 			.ui5ColorPickerUpdateInput("#light", "30");
 
 		cy.get<ColorPicker>("@colorPicker")
-			.should("have.attr", "value", "rgba(43, 110, 54, 1)");
+			.should("have.value", "rgba(43, 110, 54, 1)");
+	});
+
+	it("should update value when color is changed via the HEX input field", () => {
+		cy.mount(<ColorPicker value="rgba(123, 56, 93, 1)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput(".ui5-color-picker-hex-input", "7be");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(119, 187, 238, 1)");
+	});
+
+	it("should update value when alpha is changed via the Alpha input field", () => {
+		cy.mount(<ColorPicker value="rgba(232, 128, 222, 0.89)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#alpha", "0.30");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(232, 128, 222, 0.3)");
+	});
+
+	it("should update value when color is changed via the Hue slider", () => {
+		cy.mount(<ColorPicker value="rgba(70, 64, 191, 1)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-hue-slider")
+			.realClick({ position: "center" });
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(64, 191, 189, 1)");
+	});
+
+	it("should update value when alpha is changed via the Alpha slider", () => {
+		cy.mount(<ColorPicker value="rgba(70, 64, 191, 0)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-alpha-slider")
+			.realClick({ position: "center" });
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(70, 64, 191, 0.5)");
+	});
+
+	it("should update Saturation & Light inputs when selecting color from main color grid", () => {
+		cy.mount(<ColorPicker value="rgba(136, 64, 101, 1)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#hue", "329");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#saturation", "36");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#light", "39");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-main-color")
+			.realClick({ x: 200, y: 50 });
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#hue", "329");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#saturation", "81");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#light", "78");
+	});
+});
+
+describe("Color Picker accessibility tests", () => {
+	it("should show correct accessibility info for RGB inputs", () => {
+		cy.mount(<ColorPicker></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#red")
+			.should("have.attr", "accessible-name", "Red");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#green")
+			.should("have.attr", "accessible-name", "Green");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#blue")
+			.should("have.attr", "accessible-name", "Blue");
 	});
 
 	it("should show correct accessibility info for HSL inputs", () => {
 		cy.mount(<ColorPicker></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
@@ -120,4 +302,31 @@ describe("Color Picker tests", () => {
 			.find("#light")
 			.should("have.attr", "accessible-name", "Light");
 	});
+
+	it("should show correct accessibility info for sliders and other input", () => {
+		cy.mount(<ColorPicker></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#alpha")
+			.should("have.attr", "accessible-name", "Alpha");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-hex-input")
+			.should("have.attr", "accessible-name", "Hexadecimal");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-hue-slider")
+			.should("have.attr", "accessible-name", "Hue control");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-alpha-slider")
+			.should("have.attr", "accessible-name", "Alpha control");
+	});
 });

package/cypress/specs/ComboBox.cy.tsx

@@ -1,5 +1,6 @@
 import ComboBox from "../../src/ComboBox.js";
 import ComboBoxItem from "../../src/ComboBoxItem.js";
+import ComboBoxItemGroup from "../../src/ComboBoxItemGroup.js";
 
 describe("Security", () => {
 	it("tests setting malicious text to items", () => {
@@ -20,6 +21,72 @@ describe("Security", () => {
 	});
 });
 
+describe("Keyboard interaction", () => {
+	it("tests navigating with arrow down when item text is contained in the previous selected item", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text="Bulgaria 1"></ComboBoxItem>
+				<ComboBoxItem text="Bulgaria"></ComboBoxItem>
+				<ComboBoxItem text="Bul"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]").as("combobox");
+
+		cy.get<ComboBox>("@combobox")
+			.shadow()
+			.find("input")
+			.as("inner");
+
+		cy.get("@inner").focus();
+
+		cy.get("@inner").realPress("F4");
+		cy.get("@combobox")
+			.find("[ui5-cb-item]").eq(0).should("have.prop", "selected", true);
+
+		cy.get("@inner").realPress("ArrowDown");
+		cy.get("@combobox")
+			.find("[ui5-cb-item]").eq(1).should("have.prop", "selected", true);
+
+		cy.get("@inner").realPress("ArrowDown");
+		cy.get("@combobox")
+			.find("[ui5-cb-item]").eq(2).should("have.prop", "selected", true);
+	});
+
+	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">
+					<ComboBoxItem text="Bulgar"></ComboBoxItem>
+					<ComboBoxItem text="Bulg"></ComboBoxItem>
+					<ComboBoxItem text="Bul"></ComboBoxItem>
+				</ComboBoxItemGroup>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]").as("combobox");
+
+		cy.get<ComboBox>("@combobox")
+			.shadow()
+			.find("input")
+			.as("inner");
+
+		cy.get("@inner").focus();
+
+		cy.get("@inner").realPress("F4");
+		cy.get("@combobox")
+			.find("[ui5-cb-item]").eq(0).should("have.prop", "selected", true);
+
+		cy.get("@inner").realPress("ArrowDown");
+		cy.get("@combobox")
+			.find("[ui5-cb-item]").eq(1).should("have.prop", "selected", true);
+
+		cy.get("@inner").realPress("ArrowDown");
+		cy.get("@combobox")
+			.find("[ui5-cb-item]").eq(2).should("have.prop", "selected", true);
+	});
+});
+
 describe("Event firing", () => {
 	it("tests if open and close events are fired correctly", () => {
 		cy.mount(

package/cypress/specs/DateControlsWithTimezone.cy.tsx

@@ -0,0 +1,75 @@
+import { getTimezone, setTimezone } from "@ui5/webcomponents-base/dist/config/Timezone.js";
+import DatePicker from "../../src/DatePicker.js";
+import DateTimePicker from "../../src/DateTimePicker.js";
+import TimePicker from "../../src/TimePicker.js";
+
+describe("Date related components in different timezone", () => {
+	before(() => {
+		cy.wrap({ setTimezone })
+			.invoke("setTimezone", "Pacific/Apia");
+
+		cy.wrap({ getTimezone })
+			.invoke("getTimezone")
+			.should("equal", "Pacific/Apia");
+	});
+
+	it("The date is with the correct offset in date picker", () => {
+		cy.mount(<DatePicker id="datePickerNow" value="now" formatPattern="dd/MM/yyyy"/>);
+
+		const now = new Date();
+		const offset = now.getTimezoneOffset();
+		now.setMinutes(now.getMinutes() + offset);
+		now.setHours(now.getHours() + 13);
+		const day = String(now.getDate()).padStart(2, "0");
+		const month = String(now.getMonth() + 1).padStart(2, "0"); // Months are 0-based
+		const year = now.getFullYear();
+
+		const value = `${day}/${month}/${year}`;
+
+		cy.get("#datePickerNow")
+			.shadow()
+			.find("ui5-input")
+			.should("have.attr", "value", value);
+	});
+
+	it("The time is with the correct offset in time picker", () => {
+		cy.mount(<TimePicker id="timePickerNow" value="now" formatPattern="HH:mm:ss"/>);
+
+		const now = new Date();
+		const offset = now.getTimezoneOffset();
+		now.setMinutes(now.getMinutes() + offset);
+		now.setHours(now.getHours() + 13);
+		const hours = String(now.getHours()).padStart(2, "0");
+		const minutes = String(now.getMinutes()).padStart(2, "0");
+		const seconds = String(now.getSeconds()).padStart(2, "0");
+
+		const value = `${hours}:${minutes}:${seconds}`;
+
+		cy.get("#timePickerNow")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.should("have.attr", "value", value);
+	});
+
+	it("The date and time are with the correct offset in date time picker", () => {
+		cy.mount(<DateTimePicker id="dateTimePickerNow" value="now" formatPattern="dd/MM/yyyy HH:mm:ss"/>);
+
+		const now = new Date();
+		const offset = now.getTimezoneOffset();
+		now.setMinutes(now.getMinutes() + offset);
+		now.setHours(now.getHours() + 13);
+		const day = String(now.getDate()).padStart(2, "0");
+		const month = String(now.getMonth() + 1).padStart(2, "0"); // Months are 0-based
+		const year = now.getFullYear();
+		const hours = String(now.getHours()).padStart(2, "0");
+		const minutes = String(now.getMinutes()).padStart(2, "0");
+		const seconds = String(now.getSeconds()).padStart(2, "0");
+
+		const value = `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
+
+		cy.get("#dateTimePickerNow")
+			.shadow()
+			.find("[ui5-input]")
+			.should("have.attr", "value", value);
+	});
+});