@ui5/webcomponents 2.5.0-rc.2 → 2.5.0-rc.3

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 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.3](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.2...v2.5.0-rc.3) (2024-12-05)
+
+
+### Bug Fixes
+
+* **ui5-li:** address additional text contrast issue ([#10269](https://github.com/SAP/ui5-webcomponents/issues/10269)) ([6cf15d9](https://github.com/SAP/ui5-webcomponents/commit/6cf15d922276898614b758532923af98557a929d)), closes [#9869](https://github.com/SAP/ui5-webcomponents/issues/9869)
+* **ui5-list:** enable focusin event bubbling ([#10156](https://github.com/SAP/ui5-webcomponents/issues/10156)) ([3b6cc84](https://github.com/SAP/ui5-webcomponents/commit/3b6cc8457ab47c1651a34f04b9401ee3112bd8c5)), closes [#9787](https://github.com/SAP/ui5-webcomponents/issues/9787)
+* **ui5-menu:** provide a way to focus items on fetch ([#10210](https://github.com/SAP/ui5-webcomponents/issues/10210)) ([073f0f6](https://github.com/SAP/ui5-webcomponents/commit/073f0f6fa11e34d5a831a401c711449ef44a2995)), closes [#7237](https://github.com/SAP/ui5-webcomponents/issues/7237)
+* **ui5-popover:** search for the opener in the correct root ([#10284](https://github.com/SAP/ui5-webcomponents/issues/10284)) ([ee08efa](https://github.com/SAP/ui5-webcomponents/commit/ee08efa855dd502fba09fcfa7bf8d6853f44a612))
+* **ui5-rating-indicator:** correct half icon appearance ([#10263](https://github.com/SAP/ui5-webcomponents/issues/10263)) ([3032393](https://github.com/SAP/ui5-webcomponents/commit/30323935ba1ef56665b0b3c82d1f7e5f6a5d26bd)), closes [#10155](https://github.com/SAP/ui5-webcomponents/issues/10155)
+* **ui5-rating-indicator:** outline border is visible when focus ([#10205](https://github.com/SAP/ui5-webcomponents/issues/10205)) ([eaa6f04](https://github.com/SAP/ui5-webcomponents/commit/eaa6f0411f877c9448bc5da4d15589f67614e7a1))
+* **ui5-tag:** correct hover background color for Set 2 Color Scheme 9 ([#10229](https://github.com/SAP/ui5-webcomponents/issues/10229)) ([1b2eaed](https://github.com/SAP/ui5-webcomponents/commit/1b2eaedf6a9effdf728d3e41b9cf56e0c2aa1c96)), closes [#10164](https://github.com/SAP/ui5-webcomponents/issues/10164)
+
+
+### Features
+
+* **framework:** add strict event type checking ([#10235](https://github.com/SAP/ui5-webcomponents/issues/10235)) ([4ff8ab7](https://github.com/SAP/ui5-webcomponents/commit/4ff8ab7c34db5058b92511767be1b96c69a91cb5))
+* **table:** table virtualization ([#10182](https://github.com/SAP/ui5-webcomponents/issues/10182)) ([bf4c859](https://github.com/SAP/ui5-webcomponents/commit/bf4c8596611bf61435809b1bf42766db83aea002))
+* **ui5-bar:** add shadow parts ([#10271](https://github.com/SAP/ui5-webcomponents/issues/10271)) ([9114a82](https://github.com/SAP/ui5-webcomponents/commit/9114a82ecc14ae3dbf118bd8ad835a6a16949298)), closes [#10101](https://github.com/SAP/ui5-webcomponents/issues/10101)
+* **ui5-button, ui5-link:** support accessibile description ([#10212](https://github.com/SAP/ui5-webcomponents/issues/10212)) ([51139c2](https://github.com/SAP/ui5-webcomponents/commit/51139c2df3daf2a892b924b51d260f561b867e5b)), closes [#5310](https://github.com/SAP/ui5-webcomponents/issues/5310) [#3993](https://github.com/SAP/ui5-webcomponents/issues/3993)
+* **ui5-list:** handle arrow up and down navigation for load more button ([#10251](https://github.com/SAP/ui5-webcomponents/issues/10251)) ([3150793](https://github.com/SAP/ui5-webcomponents/commit/31507939da6051750bcae0a900f6bc1cfce2f926))
+
+
+
+
+
 # [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
 
 

package/cypress/specs/Button.cy.ts

@@ -111,49 +111,6 @@ describe("Button general interaction", () => {
 			.should("not.been.called");
 	});
 
-	it("aria-expanded is properly applied on the button tag", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
-
-		cy.get("[ui5-button]")
-			.as("button");
-
-		cy.get<Button>("@button")
-			.then($el => {
-				$el.get(0).accessibilityAttributes = {
-					expanded: "true",
-				};
-			});
-
-		cy.get("@button")
-			.shadow()
-			.find("button")
-			.should("have.attr", "aria-expanded", "true");
-
-		cy.get<Button>("@button")
-			.then($el => {
-				$el.get(0).accessibilityAttributes = {
-					expanded: "false",
-				};
-			});
-
-		cy.get("@button")
-			.shadow()
-			.find("button")
-			.should("have.attr", "aria-expanded", "false");
-	});
-
-	it("not setting accessible-role on the host keeps the correct role on the button tag", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
-
-		cy.get("[ui5-button]")
-			.shadow()
-			.find("button")
-			.as("button");
-
-		cy.get("@button")
-			.should("have.attr", "role", "button");
-	});
-
 	it("tests button's icon only rendering", () => {
 		cy.mount(html`<ui5-button icon="home"><!----><!----></ui5-button>`);
 
@@ -252,6 +209,87 @@ describe("Button general interaction", () => {
 			.find("[ui5-icon]")
 			.should("have.attr", "mode", "Decorative");
 	});
+});
+
+describe("Accessibility", () => {
+	it("setting tooltip on the host is reflected on the button tag", () => {
+		cy.mount(html`<ui5-button icon="message-information" tooltip="Go home"></ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "title", "Go home");
+	});
+
+	it("tooltip from inner icon is propagated", () => {
+		cy.mount(html`<ui5-button icon="download" accessible-name="Download application"></ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "title", "Download");
+	});
+
+	it("aria-expanded is properly applied on the button tag", () => {
+		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get<Button>("@button")
+			.then($el => {
+				$el.get(0).accessibilityAttributes = {
+					expanded: "true",
+				};
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.should("have.attr", "aria-expanded", "true");
+
+		cy.get<Button>("@button")
+			.then($el => {
+				$el.get(0).accessibilityAttributes = {
+					expanded: "false",
+				};
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.should("have.attr", "aria-expanded", "false");
+	});
+
+	it("setting accessible-role on the host is reflected on the button tag", () => {
+		cy.mount(html`<ui5-button accessible-role="Link"> Navigation Button </ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "role", "link");
+	});
+
+	it("not setting accessible-role on the host keeps the correct role on the button tag", () => {
+		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "role", "button");
+	});
 
 	it("aria-describedby properly applied on the button tag", () => {
 		const hiddenTextTypeId = "ui5-button-hiddenText-type";
@@ -310,8 +348,8 @@ describe("Button general interaction", () => {
 			.should("have.attr", "aria-controls", "registration-dialog");
 	});
 
-	it("setting tooltip on the host is reflected on the button tag", () => {
-		cy.mount(html`<ui5-button icon="message-information" tooltip="Go home"></ui5-button>`);
+	it("setting accessible-description is applied to button tag", () => {
+		cy.mount(html`<ui5-button accessible-description="A long description."></ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -319,30 +357,6 @@ describe("Button general interaction", () => {
 			.as("button");
 
 		cy.get("@button")
-			.should("have.attr", "title", "Go home");
-	});
-
-	it("tooltip from inner icon is propagated", () => {
-		cy.mount(html`<ui5-button icon="download" accessible-name="Download application"></ui5-button>`);
-
-		cy.get("[ui5-button]")
-			.shadow()
-			.find("button")
-			.as("button");
-
-		cy.get("@button")
-			.should("have.attr", "title", "Download");
-	});
-
-	it("setting accessible-role on the host is reflected on the button tag", () => {
-		cy.mount(html`<ui5-button accessible-role="Link"> Navigation Button </ui5-button>`);
-
-		cy.get("[ui5-button]")
-			.shadow()
-			.find("button")
-			.as("button");
-
-		cy.get("@button")
-			.should("have.attr", "role", "link");
+			.should("have.attr", "aria-description", "A long description.");
 	});
 });

package/cypress/specs/FormSupport.cy.ts

@@ -41,6 +41,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -78,6 +81,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -107,6 +113,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -148,6 +157,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -189,6 +201,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -230,6 +245,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -271,6 +289,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -335,6 +356,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -396,6 +420,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -433,6 +460,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -471,6 +501,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -498,6 +531,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -513,6 +549,7 @@ describe("Form support", () => {
 		cy.get("#rb_4")
 			.realClick();
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
 
@@ -538,6 +575,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -610,6 +650,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -655,6 +698,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -683,6 +729,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -712,6 +761,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -750,6 +802,9 @@ describe("Form support", () => {
 	<button type="submit">Submits forms</button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -792,6 +847,9 @@ describe("Form support", () => {
 </form>`);
 		/* eslint-enable no-irregular-whitespace */
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -828,6 +886,9 @@ describe("Form support", () => {
 	<ui5-button id="b1">Does not submit forms</ui5-button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -872,6 +933,9 @@ describe("Form support", () => {
 	<ui5-button id="b2" submits>Submits forms</ui5-button>
 </form>`);
 
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());

package/cypress/specs/Link.cy.ts

@@ -0,0 +1,16 @@
+import { html } from "lit";
+import "../../src/Link.js";
+
+describe("Accessibility", () => {
+	it("setting accessible-description is applied to button tag", () => {
+		cy.mount(html`<ui5-link accessible-description="A long description."></ui5-link>`);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find("a")
+			.as("link");
+
+		cy.get("@link")
+			.should("have.attr", "aria-description", "A long description.");
+	});
+});

package/cypress/specs/List.cy.ts

@@ -31,4 +31,88 @@ describe("List Tests", () => {
 		cy.get("@loadMore")
 			.should("have.been.calledOnce");
 	});
+
+	it("Arrow down and up navigation between last item and growing button", () => {
+		cy.mount(html`
+		<ui5-list id="infiniteScrollEx2" growing="Button">
+			<ui5-li>Laptop Lenovo</ui5-li>
+			<ui5-li>IPhone 3</ui5-li>
+			<ui5-li>HP Monitor 24</ui5-li>
+			<ui5-li id="lastItem">Last Item</ui5-li>
+		</ui5-list>
+		`);
+
+		cy.get("#lastItem")
+			.shadow()
+			.find("li[role='listitem']")
+			.invoke("attr", "tabindex", "0")
+			.focus();
+
+		cy.get("#infiniteScrollEx2")
+			.realPress("ArrowDown");
+
+		cy.get("#infiniteScrollEx2")
+			.shadow()
+			.find("[id$=\"growing-btn\"]")
+			.should("be.focused");
+
+		cy.get("#infiniteScrollEx2")
+			.realPress("ArrowUp");
+
+		cy.get("#lastItem")
+			.should("be.focused");
+	});
+
+	it("Home key on growing button moves focus to first item", () => {
+		cy.mount(html`
+		<ui5-list id="infiniteScrollEx2" growing="Button">
+			<ui5-li id="firstItem">Laptop Lenovo</ui5-li>
+			<ui5-li>IPhone 3</ui5-li>
+			<ui5-li>HP Monitor 24</ui5-li>
+			<ui5-li id="lastItem">Last Item</ui5-li>
+		</ui5-list>
+		`);
+
+		cy.get("#infiniteScrollEx2")
+			.shadow()
+			.find("[id$=\"growing-btn\"]")
+			.focus();
+
+		cy.get("#infiniteScrollEx2")
+			.realPress("Home");
+
+		cy.get("#firstItem")
+			.should("be.focused");
+	});
+
+	it("End key navigation moves focus from first item to last item and then to growing button", () => {
+		cy.mount(html`
+		<ui5-list id="infiniteScrollEx2" growing="Button">
+			<ui5-li id="firstItem">Laptop Lenovo</ui5-li>
+			<ui5-li>IPhone 3</ui5-li>
+			<ui5-li>HP Monitor 24</ui5-li>
+			<ui5-li id="lastItem">Last Item</ui5-li>
+		</ui5-list>
+		`);
+
+		cy.get("#firstItem")
+			.shadow()
+			.find("li[role='listitem']")
+			.invoke("attr", "tabindex", "0")
+			.focus();
+
+		cy.get("#infiniteScrollEx2")
+			.realPress("End");
+
+		cy.get("#lastItem")
+			.should("be.focused");
+
+		cy.get("#infiniteScrollEx2")
+			.realPress("End");
+
+		cy.get("#infiniteScrollEx2")
+			.shadow()
+			.find("[id$='growing-btn']")
+			.should("be.focused");
+	});
 });

package/cypress/specs/Menu.cy.ts

@@ -205,6 +205,45 @@ describe("Menu interaction", () => {
 			.should("be.focused");
 	});
 
+	it("Set focus on first item", () => {
+		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		<ui5-menu id="menu" loading loading-delay="100">
+		</ui5-menu>`);
+
+		cy.get("[ui5-menu]")
+			.as("menu").then($menu => {
+				const menu = $menu.get(0) as Menu;
+
+				menu.addEventListener("ui5-before-open", () => {
+					setTimeout(() => {
+						menu.loading = false;
+						menu.loadingDelay = 0;
+
+						const oneNode = document.createElement("ui5-menu-item") as MenuItem;
+						oneNode.text = "Open from Amazon Cloud";
+
+						const twoNode = document.createElement("ui5-menu-item") as MenuItem;
+						twoNode.text = "Open from Google Cloud";
+
+						menu.append(oneNode, twoNode);
+						menu.focus();
+					}, 1000);
+				});
+			});
+
+		cy.get("@menu").ui5MenuOpen({
+			opener: "btnOpen",
+		});
+
+		cy.get("[ui5-menu]")
+			.ui5MenuOpened();
+
+		cy.get("[ui5-menu-item][text='Open from Amazon Cloud']").as("item");
+
+		cy.get("@item")
+			.should("be.focused");
+	});
+
 	describe("Event firing", () => {
 		it("Event firing - 'ui5-item-click' after 'click' on menu item", () => {
 			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>

package/cypress/specs/RatingIndicator.cy.ts

@@ -0,0 +1,39 @@
+import { html } from "lit";
+import "../../src/RatingIndicator.js";
+
+describe("RatingIndicator", () => {
+	describe("Half Icon appearance", () => {
+		it("Half icon should be filled when rating indicator is disabled", () => {
+			const attributeValue = "favorite";
+
+			cy.mount(html`<ui5-rating-indicator value="2.5" disabled></ui5-rating-indicator>`);
+
+			cy.get("[ui5-rating-indicator]")
+				.shadow()
+				.find(".ui5-rating-indicator-item-half [ui5-icon]")
+				.should("have.attr", "name", attributeValue);
+		});
+
+		it("Half icon should be filled when rating indicator is readonly", () => {
+			const attributeValue = "favorite";
+
+			cy.mount(html`<ui5-rating-indicator value="2.5" readonly></ui5-rating-indicator>`);
+
+			cy.get("[ui5-rating-indicator]")
+				.shadow()
+				.find(".ui5-rating-indicator-item-half [ui5-icon]")
+				.should("have.attr", "name", attributeValue);
+		});
+
+		it("Half icon should be border only when rating indicator is regular", () => {
+			const attributeValue = "unfavorite";
+
+			cy.mount(html`<ui5-rating-indicator value="2.5"></ui5-rating-indicator>`);
+
+			cy.get("[ui5-rating-indicator]")
+				.shadow()
+				.find(".ui5-rating-indicator-item-half [ui5-icon]")
+				.should("have.attr", "name", attributeValue);
+		});
+	});
+});