@ui5/webcomponents-fiori 2.6.0-rc.3 → 2.6.0-rc.5

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.6.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.4...v2.6.0-rc.5) (2025-01-07)
+
+
+### Bug Fixes
+
+* remove dependencies for TSX components and fix features ([#10449](https://github.com/SAP/ui5-webcomponents/issues/10449)) ([a2b5f6f](https://github.com/SAP/ui5-webcomponents/commit/a2b5f6fb768499a8b757a9b7abad5f19033a33a7))
+* **ui5-dynamic-page:** prevent scroll position reset on unpinning the header ([#10441](https://github.com/SAP/ui5-webcomponents/issues/10441)) ([9f5a67a](https://github.com/SAP/ui5-webcomponents/commit/9f5a67ac185a087f65548ace894747dafa8c217a))
+* **ui5-dynamic-page:** update header sticky on manual snap ([#10431](https://github.com/SAP/ui5-webcomponents/issues/10431)) ([1975d56](https://github.com/SAP/ui5-webcomponents/commit/1975d56e45a4cc0d3f272ad31cb081b91a1b0d1d)), closes [#10430](https://github.com/SAP/ui5-webcomponents/issues/10430)
+* **ui5-navigation-layout:** replace "sideCollapsed" property with "mode" property ([#10390](https://github.com/SAP/ui5-webcomponents/issues/10390)) ([ae562dd](https://github.com/SAP/ui5-webcomponents/commit/ae562ddd8c5eeb43d07857743c640e1a3d7d60e2))
+* **ui5-notification-list-item:** scoping issue ([#10458](https://github.com/SAP/ui5-webcomponents/issues/10458)) ([6cc4615](https://github.com/SAP/ui5-webcomponents/commit/6cc46157deec42f207a528f37962b8fd7b968f2b))
+* **ui5-side-navigation:** ensure all items are focusable after expand ([#10453](https://github.com/SAP/ui5-webcomponents/issues/10453)) ([e60ad85](https://github.com/SAP/ui5-webcomponents/commit/e60ad858431eda48db44fc7fa22cfd4843b22aea)), closes [#10391](https://github.com/SAP/ui5-webcomponents/issues/10391)
+
+
+### Features
+
+* **ui5-dynamic-side-content:** add customizable aria labels ([#10416](https://github.com/SAP/ui5-webcomponents/issues/10416)) ([5887d29](https://github.com/SAP/ui5-webcomponents/commit/5887d29bbe26ddc73c5a6eb3be14985126e9490f)), closes [#8612](https://github.com/SAP/ui5-webcomponents/issues/8612)
+
+
+
+
+
+# [2.6.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.3...v2.6.0-rc.4) (2025-01-02)
+
+
+### Features
+
+* **ui5-user-menu:** add open and close events ([#10363](https://github.com/SAP/ui5-webcomponents/issues/10363)) ([f57125a](https://github.com/SAP/ui5-webcomponents/commit/f57125a27b9d7aa7a9f3554db374f1d7da589e6e))
+
+
+
+
+
 # [2.6.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.2...v2.6.0-rc.3) (2024-12-26)
 
 

package/README.md

@@ -27,6 +27,7 @@ such as a common header (ShellBar).
 | Side Navigation                           | `ui5-side-navigation`          | `import "@ui5/webcomponents-fiori/dist/SideNavigation.js";`           |
 | Side Navigation Item                      | `ui5-side-navigation-item`     | `import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";`       |
 | Side Navigation Sub Item                  | `ui5-side-navigation-sub-item` | `import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";`    |
+| Side Navigation Group                     | `ui5-side-navigation-group`    | `import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";`      |
 | Timeline                                  | `ui5-timeline`                 | `import "@ui5/webcomponents-fiori/dist/Timeline.js";`                 |
 | Timeline Item                             | `ui5-timeline-item`            | comes with `ui5-timeline`                                             |
 | Upload Collection                         | `ui5-upload-collection`        | `import "@ui5/webcomponents-fiori/dist/UploadCollection.js";`         |

package/cypress/specs/DynamicSideContent.cy.ts

@@ -0,0 +1,83 @@
+import { html } from "lit";
+import "../../src/DynamicSideContent.js";
+import type DynamicSideContent from "../../src/DynamicSideContent.js";
+
+describe("Accessibility", () => {
+	it("tests main and side content roles", () => {
+		cy.mount(html`
+			<ui5-dynamic-side-content>
+				<div>
+					<h1>Main Content</h1>
+				</div>
+				<div slot="sideContent">
+					<h1>Side Content</h1>
+				</div>
+			</ui5-dynamic-side-content>
+		`);
+
+		cy.get("[ui5-dynamic-side-content]")
+			.as("dsc");
+
+		cy.get("@dsc")
+			.shadow()
+			.find(".ui5-dsc-main")
+			.should("have.attr", "role", "main");
+
+		   cy.get("@dsc")
+			.shadow()
+			.find(".ui5-dsc-side")
+			.should("have.attr", "role", "complementary");
+	});
+
+	it("tests main and side content aria-label values", () => {
+		const customMainContentLabel = "Custom Main Content Label";
+		const customSideContentLabel = "Custom Side Content Label";
+
+		cy.mount(html`
+			<ui5-dynamic-side-content>
+				<div>
+					<h1>Main Content</h1>
+					<ui5-button>Set Custom ARIA Labels</ui5-button>
+				</div>
+				<div slot="sideContent">
+					<h1>Side Content</h1>
+				</div>
+			</ui5-dynamic-side-content>
+		`);
+
+		cy.get("[ui5-dynamic-side-content]")
+			.as("dsc");
+
+		cy.get("@dsc")
+			.shadow()
+			.find(".ui5-dsc-main")
+			.should("have.attr", "aria-label", "Main Content");
+
+		cy.get("@dsc")
+			.shadow()
+			.find(".ui5-dsc-side")
+			.should("have.attr", "aria-label", "Side Content");
+
+		cy.get<DynamicSideContent>("@dsc")
+			.then($dsc => {
+				$dsc.get(0).accessibilityAttributes = {
+					"mainContent": {
+						"ariaLabel": customMainContentLabel,
+					},
+					"sideContent": {
+						"ariaLabel": customSideContentLabel,
+					},
+				};
+			});
+
+		cy.get("@dsc")
+			.shadow()
+			.find(".ui5-dsc-main")
+			.should("have.attr", "aria-label", customMainContentLabel);
+
+		cy.get("@dsc")
+			.shadow()
+			.find(".ui5-dsc-side")
+			.should("have.attr", "aria-label", customSideContentLabel);
+	});
+});

package/cypress/specs/NavigationLayout.cy.ts

@@ -76,13 +76,13 @@ describe("Rendering and interaction", () => {
 			.should("have.prop", "collapsed", false);
 
 		cy.get("[ui5-navigation-layout]")
-			.invoke("prop", "sideCollapsed", true);
+			.invoke("prop", "mode", "Collapsed");
 
 		cy.get("[ui5-side-navigation]")
 			.should("have.prop", "collapsed", true);
 
 		cy.get("[ui5-navigation-layout]")
-			.invoke("prop", "sideCollapsed", false);
+			.invoke("prop", "mode", "Expanded");
 
 		cy.get("[ui5-side-navigation]")
 			.should("have.prop", "collapsed", false);
@@ -110,7 +110,7 @@ describe("Navigation Layout on Phone", () => {
 
 	it("tests collapsing", () => {
 		cy.get("[ui5-navigation-layout]")
-			.invoke("prop", "sideCollapsed", false);
+			.invoke("prop", "mode", "Expanded");
 
 		cy.get("[ui5-navigation-layout]")
 			.shadow()
@@ -118,7 +118,7 @@ describe("Navigation Layout on Phone", () => {
 			.should("be.visible");
 
 		cy.get("[ui5-navigation-layout]")
-			.invoke("prop", "sideCollapsed", true);
+			.invoke("prop", "mode", "Collapsed");
 
 		cy.get("[ui5-navigation-layout]")
 			.shadow()

package/cypress/specs/Page.cy.ts

@@ -2,23 +2,25 @@ import { html } from "lit";
 import "../../src/Page.js";
 import "@ui5/webcomponents/dist/Bar.js";
 import "@ui5/webcomponents/dist/Button.js";
+import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 
 describe("Page general interaction", () => {
 	beforeEach(() => {
 		cy.mount(html`
-<ui5-page style="height: 300px;" show-footer>
-	<ui5-bar slot="header">
-		<ui5-button slot="startContent">Header button</ui5-button>
-	</ui5-bar>
-
-	<div id="content">
-		Test content
-	</div>
-	<ui5-bar slot="footer">
-		<ui5-button slot="endContent">Footer button</ui5-button>
-	</ui5-bar>
-</ui5-page>
-`);
+			<ui5-page style="height: 300px;" show-footer>
+				<ui5-bar slot="header">
+					<ui5-button slot="startContent">Header button</ui5-button>
+				</ui5-bar>
+
+				<div id="content">
+					Test content
+				</div>
+				<ui5-bar slot="footer">
+					<ui5-button slot="endContent">Footer button</ui5-button>
+				</ui5-bar>
+			</ui5-page>
+		`);
 	});
 
 	it("tests initial rendering", () => {
@@ -55,4 +57,31 @@ describe("Page general interaction", () => {
 		cy.get("[ui5-page]")
 			.invoke("prop", "hideFooter", false);
 	});
+
+	it("tests animation off footer toggling", () => {
+		setAnimationMode(AnimationMode.None);
+
+		cy.get("[ui5-page] [slot='footer']")
+			.as("footer");
+
+		cy.get("@footer")
+			.should("be.visible");
+
+		// toggle hideFooter
+		cy.get("[ui5-page]")
+			.invoke("prop", "hideFooter", true);
+
+		cy.get("[ui5-page]")
+			.shadow()
+			.find(".ui5-page-footer-root")
+			.should("not.be.visible");
+
+		setAnimationMode(AnimationMode.Full);
+	});
+
+	it("createElement does not throw exception", () => {
+		cy.document().then(doc => {
+			doc.createElement("ui5-page");
+		});
+	});
 });

package/cypress/specs/UserMenu.cy.ts

@@ -7,6 +7,11 @@ import "@ui5/webcomponents/dist/Avatar.js";
 import "@ui5/webcomponents/dist/Button.js";
 import "@ui5/webcomponents-icons/dist/action-settings.js";
 
+import {
+	USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT,
+	USER_MENU_OTHER_ACCOUNT_BUTTON_TXT,
+} from "../../src/generated/i18n/i18n-defaults.js";
+
 describe("Initial rendering", () => {
 	it("tests no config provided", () => {
 		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
@@ -33,7 +38,7 @@ describe("Initial rendering", () => {
 		cy.get("@userMenu").should("exist");
 		cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
 		cy.get("@responsivePopover").should("exist");
-		cy.get("@responsivePopover").find("[ui5-button]").contains("Manage account");
+		cy.get("@responsivePopover").find("[ui5-button]").contains(USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT.defaultText);
 		cy.get("@responsivePopover").find("[ui5-button]").should("have.length", 2);
 	});
 
@@ -56,7 +61,7 @@ describe("Initial rendering", () => {
 		cy.get("@userMenu").should("exist");
 		cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
 		cy.get("@responsivePopover").should("exist");
-		cy.get("@responsivePopover").find("[ui5-panel]").contains("Other accounts (1)");
+		cy.get("@responsivePopover").find("[ui5-panel]").contains(`${USER_MENU_OTHER_ACCOUNT_BUTTON_TXT.defaultText} (1)`);
 		cy.get("@responsivePopover").find("[ui5-button]").should("have.length", 1);
 	});