@ui5/webcomponents 2.4.1-rc.0 → 2.5.0-rc.0

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.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+
+### Bug Fixes
+
+* **ui5-card-header:** update interactive property documentation ([#10143](https://github.com/SAP/ui5-webcomponents/issues/10143)) ([23289d4](https://github.com/SAP/ui5-webcomponents/commit/23289d4d1696d0441823d98f71b5e21b617777c3))
+* **ui5-table-growing:** button is shown despite scroll type ([#10142](https://github.com/SAP/ui5-webcomponents/issues/10142)) ([950441b](https://github.com/SAP/ui5-webcomponents/commit/950441b7d272e8cd20499461f4cfa05ad3ac7510)), closes [#10045](https://github.com/SAP/ui5-webcomponents/issues/10045)
+
+
+### Features
+
+* **ui5-color-picker:** add simplified display mode ([#10153](https://github.com/SAP/ui5-webcomponents/issues/10153)) ([bf9c0d6](https://github.com/SAP/ui5-webcomponents/commit/bf9c0d653be5af5473a7b616f2c91803db46beb3)), closes [#9979](https://github.com/SAP/ui5-webcomponents/issues/9979)
+* **ui5-combobox/multi-combobox:** physical items ([#10051](https://github.com/SAP/ui5-webcomponents/issues/10051)) ([73f82ab](https://github.com/SAP/ui5-webcomponents/commit/73f82abe5e9a61d88919f4c45df9435be850eb2f))
+* **ui5-form:** update to latest accessibility spec ([#10152](https://github.com/SAP/ui5-webcomponents/issues/10152)) ([4382d4e](https://github.com/SAP/ui5-webcomponents/commit/4382d4e280ffcf01a924163b9b719887c17f529a)), closes [#9952](https://github.com/SAP/ui5-webcomponents/issues/9952)
+* **ui5-list, ui5-tree:** support accessible description ([#10131](https://github.com/SAP/ui5-webcomponents/issues/10131)) ([45f0ffe](https://github.com/SAP/ui5-webcomponents/commit/45f0ffeafb2da0ffcaf425649c7440b604e359a3)), closes [#6445](https://github.com/SAP/ui5-webcomponents/issues/6445)
+* **ui5-tokenizer:** enable multiline mode ([#9964](https://github.com/SAP/ui5-webcomponents/issues/9964)) ([1071746](https://github.com/SAP/ui5-webcomponents/commit/107174616b5b3b96c174160488eba18b9cdb9cae))
+
+
+
+
+
 ## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
 
 

package/cypress/specs/ColorPicker.cy.ts

@@ -0,0 +1,27 @@
+import { html } from "lit";
+import "../../src/ColorPicker.js";
+import type ColorPicker from "../../src/ColorPicker.js";
+
+describe("Color Picker tests", () => {
+	it("should not display color channel inputs and alpha slider in simplified mode", () => {
+		cy.mount(html`<ui5-color-picker display-mode="Simplified"></ui5-color-picker>`);
+
+		cy.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-hex-input")
+			.should("exist");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#red")
+			.should("not.exist");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#alpha")
+			.should("not.exist");
+	});
+});

package/cypress/specs/Form.cy.ts

@@ -1,29 +1,33 @@
 import { html } from "lit";
+import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
 import "../../src/Form.js";
 import "../../src/FormItem.js";
 import "../../src/FormGroup.js";
+import "../../src/Label.js";
+import "../../src/Text.js";
+import "../../src/Input.js";
 
 describe("General API", () => {
 	it("tests calculated state of Form with default layout and label-span", () => {
 		cy.mount(html`<ui5-form class="addressForm" header-text="Default form">
 			<ui5-form-group header-text="Address">
 				<ui5-form-item>
-					<span slot="labelContent">Name:</span>
-					<span class="text">Red Point Stores</span>
+					<ui5-label slot="labelContent">Name</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
 				</ui5-form-item>
 			</ui5-form-group>
 
 			<ui5-form-group id="testFormGroup2" header-text="Contact">
 				<ui5-form-item>
-					<span slot="labelContent">Twitter:</span>
-					<span class="text">@sap</span>
+					<ui5-label slot="labelContent">Twitter</ui5-label>
+					<ui5-text>@sap</ui5-text>
 				</ui5-form-item>
 			</ui5-form-group>
 
 			<ui5-form-group id="testFormGroup3" header-text="Other info">
 				<ui5-form-item>
-					<span slot="labelContent">Name:</span>
-					<span class="text">Red Point Stores</span>
+					<ui5-label slot="labelContent">Name</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
 				</ui5-form-item>
 			</ui5-form-group>
 		</ui5-form>`);
@@ -60,22 +64,22 @@ describe("General API", () => {
 		cy.mount(html`<ui5-form class="addressForm" header-text="WebC :: Supplier 3gr (S1 M2 L3 XL6)" layout="S1 M2 L3 XL6">
 	<ui5-form-group header-text="Address">
 		<ui5-form-item>
-			<span slot="labelContent">Name:</span>
-			<span class="text">Red Point Stores</span>
+			<ui5-label slot="labelContent">Name</ui5-label>
+			<ui5-text>Red Point Stores</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 
 	<ui5-form-group id="testFormGroup2" header-text="Contact">
 		<ui5-form-item>
-			<span slot="labelContent">Twitter:</span>
-			<span class="text">@sap</span>
+			<ui5-label slot="labelContent">Twitter</ui5-label>
+			<ui5-text>@sap</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 
 	<ui5-form-group id="testFormGroup3" header-text="Other info">
 		<ui5-form-item>
-			<span slot="labelContent">Name:</span>
-			<span class="text">Red Point Stores</span>
+			<ui5-label slot="labelContent">Name</ui5-label>
+			<ui5-text>Red Point Stores</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 </ui5-form>`);
@@ -111,34 +115,34 @@ describe("General API", () => {
 	it("tests calculated state of Form with layout='S1 M2 L2 XL3' label-span='S12 M12 L12 XL12'", () => {
 		cy.mount(html`<ui5-form header-text="Labels on top" layout="S1 M2 L2 XL3" label-span="S12 M12 L12 XL12">
 	<ui5-form-item>
-		<span slot="labelContent">Name:</span>
+		<ui5-label slot="labelContent">Name</ui5-label>
 		<input />
 	</ui5-form-item>
 
 	<ui5-form-item>
-		<span slot="labelContent">ZIP Code/City:</span>
+		<ui5-label slot="labelContent">ZIP Code/City</ui5-label>
 		<input />
 		<input />
 	</ui5-form-item>
 
 	<ui5-form-item>
-		<span slot="labelContent">Street:</span>
+		<ui5-label slot="labelContent">Street</ui5-label>
 		<input />
 		<input />
 	</ui5-form-item>
 
 	<ui5-form-item>
-		<span slot="labelContent">Country:</span>
+		<ui5-label slot="labelContent">Country</ui5-label>
 		<input />
 	</ui5-form-item>
 
 	<ui5-form-item>
-		<span slot="labelContent">WebSite:</span>
+		<ui5-label slot="labelContent">WebSite</ui5-label>
 		<input />
 	</ui5-form-item>
 
 	<ui5-form-item>
-		<span slot="labelContent">Delivery address:</span>
+		<ui5-label slot="labelContent">Delivery address</ui5-label>
 		<input />
 	</ui5-form-item>
 </ui5-form>`);
@@ -175,20 +179,20 @@ describe("General API", () => {
 		cy.mount(html`<ui5-form header-text="WebC :: Supplier 2gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
 	<ui5-form-group id="testFormGroup4" header-text="Address">
 		<ui5-form-item>
-			<span slot="labelContent">Name:</span>
-			<span>Red Point Stores</span>
+			<ui5-label slot="labelContent">Name</ui5-label>
+			<ui5-text>Red Point Stores</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 
 	<ui5-form-group id="testFormGroup5" header-text="Contact">
 		<ui5-form-item>
-			<span slot="labelContent">Twitter:</span>
-			<span>@sap</span>
+			<ui5-label slot="labelContent">Twitter</ui5-label>
+			<ui5-text>@sap</ui5-text>
 		</ui5-form-item>
 
 		<ui5-form-item>
-			<span slot="labelContent">Email:</span>
-			<span>john.smith@sap.com</span>
+			<ui5-label slot="labelContent">Email</ui5-label>
+			<ui5-text>john.smith@sap.com</ui5-text>
 		</ui5-form-item>
 </ui5-form>`);
 
@@ -227,37 +231,37 @@ describe("General API", () => {
 		cy.mount(html`<ui5-form header-text="WebC :: Supplier 3gr (S1 M2 L3 XL6)" layout="S1 M2 L3 XL6">
 	<ui5-form-group id="testFormGroup1" header-text="Address">
 		<ui5-form-item>
-			<span slot="labelContent">Name:</span>
-			<span>Red Point Stores</span>
+			<ui5-label slot="labelContent">Name</ui5-label>
+			<ui5-text>Red Point Stores</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 
 	<ui5-form-group id="testFormGroup2" header-text="Contact">
 		<ui5-form-item>
-			<span slot="labelContent">Twitter:</span>
-			<span>@sap</span>
+			<ui5-label slot="labelContent">Twitter</ui5-label>
+			<ui5-text>@sap</ui5-text>
 		</ui5-form-item>
 
 		<ui5-form-item>
-			<span slot="labelContent">Email:</span>
-			<span>john.smith@sap.com</span>
+			<ui5-label slot="labelContent">Email</ui5-label>
+			<ui5-text>john.smith@sap.com</ui5-text>
 		</ui5-form-item>
 
 		<ui5-form-item>
-			<span slot="labelContent">Tel:</span>
-			<span>+49 6227 747474</span>
+			<ui5-label slot="labelContent">Tel</ui5-label>
+			<ui5-text>+49 6227 747474</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 
 	<ui5-form-group id="testFormGroup3" header-text="Other info">
 		<ui5-form-item>
-			<span slot="labelContent">Name:</span>
-			<span>Red Point Stores</span>
+			<ui5-label slot="labelContent">Name</ui5-label>
+			<ui5-text>Red Point Stores</ui5-text>
 		</ui5-form-item>
 
 		<ui5-form-item>
-			<span slot="labelContent">ZIP Code/City:</span>
-			<span>411 Maintown</span>
+			<ui5-label slot="labelContent">ZIP Code/City</ui5-label>
+			<ui5-text>411 Maintown</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 </ui5-form>`);
@@ -312,27 +316,27 @@ describe("General API", () => {
 		cy.mount(html`<ui5-form header-text="WebC :: Supplier 3gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
 	<ui5-form-group id="testFormGroup6" header-text="Address">
 		<ui5-form-item>
-			<span slot="labelContent">Name:</span>
-			<span>Red Point Stores</span>
+			<ui5-label slot="labelContent">Name</ui5-label>
+			<ui5-text>Red Point Stores</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 
 	<ui5-form-group id="testFormGroup7" header-text="Contact">
 		<ui5-form-item>
-			<span slot="labelContent">Twitter:</span>
-			<span>@sap</span>
+			<ui5-label slot="labelContent">Twitter</ui5-label>
+			<ui5-text>@sap</ui5-text>
 		</ui5-form-item>
 
 		<ui5-form-item>
-			<span slot="labelContent">Email:</span>
-			<span>john.smith@sap.com</span>
+			<ui5-label slot="labelContent">Email</ui5-label>
+			<ui5-text>john.smith@sap.com</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 
 	<ui5-form-group id="testFormGroup8" header-text="Other info">
 		<ui5-form-item>
-			<span slot="labelContent">Name:</span>
-			<span>Red Point Stores</span>
+			<ui5-label slot="labelContent">Name</ui5-label>
+			<ui5-text>Red Point Stores</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 </ui5-form>`);
@@ -383,3 +387,205 @@ describe("General API", () => {
 			.should("have.prop", "colsXl", 1);
 	});
 });
+
+describe("Accessibility", () => {
+	it("tests 'role' and 'aria-labelledby' of form with groups", () => {
+		cy.mount(html`<ui5-form class="addressForm" header-text="Form header text">
+			<ui5-form-group header-text="Address">
+				<ui5-form-item>
+					<ui5-label>Name:</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
+				</ui5-form-item>
+			</ui5-form-group>
+
+			<ui5-form-group id="testFormGroup2" header-text="Contact">
+				<ui5-form-item>
+					<ui5-label>Twitter:</ui5-label>
+					<ui5-text>@sap</ui5-text>
+				</ui5-form-item>
+			</ui5-form-group>
+
+			<ui5-form-group id="testFormGroup3" header-text="Other info">
+				<ui5-form-item>
+					<ui5-label>Name:</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
+				</ui5-form-item>
+			</ui5-form-group>
+		</ui5-form>`);
+
+		cy.get("[ui5-form]")
+			.as("form");
+
+		cy.get("[ui5-form-group]")
+			.first()
+			.as("formGroup");
+
+		cy.get("@form")
+			.shadow()
+			.find(".ui5-form-root")
+			.should("have.attr", "role", "region");
+
+		// assert: the root element's aria-labelledby is equal to the form title's ID
+		cy.get("@form").shadow().find(".ui5-form-root").invoke("attr", "aria-labelledby")
+			.then(ariaLabelledBy => {
+				cy.get("@form").shadow().find(".ui5-form-header [ui5-title]")
+					.invoke("attr", "id")
+					.then(id => {
+						expect(ariaLabelledBy).to.equal(id);
+					});
+			});
+
+		cy.get("@form")
+			.shadow()
+			.find(".ui5-form-group")
+			.eq(0)
+			.as("firstGroupDOMRef");
+
+		cy.get("@form")
+			.shadow()
+			.find(".ui5-form-group [ui5-title]")
+			.eq(0)
+			.as("firstGroupTitle");
+
+		cy.get("@form")
+			.should("not.have.attr", "data-sap-ui-fastnavgroup", "true");
+
+		cy.get("@formGroup")
+			.should("have.attr", "data-sap-ui-fastnavgroup", "true");
+
+		cy.get("@firstGroupDOMRef")
+			.should("have.attr", "role", "form");
+
+		// assert: the form group's aria-labelledby is equal to the form group title's ID
+		cy.get("@firstGroupDOMRef")
+			.invoke("attr", "aria-labelledby")
+			.then(ariaLabelledBy => {
+				cy.get("@firstGroupTitle")
+					.invoke("attr", "id")
+					.then(id => {
+						expect(ariaLabelledBy).to.equal(id);
+					});
+			});
+	});
+
+	it("tests 'role' and 'aria-labelledby' of form without groups", () => {
+		cy.mount(html`<ui5-form class="addressForm" header-text="Form header text">
+				<ui5-form-item>
+					<ui5-label>Name:</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
+				</ui5-form-item>
+				<ui5-form-item>
+					<ui5-label>Twitter:</ui5-label>
+					<ui5-text>@sap</ui5-text>
+				</ui5-form-item>
+				<ui5-form-item>
+					<ui5-label>Name:</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
+				</ui5-form-item>
+		</ui5-form>`);
+
+		cy.get("[ui5-form]")
+			.as("form");
+
+		cy.get("@form")
+			.shadow()
+			.find(".ui5-form-root")
+			.should("have.attr", "role", "form");
+
+		cy.get("@form")
+			.should("have.attr", "data-sap-ui-fastnavgroup", "true");
+
+		// assert: the root element's aria-labelledby is equal to the form title's ID
+		cy.get("@form").shadow().find(".ui5-form-root").invoke("attr", "aria-labelledby")
+			.then(ariaLabelledBy => {
+				cy.get("@form").shadow().find(".ui5-form-header [ui5-title]")
+					.invoke("attr", "id")
+					.then(id => {
+						expect(ariaLabelledBy).to.equal(id);
+					});
+			});
+	});
+
+	it("tests F6 navigation", () => {
+		cy.mount(html`
+			<section>
+				<button id="before">Before element</button>
+			</section>
+			<ui5-form id="formWithGroups" header-text="Form 1">
+				<ui5-form-group header-text="Address">
+					<ui5-form-item>
+						<ui5-label for="nameInp" slot="labelContent">Name:</ui5-label>
+						<ui5-input value="Red Point Stores" id="nameInp"></ui5-input>
+					</ui5-form-item>
+				
+					<ui5-form-item>
+						<ui5-label id="cityLbl" for="cityInp" slot="labelContent">ZIP Code/City:</ui5-label>
+						<ui5-input id="cityInp" value="411" accessible-name-ref="cityLbl"></ui5-input>
+						<ui5-input value="Maintown" accessible-name-ref="cityLbl"></ui5-input>
+					</ui5-form-item>
+				</ui5-form-group>
+
+				<ui5-form-group header-text="Contact">
+					<ui5-form-item>
+						<ui5-label id="streetLbl" for="streetInp" slot="labelContent">Street:</ui5-label>
+						<ui5-input id="streetInp" value="Main St" accessible-name-ref="streetLbl"></ui5-input>
+						<ui5-input id="streetNumberInp" value="1618" accessible-name-ref="streetLbl"></ui5-input>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label id="countryLbl" for="countrySel" slot="labelContent">Country:</ui5-label>
+						<ui5-input id="countrySel" accessible-name-ref="countryLbl"></ui5-input>
+					</ui5-form-item>
+				</ui5-form-group>
+			</ui5-form>
+
+			<ui5-form id="formWithItems" header-text="Form 2">
+				<ui5-form-item>
+					<ui5-label for="nameInp2" slot="labelContent">Name:</ui5-label>
+					<ui5-input value="Red Point Stores" id="nameInp2"></ui5-input>
+				</ui5-form-item>
+				
+				<ui5-form-item>
+					<ui5-label id="cityLbl2" for="cityInp2" slot="labelContent">ZIP Code/City:</ui5-label>
+					<ui5-input id="cityInp2" value="411" accessible-name-ref="cityLbl2"></ui5-input>
+					<ui5-input value="Maintown" accessible-name-ref="cityLbl2"></ui5-input>
+				</ui5-form-item>
+
+				<ui5-form-item>
+					<ui5-label id="streetLbl2" for="streetInp2" slot="labelContent">Street:</ui5-label>
+					<ui5-input id="streetInp2" value="Main St" accessible-name-ref="streetLbl2"></ui5-input>
+					<ui5-input id="streetNumberInp" value="1618" accessible-name-ref="streetLbl2"></ui5-input>
+				</ui5-form-item>
+				
+				<ui5-form-item>
+					<ui5-label id="countryLbl2" for="countrySel2" slot="labelContent">Country:</ui5-label>
+					<ui5-input id="countrySel2" accessible-name-ref="countryLbl2"></ui5-input>
+				</ui5-form-item>
+			</ui5-form>`);
+
+		cy.get("#before").focus();
+		cy.realPress("F6");
+
+		// assert: the first input of the first FormGroup is focused
+		cy.get("#nameInp")
+			.should("be.focused");
+
+		cy.realPress("F6");
+
+		// assert: the first input in second FormGroup is focused
+		cy.get("#streetInp")
+			.should("be.focused");
+
+		cy.realPress("F6");
+
+		// assert: the first input in next Form is focused
+		cy.get("#nameInp2")
+			.should("be.focused");
+
+		cy.realPress("F6");
+
+		// assert: back to the first Form
+		cy.get("#nameInp")
+			.should("be.focused");
+	});
+});

package/cypress/specs/LitKeyFunction.cy.ts

@@ -1,6 +1,7 @@
 import { html } from "lit";
 import "../../src/MultiComboBox.js";
 import "../../src/MultiComboBoxItem.js";
+import type List from "../../src/List.js";
 
 describe("Lit HTML key function for #each", () => {
 	it("LIT HTML does not mess up keys when looping over lists", () => {
@@ -21,15 +22,17 @@ describe("Lit HTML key function for #each", () => {
 
 		cy.get("@mcb")
 			.shadow()
-			.find(".ui5-multi-combobox-all-items-responsive-popover")
-			.as("popover");
+			.find("[ui5-responsive-popover]")
+			.as("rpo");
 
-		cy.get("@popover")
-			.find(".ui5-multi-combobox-all-items-list > ui5-li")
-			.as("items");
+		cy.get("@rpo")
+			.find("[ui5-list]")
+			.as("list");
 
-		cy.get("@items")
-			.eq(0)
+		cy.get("@list")
+			.then($el => {
+				return ($el[0] as List).getSlottedNodes("items");
+			})
 			.realClick();
 
 		cy.get("@mcb")
@@ -37,14 +40,18 @@ describe("Lit HTML key function for #each", () => {
 			.find(".inputIcon")
 			.realClick();
 
-		// cy.get("@items")
-		// 	.eq(0)
-		// 	.should("contain.text", "<empty>")
-		// 	.should("not.have.attr", "selected");
-
-		// cy.get("@items")
-		// 	.eq(3)
-		// 	.should("contain.text", "USA")
-		// 	.should("have.attr", "selected");
+		cy.get("@list")
+			.then($el => {
+				return ($el[0] as List).getSlottedNodes("items")[0];
+			})
+			.invoke("attr", "text", "<empty>")
+			.should("not.have.attr", "selected");
+
+		cy.get("@list")
+			.then($el => {
+				return ($el[0] as List).getSlottedNodes("items")[3];
+			})
+			.invoke("attr", "text", "USA")
+			.should("have.attr", "selected");
 	});
 });