@ui5/webcomponents-fiori 2.10.0-rc.2 → 2.10.0-rc.3

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.10.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0-rc.2...v2.10.0-rc.3) (2025-05-01)
+
+
+### Bug Fixes
+
+* **ui5-dynamic-page:** change the container-type ([#11325](https://github.com/SAP/ui5-webcomponents/issues/11325)) ([8402ec8](https://github.com/SAP/ui5-webcomponents/commit/8402ec8cd47c3cf2b3f1ff54f5703e8a1545d0f9)), closes [#11309](https://github.com/SAP/ui5-webcomponents/issues/11309)
+* **ui5-flexible-column-layout:** column visibility issue fixed ([#11416](https://github.com/SAP/ui5-webcomponents/issues/11416)) ([996de94](https://github.com/SAP/ui5-webcomponents/commit/996de9498bf6b4f4befaf0e15f0489c2d6cc47b9))
+* **ui5-flexible-column-layout:** disable resizing for both separators ([#11411](https://github.com/SAP/ui5-webcomponents/issues/11411)) ([ccd18b1](https://github.com/SAP/ui5-webcomponents/commit/ccd18b1d539857fad33b869523284df99724d77b)), closes [#11402](https://github.com/SAP/ui5-webcomponents/issues/11402)
+* **ui5-flexible-column-layout:** min width of column adjusted to spec ([#11367](https://github.com/SAP/ui5-webcomponents/issues/11367)) ([e424f4e](https://github.com/SAP/ui5-webcomponents/commit/e424f4ea83662758394946b27434afe13a62ae54)), closes [#10997](https://github.com/SAP/ui5-webcomponents/issues/10997)
+* **ui5-shellbar:** fixed avatar font-size ([#11316](https://github.com/SAP/ui5-webcomponents/issues/11316)) ([d672c15](https://github.com/SAP/ui5-webcomponents/commit/d672c15db8eb8843a2ce899bbb8af6b7561fd37a))
+* **ui5-shellbar:** fixed avatar font-size var ([#11424](https://github.com/SAP/ui5-webcomponents/issues/11424)) ([06d206e](https://github.com/SAP/ui5-webcomponents/commit/06d206eaefa8416c784efdacc8e9c8860f849311))
+* **ui5-side-navigation:** improve accessibility for groups ([#11357](https://github.com/SAP/ui5-webcomponents/issues/11357)) ([a5531de](https://github.com/SAP/ui5-webcomponents/commit/a5531de5237b475fa876efeac277811f8cdd8e7d)), closes [#11349](https://github.com/SAP/ui5-webcomponents/issues/11349)
+* **ui5-side-navigation:** update font-weight for first level items ([#11409](https://github.com/SAP/ui5-webcomponents/issues/11409)) ([a894216](https://github.com/SAP/ui5-webcomponents/commit/a894216adbb0bfdbb707bf869cf0309d0638d914)), closes [#11403](https://github.com/SAP/ui5-webcomponents/issues/11403)
+
+
+### Features
+
+* **ui5-button:** make click button preventable ([#11318](https://github.com/SAP/ui5-webcomponents/issues/11318)) ([1f4aa92](https://github.com/SAP/ui5-webcomponents/commit/1f4aa927d2841e0c51f665ab2bdb851b1d030c35))
+* **ui5-shellbar-search:** initial implementation ([#11398](https://github.com/SAP/ui5-webcomponents/issues/11398)) ([ca372d0](https://github.com/SAP/ui5-webcomponents/commit/ca372d0f4fa5a97ce82f3eb72d973ee2f0d54c0b))
+
+
+
+
+
 # [2.10.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0-rc.1...v2.10.0-rc.2) (2025-04-24)
 
 

package/cypress/specs/FCL.cy.tsx

@@ -69,6 +69,15 @@ describe("Columns resize", () => {
 				expect(widthAfterMove).to.be.equal($el.width()!);
 			});
 	});
+
+	it("sets dedicated class to hidden columns", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--end")
+			.should($el => {
+				expect($el).to.have.class("ui5-fcl-column--hidden");
+			});
+	});
 });
 
 describe("ACC", () => {

package/cypress/specs/Search.cy.tsx

@@ -4,7 +4,6 @@ import SearchItem from "../../src/SearchItem.js";
 import SearchItemGroup from "../../src/SearchItemGroup.js";
 import history from "@ui5/webcomponents-icons/dist/history.js";
 import IllustratedMessage from "../../src/IllustratedMessage.js";
-import SearchPopupMode from "@ui5/webcomponents/dist/types/SearchPopupMode.js";
 import searchIcon from "@ui5/webcomponents-icons/dist/search.js";
 import SearchMessageArea from "../../src/SearchMessageArea.js";
 import Button from "@ui5/webcomponents/dist/Button.js";

package/cypress/specs/SearchField.cy.tsx

@@ -4,6 +4,7 @@ import {
 	SEARCH_FIELD_SCOPE_SELECT_LABEL,
 	SEARCH_FIELD_CLEAR_ICON,
 	SEARCH_FIELD_SEARCH_ICON,
+	SEARCH_FIELD_LABEL
 } from "../../src/generated/i18n/i18n-defaults.js";
 
 describe("SearchField general interaction", () => {
@@ -40,6 +41,24 @@ describe("SearchField general interaction", () => {
 				.find("input")
 				.should("have.attr", "aria-label", attributeValue);
 		});
+
+		it("accessibleName should have default value if not set", () => {
+			cy.mount(<SearchField></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.should("have.attr", "aria-label", SEARCH_FIELD_LABEL.defaultText);
+		});
+
+		it("accessibleDescription should propagate if set", () => {
+			cy.mount(<SearchField accessibleDescription="Test"></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.should("have.attr", "aria-description", "Test");
+		});
 	});
 
 	describe("Collapsed Search Field", () => {

package/cypress/specs/ShellBarSearch.cy.tsx

@@ -0,0 +1,65 @@
+import ShellBarSearch from "../../src/ShellBarSearch.js";
+import {
+	SHELLBAR_SEARCH_COLLAPSED,
+	SEARCH_FIELD_SEARCH_ICON,
+	SHELLBAR_SEARCH_EXPANDED,
+} from "../../src/generated/i18n/i18n-defaults.js";
+
+describe("Behaviour", () => {
+	it ("Toggles collapsed property upon icon press", () => {
+		cy.mount(<ShellBarSearch />);
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-icon]")
+			.as("searchIcon");
+
+		cy.get("@searchIcon")
+			.realClick();
+
+		cy.get("[ui5-shellbar-search]")
+			.should("have.prop", "collapsed", true);
+
+		cy.get("@searchIcon")
+			.realClick();
+
+		cy.get("[ui5-shellbar-search]")
+			.should("not.have.a.property", "collapsed");
+	});
+
+	it ("Tests icon tooltips for diffrent states", () => {
+		cy.mount(<ShellBarSearch />);
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-icon]")
+			.as("searchIcon");
+
+		cy.get("@searchIcon")
+			.should("have.attr", "accessible-name", SHELLBAR_SEARCH_EXPANDED.defaultText);
+
+		cy.get("@searchIcon")
+			.realClick();
+
+		cy.get("[ui5-shellbar-search]")
+			.should("have.prop", "collapsed", true);
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-button]")
+			.should("have.attr", "accessible-name", SHELLBAR_SEARCH_COLLAPSED.defaultText);
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-button]")
+			.realClick();
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("input")
+			.type("test");
+
+		cy.get("@searchIcon")
+			.should("have.attr", "accessible-name", SEARCH_FIELD_SEARCH_ICON.defaultText);
+	});
+});

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

@@ -0,0 +1,98 @@
+import SearchItem from "../../src/SearchItem.js";
+import ShellBarSearch from "../../src/ShellBarSearch.js";
+
+describe("Mobile Behaviour", () => {
+	beforeEach(() => {
+		cy.ui5SimulateDevice();
+	});
+
+	it("Should not close dialog upon focus out", () => {
+		cy.mount(<ShellBarSearch />);
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-button]")
+			.realClick();
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-responsive-popover] header input")
+			.type("test");
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-responsive-popover] header input")
+			.blur();
+		
+		cy.get("[ui5-shellbar-search]")
+			.should("have.prop", "open", true);
+	});
+
+	it("Should select typed ahead item when typing", () => {
+		cy.mount(
+			<>
+				<ShellBarSearch showClearIcon={true}>
+					<SearchItem text="Item 1" />
+					<SearchItem text="Item 2" />
+					<SearchItem text="Item 3" />
+					<SearchItem text="Item 4" />
+					<SearchItem text="Item 5" />
+					<SearchItem text="Item 6" />
+				</ShellBarSearch>
+			</>
+		);
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-button]")
+			.realClick();
+
+		cy.get("[ui5-shellbar-search]")
+			.should("have.prop", "open", true);
+		
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-responsive-popover] header input")
+			.type("item 1");
+
+		cy.get("[ui5-search-item]:first")
+			.should("have.attr", "selected");
+	});
+
+	it("Should type ahead internal input", () => {
+		cy.mount(
+			<>
+				<ShellBarSearch showClearIcon={true}>
+					<SearchItem text="Item 1" />
+					<SearchItem text="Item 2" />
+					<SearchItem text="Item 3" />
+					<SearchItem text="Item 4" />
+					<SearchItem text="Item 5" />
+					<SearchItem text="Item 6" />
+				</ShellBarSearch>
+			</>
+		);
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-button]")
+			.realClick();
+		
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-responsive-popover] header input")
+			.type("ite");
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-responsive-popover] header input")
+			.should("have.value", "Item 1");
+	});
+
+	it("is collapsed by default", () => {
+		cy.mount(<ShellBarSearch />);
+
+		cy.get("[ui5-shellbar-search]")
+			.should("have.prop", "collapsed", true);
+	});
+});

package/cypress/specs/SideNavigation.cy.tsx

@@ -1,5 +1,6 @@
 import SideNavigation from "../../src/SideNavigation.js";
 import SideNavigationItem from "../../src/SideNavigationItem.js";
+import SideNavigationGroup from "../../src/SideNavigationGroup.js";
 import SideNavigationSubItem from "../../src/SideNavigationSubItem.js";
 import group from "@ui5/webcomponents-icons/dist/group.js";
 import { NAVIGATION_MENU_POPOVER_HIDDEN_TEXT } from "../../src/generated/i18n/i18n-defaults.js";
@@ -827,6 +828,34 @@ describe("Side Navigation Accessibility", () => {
 			.find(".ui5-menu-rp")
 			.should("have.attr", "accessible-name", NAVIGATION_MENU_POPOVER_HIDDEN_TEXT.defaultText);
 	});
+
+	it("Tests SideNavigationGroup accessibility", () => {
+		cy.mount(
+			<SideNavigation>
+				<SideNavigationItem text="Home"></SideNavigationItem>
+				<SideNavigationGroup id="group" expanded={true} text="Group">
+					<SideNavigationItem text="1" />
+					<SideNavigationItem text="2" />
+				</SideNavigationGroup>
+			</SideNavigation>
+		);
+
+		// assert
+		cy.get("#group")
+			.shadow()
+			.find(".ui5-sn-item-group")
+			.should("have.attr", "role", "treeitem");
+		
+		cy.get("#group")
+			.shadow()
+			.find(".ui5-sn-item-group")
+			.should("not.have.attr", "aria-description");
+
+		cy.get("#group")
+			.shadow()
+			.find(".ui5-sn-item-ul")
+			.should("have.attr", "role", "group");
+	});
 });
 
 describe("Focusable items", () => {