@ui5/webcomponents 2.3.0-rc.1 → 2.3.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.3.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.3.0-rc.1...v2.3.0-rc.2) (2024-09-19)
+
+
+### Bug Fixes
+
+* **ui5-multi-combobox:** fix aria-describedby token count ([#9792](https://github.com/SAP/ui5-webcomponents/issues/9792)) ([2e0aa03](https://github.com/SAP/ui5-webcomponents/commit/2e0aa039e652534c8d7b667f431306cde1321fab))
+* **ui5-popover:** correct opacity ([#9839](https://github.com/SAP/ui5-webcomponents/issues/9839)) ([371c547](https://github.com/SAP/ui5-webcomponents/commit/371c547676ed71582dc6ff64a2a1b1181dd9bf9d)), closes [#9823](https://github.com/SAP/ui5-webcomponents/issues/9823)
+
+
+### Features
+
+* **selectionAssistant:** introduce SelectionAssistant ([#9797](https://github.com/SAP/ui5-webcomponents/issues/9797)) ([de59eac](https://github.com/SAP/ui5-webcomponents/commit/de59eac1df149caa7541a3bbd3ddad5ae2c298a6))
+
+
+
+
+
 # [2.3.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.3.0-rc.0...v2.3.0-rc.1) (2024-09-12)
 
 

package/cypress/specs/base/AriaLabelHelper.cy.ts

@@ -0,0 +1,282 @@
+import { html } from "lit";
+import "../../../src/Label.js";
+import "../../../src/Input.js";
+
+describe("AriaLabelHelper", () => {
+	it("Label-for tests", () => {
+		cy.mount(html`
+			<ui5-input id="myInput" placeholder="input placeholder" class="field"></ui5-input>
+			<ui5-label id="lblDesc1" for="myInput">Desc1</ui5-label>
+			<ui5-label id="lblDesc2" for="myInput">Desc2</ui5-label>
+			<ui5-label id="lblDesc3" for="myInput">Desc3</ui5-label>
+			<label id="lblDesc4" for="myInput">Desc4</label>
+		`);
+
+		// assert
+		cy.get("#myInput")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-label", "Desc1 Desc2 Desc3 Desc4");
+
+		// act
+		cy.get("#lblDesc2")
+			.invoke("attr", "for", "other");
+
+		cy.get("#lblDesc3")
+			.invoke("remove");
+
+		// assert
+		cy.get("#myInput")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-label", "Desc1 Desc4");
+	});
+
+	it("Input accessibleNameRef Tests", () => {
+		cy.mount(html`
+            <ui5-label id="lblEnterName1">FirstDesc</ui5-label>
+            <ui5-label id="lblEnterName2">SecondDesc</ui5-label>
+            <ui5-label id="lblEnterName3">ThirdDesc</ui5-label>
+            <ui5-input id="inputEnterName" accessible-name-ref="lblEnterName1 lblEnterName3" placeholder="Enter your name"></ui5-input>
+        `);
+
+		// assert
+		cy.get("#inputEnterName")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-label", "FirstDesc ThirdDesc");
+
+		// act - update text of referenced label
+		cy.get("#lblEnterName1")
+			.then($el => {
+				$el.get(0).innerHTML = "First Label Desc";
+			});
+
+		// assert
+		cy.get("#inputEnterName")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-label", "First Label Desc ThirdDesc");
+
+		// act - update accessible-name-ref
+		cy.get("#inputEnterName")
+			.invoke("attr", "accessible-name-ref", "lblEnterName3 lblEnterName1");
+
+		// assert
+		cy.get("#inputEnterName")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-label", "ThirdDesc First Label Desc");
+
+		// act - update accessible-name-ref
+		cy.get("#inputEnterName")
+			.invoke("attr", "accessible-name-ref", "lblEnterName2");
+
+		// assert
+		cy.get("#inputEnterName")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-label", "SecondDesc");
+	});
+
+	it("Input accessibleName and accessibleNameRef Tests", () => {
+		cy.mount(html`
+			<ui5-label id="lblEnterDesc1" for="inputEnterDesc">Label for inputEnterDesc</ui5-label>
+			<ui5-label id="lblEnterDesc3">Label to be added/removed as accessible-name-ref</ui5-label>
+			<ui5-input id="inputEnterDesc" accessible-name="Some description added by accessibleName" placeholder="Enter description"></ui5-input>
+		`);
+
+		const INITIAL_ACCESSIBLE_NAME = "Some description added by accessibleName";
+		const UPDATED_ACCESSIBLE_NAME = "Another description added by accessibleName";
+		const ACCESSIBLE_NAME_REF = "lblEnterDesc3";
+		const ACCESSIBLE_NAME_REF_TEXT = "Label to be added/removed as accessible-name-ref";
+
+		cy.get("#inputEnterDesc")
+			.shadow()
+			.find("input")
+			.as("input");
+
+		// assert
+		cy.get("@input")
+			.should("have.attr", "aria-label", INITIAL_ACCESSIBLE_NAME);
+
+		cy.get("#inputEnterDesc")
+			.invoke("attr", "accessible-name", UPDATED_ACCESSIBLE_NAME);
+
+		// assert
+		cy.get("@input")
+			.invoke("attr", "aria-label")
+			.should("eq", UPDATED_ACCESSIBLE_NAME);
+
+		// act - remove acccessible-name
+		cy.get("#inputEnterDesc")
+			.invoke("removeAttr", "accessible-name");
+
+		// assert - aria-label fallbacks to use the label's for, pointing to this input
+		cy.get("@input")
+			.invoke("attr", "aria-label")
+			.should("eq", "Label for inputEnterDesc");
+
+		// act - add acccessible-name-ref
+		cy.get("#inputEnterDesc")
+			.invoke("attr", "accessible-name-ref", ACCESSIBLE_NAME_REF);
+
+		// assert - the text of the elment labelled with accessible-name-ref is used
+		cy.get("@input")
+			.should("have.attr", "aria-label", ACCESSIBLE_NAME_REF_TEXT);
+
+		// act - add acccessible-name once again
+		cy.get("#inputEnterDesc")
+			.invoke("attr", "accessible-name", INITIAL_ACCESSIBLE_NAME);
+
+		// assert - the text of the elment labelled with accessible-name-ref is still used
+		cy.get("@input")
+			.should("have.attr", "aria-label", ACCESSIBLE_NAME_REF_TEXT);
+
+		// act - remove acccessible-name-ref
+		cy.get("#inputEnterDesc")
+			.invoke("removeAttr", "accessible-name-ref");
+
+		// assert - after acccessible-name-ref is removed, fallbacks to use acccessible-name
+		cy.get("@input")
+			.should("have.attr", "aria-label", INITIAL_ACCESSIBLE_NAME);
+
+		// act - remove acccessible-name
+		cy.get("#inputEnterDesc")
+			.invoke("removeAttr", "accessible-name");
+
+		// assert - aria-label fallbacks to use the label's for, pointing to this input
+		cy.get("@input")
+			.should("have.attr", "aria-label", "Label for inputEnterDesc");
+
+		// act - remove ui5-label's for
+		cy.get("#lblEnterDesc1")
+			.invoke("removeAttr", "for");
+
+		// assert - aria-label is undefined
+		cy.get("@input")
+			.should("not.have.attr", "aria-label");
+	});
+
+	it("Three inputs with same label accessibleNameRef Tests", () => {
+		cy.mount(html`
+			<ui5-label id="lblTestDesc" for="testInput1">Label for testInput1 Desc</ui5-label>
+			<ui5-input id="testInput1" placeholder="Enter description1"></ui5-input>
+			<ui5-input id="testInput2" accessible-name-ref="lblTestDesc" accessible-name="Hello" placeholder="Enter description2"></ui5-input>
+			<ui5-input id="testInput3" accessible-name-ref="lblTestDesc" placeholder="Enter description3"></ui5-input>
+		`);
+
+		const LBL_TEXT_CONTENT = "Label for testInput1 Desc";
+		const LBL_TEXT_CONTENT_UPDATED = "Another description for testing";
+
+		cy.get("#testInput1")
+			.shadow()
+			.find("input")
+			.as("input1");
+
+		cy.get("#testInput2")
+			.shadow()
+			.find("input")
+			.as("input2");
+
+		cy.get("#testInput3")
+			.shadow()
+			.find("input")
+			.as("input3");
+
+		// assert
+		cy.get("@input1")
+			.should("have.attr", "aria-label", LBL_TEXT_CONTENT);
+
+		cy.get("@input2")
+			.should("have.attr", "aria-label", LBL_TEXT_CONTENT);
+
+		cy.get("@input3")
+			.should("have.attr", "aria-label", LBL_TEXT_CONTENT);
+
+		// act
+
+		cy.get("#lblTestDesc")
+			.then($el => {
+				$el.get(0).innerHTML = LBL_TEXT_CONTENT_UPDATED;
+			});
+
+		// assert
+		cy.get("@input1")
+			.should("have.attr", "aria-label", LBL_TEXT_CONTENT_UPDATED);
+
+		cy.get("@input2")
+			.should("have.attr", "aria-label", LBL_TEXT_CONTENT_UPDATED);
+
+		cy.get("@input3")
+			.should("have.attr", "aria-label", LBL_TEXT_CONTENT_UPDATED);
+
+		// act - remove "for" attribute
+		cy.get("#lblTestDesc")
+			.invoke("removeAttr", "for");
+
+		// assert - aria-label is undefined
+		cy.get("@input1")
+			.should("not.have.attr", "aria-label");
+
+		// act - remove accessible-name-ref
+		cy.get("#testInput2")
+			.invoke("removeAttr", "accessible-name-ref");
+
+		// assert - aria-label is the existing accessible-name
+		cy.get("@input2")
+			.should("have.attr", "aria-label", "Hello");
+
+		// act - remove accessible-name-ref
+		cy.get("#testInput3")
+			.invoke("removeAttr", "accessible-name-ref");
+
+		// assert - shouldn't be any aria-label
+		cy.get("@input3")
+			.should("not.have.attr", "aria-label");
+	});
+
+	it("Tests generic html elements with for attribute", () => {
+		cy.mount(html`
+			<label id="elId1" for="myInput2">Desc1</label>
+			<label id="elId2" for="myInput2">Desc2</label>
+			<ui5-input id="myInput2" placeholder="input placeholder"></ui5-input>
+			<div id="elId3" for="myInput2">Desc3</div>
+			<span id="elId4" for="myInput2">Desc4</span>
+			<span id="elId5" for="myInput2">Desc5</span>
+		`);
+
+		cy.get("#myInput2")
+			.shadow()
+			.find("input")
+			.as("input");
+
+		// assert
+		cy.get("@input")
+			.should("have.attr", "aria-label", "Desc1 Desc2 Desc3 Desc4 Desc5");
+
+		// act
+		cy.get("#elId1")
+			.then($el => {
+				$el.get(0).innerHTML = `${$el.get(0).innerHTML}X`;
+			});
+
+		cy.get("#elId2")
+			.invoke("remove");
+
+		cy.get("#elId3")
+			.invoke("attr", "for", "other");
+
+		cy.get("#elId4")
+			.then($el => {
+				$el.get(0).innerHTML = `${$el.get(0).innerHTML}X`;
+			});
+
+		cy.get("#elId5")
+			.invoke("removeAttr", "for");
+
+		// assert
+		cy.get("@input")
+			.should("have.attr", "aria-label", "Desc1X Desc4X");
+	});
+});

package/cypress/specs/base/IconCollection.cy.ts

@@ -0,0 +1,58 @@
+import "./css/redfish.custom.theme.css";
+import getEffectiveIconCollection from "@ui5/webcomponents-base/dist/asset-registries/util/getIconCollectionByTheme.js";
+import { setTheme, isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
+import { html } from "lit";
+import "../../../src/Assets.js";
+import "../../../src/Icon.js";
+
+describe("Icon collection", () => {
+	before(() => {
+		cy.wrap({ setTheme })
+			.invoke("setTheme", "sap_fiori_3_dark");
+	});
+
+	it("tests the icon collection in built-in themes", () => {
+		cy.mount(html`<ui5-icon name="home"></ui5-icon>`);
+
+		cy.wrap({ getEffectiveIconCollection })
+			.invoke("getEffectiveIconCollection")
+			.should("equal", "SAP-icons-v4");
+
+		cy.wrap({ isLegacyThemeFamily })
+			.invoke("isLegacyThemeFamily")
+			.should("be.true");
+
+		// act
+		cy.wrap({ setTheme })
+			.invoke("setTheme", "sap_horizon");
+
+		// assert
+		cy.wrap({ getEffectiveIconCollection })
+			.invoke("getEffectiveIconCollection")
+			.should("equal", "SAP-icons-v5");
+
+		cy.wrap({ isLegacyThemeFamily })
+			.invoke("isLegacyThemeFamily")
+			.should("be.false");
+	});
+
+	it("tests the icon collection in built-in themes", () => {
+		cy.mount(html`<ui5-icon name="home"></ui5-icon>`);
+
+		// act
+		cy.wrap({ setTheme })
+			.invoke("setTheme", "redfish");
+
+		// assert
+		// The 'SAP-icons-v5' collection is correctly used in 'redfish' - extending 'sap_horizon'
+		cy.wrap({ getEffectiveIconCollection })
+			.invoke("getEffectiveIconCollection")
+			.should("equal", "SAP-icons-v5");
+
+		// assert
+		// "The 'redfish' custom theme is not part of legacy theme family, as it's extending 'sap_horizon'.
+		cy.wrap({ isLegacyThemeFamily })
+			.invoke("isLegacyThemeFamily")
+			.should("be.false");
+	});
+});

package/cypress/specs/base/IgnoreCustomElements.cy.ts

@@ -0,0 +1,35 @@
+import { html } from "lit";
+import "../../../src/Card.js";
+import "../../../src/CardHeader.js";
+
+import { ignoreCustomElements, shouldIgnoreCustomElement } from "@ui5/webcomponents-base/dist/IgnoreCustomElements.js";
+
+ignoreCustomElements("app-");
+ignoreCustomElements("my-");
+
+describe("Ignore Custom Elements", () => {
+	it("tests shouldIgnoreCustomElement method", () => {
+		cy.mount(html`<ui5-card>
+		<ui5-card-header
+			slot="header"
+			status="4 of 10"
+			title-text="Product">
+		</ui5-card-header>
+
+		<app-trip-calendar class="myCard-trip-calendar"></app-trip-calendar>
+		<my-trip-calendar class="myCard-trip-calendar"></app-trip-calendar>
+	</ui5-card>`);
+
+		cy.wrap({ shouldIgnoreCustomElement })
+			.invoke("shouldIgnoreCustomElement", "app-trip-calendar")
+			.should("be.true");
+
+		cy.wrap({ shouldIgnoreCustomElement })
+			.invoke("shouldIgnoreCustomElement", "my-trip-calendar")
+			.should("be.true");
+
+		cy.wrap({ shouldIgnoreCustomElement })
+			.invoke("shouldIgnoreCustomElement", "ui5-card-header")
+			.should("be.false");
+	});
+});

package/cypress/specs/base/InvisibleMessage.cy.ts

@@ -0,0 +1,31 @@
+import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
+import "../../../src/Button.js";
+
+describe("InvisibleMessage", () => {
+	it("Initial rendering", () => {
+		cy.get(".ui5-invisiblemessage-polite")
+			.should("exist");
+
+		cy.get(".ui5-invisiblemessage-assertive")
+			.should("exist");
+	});
+
+	it("String annoucement", () => {
+		cy.wrap({ announce })
+			.invoke("announce", "announcement", "Polite");
+		cy.wrap({ announce })
+			.invoke("announce", "announcement", "Assertive");
+
+		// assert
+		cy.get(".ui5-invisiblemessage-polite")
+			.should("contain", "announcement");
+		cy.get(".ui5-invisiblemessage-assertive")
+			.should("contain", "announcement");
+
+		// assert - announcement is cleared
+		cy.get(".ui5-invisiblemessage-polite")
+			.should("not.contain", "announcement");
+		cy.get(".ui5-invisiblemessage-assertive")
+			.should("not.contain", "announcement");
+	});
+});

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

@@ -0,0 +1,55 @@
+import { setEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
+import { html } from "lit";
+import "../../../src/Icon.js";
+import "../../../src/Button.js";
+import "../../../src/ToggleButton.js";
+import "../../../src/SegmentedButton.js";
+import "../../../src/SegmentedButtonItem.js";
+import "../../../src/RatingIndicator.js";
+
+setEnableDefaultTooltips(false);
+
+describe("Default Tooltips", () => {
+	it("tests navigation", () => {
+		cy.mount(html`
+	<ui5-icon id="ic" name="settings"></ui5-icon>
+	<ui5-button id="btn" icon="settings"></ui5-button>
+	<ui5-rating-indicator id="rt" icon="settings"></ui5-rating-indicator>
+	<ui5-toggle-button id="togglebtn" icon="settings"></ui5-toggle-button>
+	<ui5-segmented-button id="segBtn">
+		<ui5-segmented-button-item id="segBtnItem" icon="add"></ui5-segmented-button-item>
+		<ui5-segmented-button-item id="segBtnItem2" icon="settings"></ui5-segmented-button-item>
+		<ui5-segmented-button-item id="segBtnItem3" icon="activate"></ui5-segmented-button-item>
+	</ui5-segmented-button>`);
+
+		cy.get("#ic")
+			.shadow()
+			.find("title")
+			.should("not.exist");
+
+		cy.get("#btn")
+			.shadow()
+			.find(".ui5-button-icon")
+			.should("not.have.attr", "title");
+
+		cy.get("#togglebtn")
+			.shadow()
+			.find(".ui5-button-icon")
+			.should("not.have.attr", "title");
+
+		cy.get("#rt")
+			.shadow()
+			.find(".ui5-rating-indicator-root")
+			.should("not.have.attr", "title");
+
+		cy.get("#segBtnItem")
+			.shadow()
+			.find(".ui5-segmented-button-item-root")
+			.should("not.have.attr", "title");
+
+		cy.get("#segBtnItem")
+			.shadow()
+			.find(".ui5-segmented-button-item-icon")
+			.should("not.have.attr", "title");
+	});
+});

package/cypress/specs/base/css/redfish.custom.theme.css

@@ -0,0 +1,13 @@
+/**
+* Copyright (c) 2012-2020 SAP SE or an SAP affiliate company. All rights reserved.
+*
+* Theming Engine 1.60.0
+* data:{"Path": "Base.baseLib.redfish.css_variables", "PathPattern": "/%frameworkId%/%libId%/%themeId%/%fileId%.css", "Extends": ["sap_horizon","sap_base_fiori","baseTheme"], "Tags": ["Horizon","LightColorScheme"], "Version": { "Build":"11.1.27.20210312160011", "Source": "11.1.27", "Engine": "1.60.0"}}
+*/
+.sapThemeMetaData-Base-baseLib{background-image: url('data:text/plain;utf-8,{"Path": "Base.baseLib.redfish.css_variables", "PathPattern": "/%frameworkId%/%libId%/%themeId%/%fileId%.css", "Extends": ["sap_horizon","sap_base_fiori","baseTheme"], "Tags": ["Horizon","LightColorScheme"], "Version": { "Build":"11.1.27.20210312160011", "Source": "11.1.27", "Engine": "1.60.0"}}');}
+:root {
+  --sapBrandColor: #f42015;
+  --sapBaseColor: #fff;
+  --sapBackgroundColor: #f7f7f7;
+  --sapTextColor: #000;
+}