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

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 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)
 
 

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()