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

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 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)
+
+
+### Bug Fixes
+
+* **ui5-input:** set value after preventDefault of input event ([#10196](https://github.com/SAP/ui5-webcomponents/issues/10196)) ([e2a6c94](https://github.com/SAP/ui5-webcomponents/commit/e2a6c94d6b4d88db61d85313f2776a092152478d)), closes [#9988](https://github.com/SAP/ui5-webcomponents/issues/9988)
+* **ui5-radio-button:** fix aria-disabled and focus of the read-only radio buttons ([#10111](https://github.com/SAP/ui5-webcomponents/issues/10111)) ([3bcfd1d](https://github.com/SAP/ui5-webcomponents/commit/3bcfd1d26b8520b73be336558f590e1b89c4d0c3)), closes [#10025](https://github.com/SAP/ui5-webcomponents/issues/10025)
+* **ui5-tokenizer:** adjust touch area for cozy and compact ([#10215](https://github.com/SAP/ui5-webcomponents/issues/10215)) ([ee90aea](https://github.com/SAP/ui5-webcomponents/commit/ee90aeaae00a3a888a8dafae73cb7dba1bf8e51f))
+
+
+### Features
+
+* **ui5-combobox:** adjust arrow-down behavior ([#10166](https://github.com/SAP/ui5-webcomponents/issues/10166)) ([74616dc](https://github.com/SAP/ui5-webcomponents/commit/74616dc7ea533ecbd18265878c90339e10eb9d1b))
+* **ui5-form:** add new `emptySpan` property ([#10194](https://github.com/SAP/ui5-webcomponents/issues/10194)) ([48b0cc8](https://github.com/SAP/ui5-webcomponents/commit/48b0cc89b36dd859dd07c17021eedf7a99375150)), closes [#9963](https://github.com/SAP/ui5-webcomponents/issues/9963)
+* **ui5-list:** add Home and End key handling for Load More button ([#10206](https://github.com/SAP/ui5-webcomponents/issues/10206)) ([7059e09](https://github.com/SAP/ui5-webcomponents/commit/7059e0987960f62cd5b8740594b907fa98e1f11c))
+
+
+
+
+
 # [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
 
 

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/Form.cy.ts

@@ -8,7 +8,7 @@ import "../../src/Text.js";
 import "../../src/Input.js";
 
 describe("General API", () => {
-	it("tests calculated state of Form with default layout and label-span", () => {
+	it("tests calculated state of Form with default layout, label-span and empty-span", () => {
 		cy.mount(html`<ui5-form class="addressForm" header-text="Default form">
 			<ui5-form-group header-text="Address">
 				<ui5-form-item>
@@ -36,28 +36,18 @@ describe("General API", () => {
 			.as("form");
 
 		cy.get("@form")
-			.should("have.prop", "columnsS", 1);
-
-		cy.get("@form")
-			.should("have.prop", "labelSpanS", 12);
-
-		cy.get("@form")
-			.should("have.prop", "columnsM", 1);
-
-		cy.get("@form")
-			.should("have.prop", "labelSpanM", 4);
-
-		cy.get("@form")
-			.should("have.prop", "columnsL", 2);
-
-		cy.get("@form")
-			.should("have.prop", "labelSpanL", 4);
-
-		cy.get("@form")
-			.should("have.prop", "columnsXl", 3);
-
-		cy.get("@form")
-			.should("have.prop", "labelSpanXl", 4);
+			.should("have.prop", "columnsS", 1)
+			.and("have.prop", "labelSpanS", 12)
+			.and("have.prop", "emptySpanS", 0)
+			.and("have.prop", "columnsM", 1)
+			.and("have.prop", "labelSpanM", 4)
+			.and("have.prop", "emptySpanM", 0)
+			.and("have.prop", "columnsL", 2)
+			.and("have.prop", "labelSpanL", 4)
+			.and("have.prop", "emptySpanL", 0)
+			.and("have.prop", "columnsXl", 3)
+			.and("have.prop", "emptySpanXl", 0)
+			.and("have.prop", "labelSpanXl", 4);
 	});
 
 	it("tests calculated state of Form with layout='S1 M2 L3 XL6' and label-span='S12 M4 L4 XL4'", () => {
@@ -175,6 +165,40 @@ describe("General API", () => {
 			.should("have.prop", "labelSpanXl", 12);
 	});
 
+	it("tests calculated state of Form empty-span='S0 M0 L1 XL1'", () => {
+		cy.mount(html`<ui5-form empty-span="L1 XL1">
+			<ui5-form-group header-text="Address">
+				<ui5-form-item>
+					<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>
+					<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>
+					<ui5-label slot="labelContent">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("@form")
+			.should("have.prop", "emptySpanS", 0)
+			.and("have.prop", "emptySpanM", 0)
+			.and("have.prop", "emptySpanL", 1)
+			.and("have.prop", "emptySpanXl", 1);
+	});
+
 	it("tests calculated state of two FormGroups in layout='S1 M2 L3 XL4'", () => {
 		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">

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/Input.cy.ts

@@ -0,0 +1,32 @@
+import { html } from "lit";
+import "../../src/Input.js";
+import type Input from "../../src/Input.js";
+
+describe("Input Tests", () => {
+	it("tets input event prevention", () => {
+		cy.mount(html`
+			<ui5-input></ui5-input>
+		`);
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("input", e => {
+					e.preventDefault();
+					(e.target as Input).value = "test";
+				});
+			});
+
+		cy.get<Input>("@input")
+			.realClick();
+
+		cy.realPress("a");
+
+		cy.get("@input")
+			.shadow()
+			.find("input")
+			.should("have.value", "test");
+	});
+});

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");
+	});
 });