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

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 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.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.1-rc.0...v2.9.0-rc.0) (2025-03-13)
+
+
+### Bug Fixes
+
+* **ui5-avatar-group:** fixed focus outline ([#11023](https://github.com/SAP/ui5-webcomponents/issues/11023)) ([138a3db](https://github.com/SAP/ui5-webcomponents/commit/138a3db72f218bbec5ee3fbb3a2cf54c239d83d2)), closes [#10963](https://github.com/SAP/ui5-webcomponents/issues/10963)
+* **ui5-carousel:** update roles to match ACC specification ([#11032](https://github.com/SAP/ui5-webcomponents/issues/11032)) ([1594186](https://github.com/SAP/ui5-webcomponents/commit/1594186d1c44521f5ea590983c41afcecfe46b4e)), closes [#10198](https://github.com/SAP/ui5-webcomponents/issues/10198) [#8624](https://github.com/SAP/ui5-webcomponents/issues/8624)
+* **ui5-combobox:** prevent 'change' event from being fired if the value is set programmatically ([#11048](https://github.com/SAP/ui5-webcomponents/issues/11048)) ([8643afe](https://github.com/SAP/ui5-webcomponents/commit/8643afee8476991e1fe6dcd910a5259f90fb35b6)), closes [#10959](https://github.com/SAP/ui5-webcomponents/issues/10959)
+* **ui5-icon:** revert default mode to decorative ([#10969](https://github.com/SAP/ui5-webcomponents/issues/10969)) ([0662fc2](https://github.com/SAP/ui5-webcomponents/commit/0662fc2c87df0a92f14a2cfe463d6bae1ae3f598)), closes [#10835](https://github.com/SAP/ui5-webcomponents/issues/10835)
+* **ui5-input:** add tabindex for icon slot ([#10975](https://github.com/SAP/ui5-webcomponents/issues/10975)) ([427307a](https://github.com/SAP/ui5-webcomponents/commit/427307a34c5fb84412b71bd6499b7feeccb21ce2))
+* **ui5-list:** ensure no data text wraps instead of truncating ([#10934](https://github.com/SAP/ui5-webcomponents/issues/10934)) ([6c2324e](https://github.com/SAP/ui5-webcomponents/commit/6c2324ec19df041601c3039e81d297679b8adf32)), closes [#10346](https://github.com/SAP/ui5-webcomponents/issues/10346)
+* **ui5-list:** prevent load-more event fire without scroll ([#10973](https://github.com/SAP/ui5-webcomponents/issues/10973)) ([65cc905](https://github.com/SAP/ui5-webcomponents/commit/65cc905da2236cbaf80cb2b24e67f8dab40c3cd0))
+* **ui5-slider:** fire 'change' event on keyup ([#10803](https://github.com/SAP/ui5-webcomponents/issues/10803)) ([078d44c](https://github.com/SAP/ui5-webcomponents/commit/078d44c92d32c10756ddf848907386ccecd3d354)), closes [#10770](https://github.com/SAP/ui5-webcomponents/issues/10770)
+* **ui5-switch:** remove delegate focus of switch ([#10798](https://github.com/SAP/ui5-webcomponents/issues/10798)) ([6202cbd](https://github.com/SAP/ui5-webcomponents/commit/6202cbd9d96f8b9aa061f5feac8050460d6be39b)), closes [#10588](https://github.com/SAP/ui5-webcomponents/issues/10588)
+* **ui5-tabcontainer:** allow browser refresh shortcut to work ([#11035](https://github.com/SAP/ui5-webcomponents/issues/11035)) ([a4a0f02](https://github.com/SAP/ui5-webcomponents/commit/a4a0f028f44a60fd6caea0f4ecdac49b0289270d))
+* **ui5-toolbar-button:** add hidden property ([#10915](https://github.com/SAP/ui5-webcomponents/issues/10915)) ([8ad378d](https://github.com/SAP/ui5-webcomponents/commit/8ad378d64e075068cf85f5e6ef6184cdafd9fc0f)), closes [#10585](https://github.com/SAP/ui5-webcomponents/issues/10585)
+
+
+### Features
+
+* **ui5-multi-combobox/ui5-combobox:** introduce open property ([#11044](https://github.com/SAP/ui5-webcomponents/issues/11044)) ([951e726](https://github.com/SAP/ui5-webcomponents/commit/951e7261ccc32c8f92e2538b356469556b0ab2b2))
+
+
+
+
+
 ## [2.8.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0...v2.8.1-rc.0) (2025-03-06)
 
 

package/cypress/specs/AvatarGroup.cy.tsx

@@ -34,3 +34,18 @@ describe("Overflow", () => {
 			.should("equal", expectedHiddenItems);
 	});
 });
+
+describe("Avatars arrangement", () => {
+	it("checks if no unnecessary margin is applied of only one Avatar is available", () => {
+		cy.mount(<AvatarGroup id="ag2" type="Group">
+			<Avatar id="av1" initials="II"></Avatar>
+			<Avatar id="av2" initials="II"></Avatar>
+		</AvatarGroup>);
+
+		cy.get("#av2").invoke("remove");
+
+		cy.get("#av1")
+			.invoke("attr", "style")
+			.should("equal", "");
+	});
+});

package/cypress/specs/Carousel.cy.tsx

@@ -0,0 +1,27 @@
+import Carousel from "../../src/Carousel.js";
+import Text from "../../src/Text.js";
+
+describe("Accessibility", () => {
+	it("tests carousel aria roles", () => {
+		cy.mount(
+			<Carousel id="carousel">
+				<Text id="text">Test</Text>
+			</Carousel>
+		);
+
+		cy.get("#carousel")
+			.shadow()
+			.find(".ui5-carousel-root")
+			.should("have.attr", "role", "list");
+
+		cy.get("#carousel")
+			.shadow()
+			.find(".ui5-carousel-item")
+			.should("have.attr", "role", "listitem");
+
+		cy.get("#carousel")
+			.shadow()
+			.find(".ui5-carousel-root")
+			.should("have.attr", "aria-roledescription", "Carousel");
+	});
+});

package/cypress/specs/ComboBox.cy.tsx

@@ -19,3 +19,86 @@ describe("Security", () => {
 			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
 	});
 });
+
+describe("Event firing", () => {
+	it("tests if open and close events are fired correctly", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text="Algeria"></ComboBoxItem>
+				<ComboBoxItem text="Bulgaria"></ComboBoxItem>
+				<ComboBoxItem text="England"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("ui5-combobox")
+			.as("combo");
+
+		cy.get("@combo").then($combo => {
+			$combo[0].addEventListener("focusin", () => {
+			$combo[0].setAttribute("open", "true");
+			});
+		});
+
+		cy.get("@combo").then($combo => {
+			$combo[0].addEventListener("ui5-open", cy.stub().as("comboOpened"));
+		});
+
+		cy.get("@combo").then($combo => {
+			$combo[0].addEventListener("ui5-close", cy.stub().as("comboClosed"));
+		});
+
+		cy.get("@combo")
+			.shadow()
+			.find("input")
+			.focus();
+
+		cy.get("@combo")
+			.shadow()
+			.find("ui5-icon")
+			.as("icon");
+
+		cy.get("@icon")
+			.click();
+
+		cy.get("@icon")
+			.click();
+
+		cy.get("@combo")
+			.shadow()
+			.find("ui5-responsive-popover")
+			.should("have.attr", "open");
+
+		cy.get("@comboClosed")
+			.should("have.been.calledOnce");
+
+		cy.get("@comboOpened")
+			.should("have.been.calledTwice");
+	});
+
+	it("should not fire 'change' event on focusout if value is not changed by user interaction", () => {
+		cy.mount(
+			<>
+				<ComboBox id="cb" value="ComboBox item text"></ComboBox>
+				<ComboBox id="another-cb"></ComboBox>
+			</>
+		);
+
+		cy.get("#cb").then($cb => {
+			$cb[0].addEventListener("ui5-change", cy.stub().as("changeStub"));
+		});
+
+		cy.get("#cb").shadow().find("input").click();
+		cy.get("#another-cb").shadow().find("input").click();
+		cy.get("@changeStub").should("not.have.been.called");
+
+		cy.get("#cb").then(($cb) => {
+			const comboBox = $cb[0] as ComboBox;
+			comboBox.value = "Another ComboBox item text";
+		});
+
+		cy.get("#cb").shadow().find("input").click();
+		cy.get("#another-cb").shadow().find("input").click();
+		cy.get("@changeStub").should("not.have.been.called");
+	});
+});
+

package/cypress/specs/Input.cy.tsx

@@ -5,8 +5,10 @@ import SuggestionItemGroup from "../../src/SuggestionItemGroup.js";
 import Dialog from "../../src/Dialog.js";
 import Button from "../../src/Button.js";
 
+import add from "@ui5/webcomponents-icons/dist/add.js";
+
 describe("Input Tests", () => {
-	it("tets input event prevention", () => {
+	it("test input event prevention", () => {
 		cy.mount(
 			<Input></Input>
 		);
@@ -128,6 +130,45 @@ describe("Input Tests", () => {
 			.should("not.have.attr", "tabindex", "0");
 	});
 
+	it("tests tabindex of the div holding icon slot ", () => {
+		cy.mount(
+			<Input id="input"></Input>
+		);
+
+		cy.document().then(doc => {
+			const input = doc.querySelector<Input>("#input")!;
+			const icon = document.createElement("ui5-icon");
+			icon.setAttribute("slot", "icon");
+			icon.setAttribute("name", add);
+			icon.id = "icon";
+
+			input.addEventListener("focus", () => {
+				input.appendChild(icon);
+			});
+			input.addEventListener("focusout", () => {
+				input.removeChild(icon);
+			});
+		});
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		cy.get<Input>("@input").realClick();
+
+		cy.get("[ui5-icon]")
+			.as("icon");
+
+		cy.get("@icon")
+			.then($icon => {
+				$icon[0].addEventListener("click", cy.spy().as("click"));
+			});
+
+		cy.get("@icon").realClick();
+
+		cy.get("@click")
+			.should("have.been.calledOnce");
+	});
+
 	it("tests submit and change event order", () => {
 		cy.mount(
 			<form>

package/cypress/specs/Menu.cy.tsx

@@ -569,7 +569,9 @@ describe("Menu interaction", () => {
 				.should("have.attr", "accessible-name", "Select an option from the menu");
 		});
 
-		it("Menu items - navigation in endContent", () => {
+		/* The test is valid, but currently it is not stable. It will be reviewed further and stabilized afterwards. */
+
+		it.skip("Menu items - navigation in endContent", () => {
 			cy.mount(
 				<>
 					<Button id="btnOpen">Open Menu</Button>

package/cypress/specs/MultiComboBox.cy.tsx

@@ -56,3 +56,71 @@ describe("Value State", () => {
 			.should("not.exist");
 	});
 });
+
+describe("Event firing", () => {
+	it("tests if open and close events are fired correctly", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItem text="Algeria"></MultiComboBoxItem>
+				<MultiComboBoxItem text="Bulgaria"></MultiComboBoxItem>
+				<MultiComboBoxItem text="England"></MultiComboBoxItem>
+			</MultiComboBox>
+		);
+
+		cy.get("ui5-multi-combobox")
+			.as("multiComboBox");
+
+		cy.get("@multiComboBox")
+			.then($mcb => {
+				$mcb[0].addEventListener("focusin", () => {
+					$mcb[0].setAttribute("open", "true");
+				});
+			});
+
+		cy.get("@multiComboBox")
+			.then($mcb => {
+				$mcb[0].addEventListener("ui5-open", cy.stub().as("mcbOpened"));
+			});
+
+		cy.get("@multiComboBox")
+			.then($mcb => {
+				$mcb[0].addEventListener("ui5-close", cy.stub().as("mcbClosed"));
+			});
+
+		cy.get("@multiComboBox")
+			.shadow()
+			.find("input")
+			.as("input");
+
+		cy.get("@input")
+			.click();
+
+		cy.get("@multiComboBox")
+			.shadow()
+			.find("ui5-responsive-popover")
+			.as("respPopover");
+
+		cy.get("@respPopover")
+			.should("have.attr", "open");
+
+		cy.get("@mcbOpened")
+			.should("have.been.calledOnce");
+
+		cy.get("@multiComboBox")
+			.shadow()
+			.find("ui5-icon")
+			.as("icon");
+
+		cy.get("@icon")
+			.click();
+
+		cy.get("@icon")
+			.click();
+
+		cy.get("@mcbClosed")
+			.should("have.been.calledOnce");
+
+		cy.get("@mcbOpened")
+			.should("have.been.calledTwice");
+	});
+});

package/cypress/specs/Slider.cy.tsx

@@ -0,0 +1,26 @@
+import Slider from "../../src/Slider.js";
+
+describe("General interactions", () => {
+	it("Fire change event on keyup", () => {
+		let changeCount = 0;
+		cy.mount(
+			<Slider min={0} max={20}></Slider>
+		);
+
+		cy.get("[ui5-slider]").then($slider => {
+			$slider[0].addEventListener("ui5-change", () => {
+				changeCount++;
+			});
+		});
+
+		// First 'change' event is fired when the slider is clicked
+		cy.get("[ui5-slider]").click();
+
+		// Second 'change' event is fired on keyboard interaction
+		cy.get("[ui5-slider]").realPress("ArrowRight");
+
+		cy.then(() => {
+			expect(changeCount).to.equal(2);
+		});
+	});
+});

package/cypress/specs/TabContainer.cy.tsx

@@ -27,3 +27,52 @@ describe("TabContainer general interaction", () => {
 			});
 	});
 });
+
+describe("TabContainer keyboard handling", () => {
+	it("Tests preventing of known and unknown events on tab", () => {
+		cy.mount(
+			<TabContainer id="tc">
+				<Tab text="Tab 1" movable={true}>tab 1</Tab>
+			</TabContainer>
+		);
+
+		cy.get("#tc")
+			.find<Tab>("[text='Tab 1']")
+			.then(tab => {
+				return tab[0].getDomRefInStrip();
+			})
+			.as("tabInStrip")
+			.should("be.visible");
+
+		[
+			{
+				event: new KeyboardEvent("keydown", {
+					cancelable: true, bubbles: true, key: "R", ctrlKey: true,
+				}),
+				expectedDefaultPrevented: false,
+			},
+			{
+				event: new KeyboardEvent("keydown", {
+					cancelable: true, bubbles: true, key: "ArrowLeft", ctrlKey: true,
+				}),
+				expectedDefaultPrevented: true,
+			},
+			{
+				event: new KeyboardEvent("keydown", {
+					cancelable: true, bubbles: true, key: " ", ctrlKey: false,
+				}),
+				expectedDefaultPrevented: true,
+			}
+		].forEach(({ event, expectedDefaultPrevented }) => {
+			// Act
+			cy.get<HTMLElement>("@tabInStrip")
+				.then(tabInStrip => {
+					tabInStrip[0].dispatchEvent(event);
+				});
+
+			// Assert
+			cy.wrap(event)
+				.should("have.property", "defaultPrevented", expectedDefaultPrevented);
+		});
+	});
+});

package/cypress/specs/base/Events.cy.tsx

@@ -13,8 +13,15 @@ import Menu from "../../../src/Menu.js";
 import MultiComboBox from "../../../src/MultiComboBox.js";
 import MultiComboBoxItem from "../../../src/MultiComboBoxItem.js";
 import CheckBox from "../../../src/CheckBox.js";
+import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 
 describe("Event bubbling", () => {
+	before(() => {
+		cy.wrap({ setAnimationMode })
+			.invoke("setAnimationMode", AnimationMode.None);
+	})
+
 	it("test bubbling events", () => {
 		cy.mount(
 			<div id="app">
@@ -81,7 +88,9 @@ describe("Event bubbling", () => {
 			.realClick();
 
 		cy.get("@input")
-			.realType("a");
+			.should("be.focused");
+
+		cy.realType("a");
 
 		cy.get("@input")
 			.find("[ui5-suggestion-item]")

package/cypress/specs/base/Tooltips.cy.tsx

@@ -1,5 +1,4 @@
 import { setEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
-
 import Button from "../../../src/Button.js";
 import RatingIndicator from "../../../src/RatingIndicator.js";
 import ToggleButton from "../../../src/ToggleButton.js";
@@ -11,9 +10,12 @@ import settings from "@ui5/webcomponents-icons/dist/settings.js";
 import add from "@ui5/webcomponents-icons/dist/add.js";
 import activate from "@ui5/webcomponents-icons/dist/activate.js";
 
-setEnableDefaultTooltips(false);
-
 describe("Default Tooltips", () => {
+	before(() => {
+		cy.wrap({ setEnableDefaultTooltips })
+			.invoke("setEnableDefaultTooltips", false);
+	})
+
 	it("tests navigation", () => {
 		cy.mount(
 			<>

package/cypress/support/commands.ts

@@ -36,6 +36,7 @@
 //   }
 // }
 
+import "@ui5/cypress-internal/commands.js";
 import { internals, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 
 // Please keep this list in alphabetical order

package/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

package/cypress/support/component.ts

@@ -1,3 +1,36 @@
-import "@ui5/webcomponents-tools/components-package/cypress/support/component.js";
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
 
-import "./commands.js";
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+import { mount } from '@ui5/cypress-ct-ui5-webc'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)

package/cypress/tsconfig.json

@@ -4,7 +4,6 @@
 		"./**/*"
 	],
 	"compilerOptions": {
-		"types": ["@ui5/webcomponents-tools"],
 		"composite": true,
 		"tsBuildInfoFile": "dist/.tsbuildinfobuild",
 		"module": "NodeNext",

package/cypress.config.js

@@ -1,10 +1,15 @@
-import cypressConfig from "@ui5/webcomponents-tools/components-package/cypress.config.js";
-import path from "path";
-import { fileURLToPath } from "node:url";
+import cypressConfig from "@ui5/cypress-internal/cypress.config.js";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const suites = {
+	SUITE1: [
+		"**/specs/base/*.cy.{jsx,tsx}",
+		"**/specs/[A-I]*.cy.{js,jsx,ts,tsx}",
+	],
+	SUITE2: [
+		"**/specs/[^A-I]*.cy.{js,jsx,ts,tsx}",
+	],
+};
 
-cypressConfig.component.supportFile = path.join(__dirname, "cypress/support/component.ts");
+cypressConfig.component.specPattern = suites[process.env.TEST_SUITE] || ["**/specs/**/*.cy.{js,ts,jsx,tsx}"];
 
 export default cypressConfig;