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

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 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
+
+* **f6navigation:** skip hidden elements ([#10325](https://github.com/SAP/ui5-webcomponents/issues/10325)) ([374d4d8](https://github.com/SAP/ui5-webcomponents/commit/374d4d82239f1309231c8516c20be8c160e81e40)), closes [#10236](https://github.com/SAP/ui5-webcomponents/issues/10236)
+* **framework:** getComponentFeature can return undefined ([#10456](https://github.com/SAP/ui5-webcomponents/issues/10456)) ([7da765c](https://github.com/SAP/ui5-webcomponents/commit/7da765c8c7f3831e25bffa557dd059e819be30ba))
+* 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-tab-container:** remove text shadow ([#10452](https://github.com/SAP/ui5-webcomponents/issues/10452)) ([ef59e50](https://github.com/SAP/ui5-webcomponents/commit/ef59e50bc7423af783c722d32d10d596009ff331)), closes [#10262](https://github.com/SAP/ui5-webcomponents/issues/10262)
+
+
+
+
+
+# [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)
+
+**Note:** Version bump only for package @ui5/webcomponents
+
+
+
+
+
 # [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

@@ -10,15 +10,18 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 |--------------------------|-----------------------------|------------------------------------------------------------|
 | Avatar                   | `ui5-avatar`                | `import "@ui5/webcomponents/dist/Avatar.js";`              |
 | Avatar Group             | `ui5-avatar-group`          | `import "@ui5/webcomponents/dist/AvatarGroup.js";`         |
-| Tag                    | `ui5-tag`                 | `import "@ui5/webcomponents/dist/Tag.js";`               |
 | Bar                      | `ui5-bar`                   | `import "@ui5/webcomponents/dist/Bar.js";`                 |
 | Breadcrumbs              | `ui5-breadcrumbs`           | `import "@ui5/webcomponents/dist/Breadcrumbs.js";`         |
 | Breadcrumbs Item         | `ui5-breadcrumbs-item`      | comes with `ui5-breadcrumbs`                               |
-| Tag                    | `ui5-tag`                 | `import "@ui5/webcomponents/dist/Tag.js";`               |
+| Tag                      | `ui5-tag`                   | `import "@ui5/webcomponents/dist/Tag.js";`                 |
 | Busy Indicator           | `ui5-busy-indicator`        | `import "@ui5/webcomponents/dist/BusyIndicator.js";`       |
 | Button                   | `ui5-button`                | `import "@ui5/webcomponents/dist/Button.js";`              |
 | Calendar                 | `ui5-calendar`              | `import "@ui5/webcomponents/dist/Calendar.js";`            |
-| Calendar Date            | `ui5-calendar-date`         | comes with `ui5-calendar`                                  |
+| Calendar Date            | `ui5-date`                  | comes with `ui5-calendar`                                  |
+| Calendar Date Range      | `ui5-date-range`            | comes with `ui5-calendar`                                  |
+| Calendar Special Date    | `ui5-date-special`          | comes with `ui5-calendar`                                  |
+| Calendar Legend          | `ui5-calendar-legend`       | `import "@ui5/webcomponents/dist/CalendarLegend.js";`      |
+| Calendar Legend Item     | `ui5-calendar-legend-item`  | comes with `ui5-calendar-legend`                           |
 | Card                     | `ui5-card`                  | `import "@ui5/webcomponents/dist/Card.js";`                |
 | CardHeader               | `ui5-card-header`           | `import "@ui5/webcomponents/dist/CardHeader.js";`          |
 | Carousel                 | `ui5-carousel`              | `import "@ui5/webcomponents/dist/Carousel.js";`            |
@@ -43,7 +46,9 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 | List - Standard Item     | `ui5-li`                    | `import "@ui5/webcomponents/dist/ListItemStandard.js";`    |
 | List - Custom Item       | `ui5-li-custom`             | `import "@ui5/webcomponents/dist/ListItemCustom.js";`      |
 | List - Group Item        | `ui5-li-group`              | `import "@ui5/webcomponents/dist/ListItemGroup.js";`       |
-| Menu                     | `ui5-menu        `          | `import "@ui5/webcomponents/dist/Menu.js";`                |
+| Menu                     | `ui5-menu`                  | `import "@ui5/webcomponents/dist/Menu.js";`                |
+| Menu Item                | `ui5-menu-item`             | comes with `ui5-menu`                                      |
+| Menu Separator           | `ui5-menu-separator`        | comes with `ui5-menu`                                      |
 | Message Strip            | `ui5-message-strip`         | `import "@ui5/webcomponents/dist/MessageStrip.js";`        |
 | Multi ComboBox           | `ui5-multi-combobox`        | `import "@ui5/webcomponents/dist/MultiComboBox.js";`       |
 | Multi ComboBox Item      | `ui5-mcb-item`              | comes with `ui5-multi-combobox`                            |
@@ -76,6 +81,7 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 | Token                    | `ui5-token`                 | comes with `ui5-multi-input`                               |
 | Tree                     | `ui5-tree`                  | `import "@ui5/webcomponents/dist/Tree.js";`                |
 | Tree Item                | `ui5-tree-item`             | comes with `ui5-tree`                                      |
+| Tree Item Custom         | `ui5-tree-item-custom`      | comes with `ui5-tree`                                      |
 
 ## Provided assets
 

package/cypress/specs/F6.cy.ts

@@ -59,6 +59,73 @@ describe("F6 navigation", () => {
 				.should("be.focused");
 		});
 
+		it("tests navigation with hidden elements", () => {
+			cy.mount(html`<div>
+				<div class="section">
+					<button id="before">Before element</button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button id="first">First focusable</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button style="visibility: hidden;">Hidden</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true"  style="visibility: hidden;">
+					<ui5-button>Hidden</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button style="display: none;">Hidden</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true"  style="display: none;">
+					<ui5-button>Hidden</ui5-button>
+				</div>
+				<div class="section">
+					<ui5-button>Something focusable</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button id="second">Second focusable</ui5-button>
+				</div>
+				<div class="section">
+					<ui5-button>Something focusable</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button id="third">Third focusable</ui5-button>
+				</div>
+				<div class="section">
+					<ui5-button>After Element</ui5-button>
+				</div>
+			</div`);
+
+			// act
+			cy.get("#before").focus();
+			cy.realPress("F6");
+
+			// assert 1st group is focused
+			cy.get("#first")
+				.should("be.focused");
+
+			// act
+			cy.realPress("F6");
+
+			// assert 2nd group is focused
+			cy.get("#second")
+				.should("be.focused");
+
+			// act
+			cy.realPress("F6");
+
+			// assert 3rd group is focused
+			cy.get("#third")
+				.should("be.focused");
+
+			// act
+			cy.realPress("F6");
+
+			// assert 1st group is focused agian
+			cy.get("#first")
+				.should("be.focused");
+		});
+
 		it("tests navigation with empty group", () => {
 			cy.mount(html`<div>
 				<div class="section">
@@ -386,6 +453,73 @@ describe("F6 navigation", () => {
 				.should("be.focused");
 		});
 
+		it("tests navigation with hidden elements", () => {
+			cy.mount(html`<div>
+				<div class="section">
+					<button id="before">Before element</button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button id="first">First focusable</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button style="visibility: hidden;">Hidden</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true"  style="visibility: hidden;">
+					<ui5-button>Hidden</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button style="display: none;">Hidden</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true"  style="display: none;">
+					<ui5-button>Hidden</ui5-button>
+				</div>
+				<div class="section">
+					<ui5-button>Something focusable</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button id="second">Second focusable</ui5-button>
+				</div>
+				<div class="section">
+					<ui5-button>Something focusable</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button id="third">Third focusable</ui5-button>
+				</div>
+				<div class="section">
+					<ui5-button>After Element</ui5-button>
+				</div>
+			</div`);
+
+			// act
+			cy.get("#before").focus();
+			cy.realPress(["Shift", "F6"]);
+
+			// assert 3rd group is focused
+			cy.get("#third")
+				.should("be.focused");
+
+			// act
+			cy.realPress(["Shift", "F6"]);
+
+			// assert 2nd group is focused
+			cy.get("#second")
+				.should("be.focused");
+
+			// act
+			cy.realPress(["Shift", "F6"]);
+
+			// assert 1st group is focused
+			cy.get("#first")
+				.should("be.focused");
+
+			// act
+			cy.realPress(["Shift", "F6"]);
+
+			// assert 3rd group is focused agian
+			cy.get("#third")
+				.should("be.focused");
+		});
+
 		it("tests navigation with empty group", () => {
 			cy.mount(html`<div>
 				<div class="section">

package/cypress/specs/List.cy.ts

@@ -1,5 +1,6 @@
 import { html } from "lit";
 import "../../src/List.js";
+import "../../src/ListItemStandard.js";
 import type List from "../../src/List.js";
 
 describe("List Tests", () => {

package/cypress/specs/MessageStrip.cy.ts

@@ -1,8 +1,51 @@
 import { html } from "lit";
 import "../../src/MessageStrip.js";
-import { MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION, MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM } from "../../src/generated/i18n/i18n-defaults.js";
+import {
+	MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION,
+	MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM,
+	MESSAGE_STRIP_INFORMATION,
+	MESSAGE_STRIP_CLOSABLE,
+	MESSAGE_STRIP_CUSTOM,
+} from "../../src/generated/i18n/i18n-defaults.js";
+
+describe("API", () => {
+	it("tests close event", () => {
+		cy.mount(html`<ui5-message-strip>MessageStrip</ui5-message-strip>`);
+
+		cy.get("[ui5-message-strip]").then($strip => {
+			$strip.get(0).addEventListener("close", cy.stub().as("close"));
+		});
+
+		cy.get("[ui5-message-strip]")
+			.shadow()
+			.find(".ui5-message-strip-close-button")
+			.as("closeButton");
+
+		cy.get("@closeButton")
+			.realClick();
+
+		cy.get("@closeButton")
+			.realPress("Space");
+
+		cy.get("@closeButton")
+			.realPress("Enter");
+
+		cy.get("@close").should("have.callCount", 3);
+	});
+
+	it("Message strip is rendered without icon when design changes from default to a specific color set and scheme", () => {
+		cy.mount(html`<ui5-message-strip >MessageStrip w/ default properties</ui5-message-strip>`);
+
+		cy.get("[ui5-message-strip]")
+			.invoke("prop", "design", "ColorSet1")
+			.invoke("prop", "colorScheme", "1");
+
+		cy.get("[ui5-message-strip]")
+			.shadow()
+			.find("ui5-icon")
+			.should("not.exist");
+	});
 
-describe("MessageStrip close button tooltip", () => {
 	it("should display the correct tooltip text for different designs", () => {
 		const designs = [
 		  {
@@ -25,5 +68,24 @@ describe("MessageStrip close button tooltip", () => {
 				.find("button")
 				.should("have.attr", "title", btnText);
 		});
-	  });
+	});
+});
+
+describe("Accessibility", () => {
+	it("Test hidden text element content", () => {
+		cy.mount(html`
+			<ui5-message-strip id="messageStrip">Hello World!</ui5-message-strip>
+			<ui5-message-strip id="colorSet1ColorScheme1" design="ColorSet1" color-scheme="1" class="top"><ui5-icon name="palette" slot="icon"></ui5-icon>Color Set 1 - color-scheme 1</ui5-message-strip>
+		`);
+
+		cy.get("#messageStrip")
+			.shadow()
+			.find(".ui5-hidden-text")
+			.should("have.text", `${MESSAGE_STRIP_INFORMATION.defaultText} ${MESSAGE_STRIP_CLOSABLE.defaultText}`);
+
+		cy.get("#colorSet1ColorScheme1")
+			.shadow()
+			.find(".ui5-hidden-text")
+			.should("have.text", `${MESSAGE_STRIP_CUSTOM.defaultText} ${MESSAGE_STRIP_CLOSABLE.defaultText}`);
+	});
 });

package/cypress/specs/Toast.cy.ts

@@ -2,6 +2,7 @@ import { html } from "lit";
 import "../../src/Toast.js";
 import "../../src/Button.js";
 import "../../src/List.js";
+import "../../src/ListItemStandard.js";
 import type Toast from "../../src/Toast.js";
 
 describe("Toast - test popover API", () => {