@ui5/webcomponents 2.10.0-rc.0 → 2.10.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.10.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0-rc.1...v2.10.0-rc.2) (2025-04-24)
+
+
+### Bug Fixes
+
+* **ui5-breadcrumbs:** dropdown arrow focused color fixed ([#11362](https://github.com/SAP/ui5-webcomponents/issues/11362)) ([d07b089](https://github.com/SAP/ui5-webcomponents/commit/d07b0891ef3f3e6c60354e07c9c12433ce1f14d5))
+* **ui5-button:** adjust tooltips display ([#11268](https://github.com/SAP/ui5-webcomponents/issues/11268)) ([9f0d907](https://github.com/SAP/ui5-webcomponents/commit/9f0d907e74a528ffcc6704a99b4d6cead1cb4adf)), closes [#10824](https://github.com/SAP/ui5-webcomponents/issues/10824)
+* **ui5-button:** announce aria description ([#11264](https://github.com/SAP/ui5-webcomponents/issues/11264)) ([f8e77cb](https://github.com/SAP/ui5-webcomponents/commit/f8e77cbf322e3ee75c5db481b2b7fbb17e81a5ea)), closes [#10899](https://github.com/SAP/ui5-webcomponents/issues/10899)
+* **ui5-input:** correct failing test ([#11388](https://github.com/SAP/ui5-webcomponents/issues/11388)) ([ba4da91](https://github.com/SAP/ui5-webcomponents/commit/ba4da91839452e896c4492af7ff61b491d91c73b))
+* **ui5-popover:** fix arrow positioning ([#11275](https://github.com/SAP/ui5-webcomponents/issues/11275)) ([858a870](https://github.com/SAP/ui5-webcomponents/commit/858a8706b065e667a26d7ae9849bd72dd5c04b93))
+* **ui5-table-growing:** prevent focus while scroll to grow ([#11358](https://github.com/SAP/ui5-webcomponents/issues/11358)) ([002f64f](https://github.com/SAP/ui5-webcomponents/commit/002f64f2f61a632428a712bd19a3825e78a16d45))
+* **ui5-table-growing:** remember correct last row with Enter ([#11361](https://github.com/SAP/ui5-webcomponents/issues/11361)) ([297da60](https://github.com/SAP/ui5-webcomponents/commit/297da604132d0e2a39f05c415343b04b8dbcb812))
+* **ui5-table:** fixes noData slot issue ([#11397](https://github.com/SAP/ui5-webcomponents/issues/11397)) ([1dda953](https://github.com/SAP/ui5-webcomponents/commit/1dda953a79a0d404b71e0fba88b6de8478520b03))
+* **ui5-tree:** add event validation to selection handler ([#11364](https://github.com/SAP/ui5-webcomponents/issues/11364)) ([551ef30](https://github.com/SAP/ui5-webcomponents/commit/551ef30de06fb7741533057664c423c658ec4229)), closes [#11352](https://github.com/SAP/ui5-webcomponents/issues/11352)
+
+
+
+
+
+# [2.10.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0-rc.0...v2.10.0-rc.1) (2025-04-17)
+
+
+### Bug Fixes
+
+* **ui5-busy-indicator:** update busy area opacity ([#11237](https://github.com/SAP/ui5-webcomponents/issues/11237)) ([637cdd0](https://github.com/SAP/ui5-webcomponents/commit/637cdd011402f72a730b1cb7e9ce806a26eb2f2f)), closes [#11224](https://github.com/SAP/ui5-webcomponents/issues/11224)
+* **ui5-form:** propagate `itemSpacing` properly ([#11312](https://github.com/SAP/ui5-webcomponents/issues/11312)) ([32b4fb2](https://github.com/SAP/ui5-webcomponents/commit/32b4fb23ff3baab75978b29ae8eb8da6f90c0652)), closes [#11307](https://github.com/SAP/ui5-webcomponents/issues/11307)
+* **ui5-input:** selection-change is now fired when item is reselected ([#11301](https://github.com/SAP/ui5-webcomponents/issues/11301)) ([1d11709](https://github.com/SAP/ui5-webcomponents/commit/1d11709da4daf133ef8547417fdaec5304e0257b))
+* **ui5-table:** stops the propagation of overflow button ([#11270](https://github.com/SAP/ui5-webcomponents/issues/11270)) ([f43b8dc](https://github.com/SAP/ui5-webcomponents/commit/f43b8dc3c53cc4897a0f35667147002b29f66d80)), closes [#11159](https://github.com/SAP/ui5-webcomponents/issues/11159)
+
+
+### Features
+
+* **ui5-li:** add text wrapping support ([#11108](https://github.com/SAP/ui5-webcomponents/issues/11108)) ([22d7d2f](https://github.com/SAP/ui5-webcomponents/commit/22d7d2f8264bcf908279b1feaff0e114f99d350f))
+* **ui5-menu:** introduce HorizontalAlign property ([#11313](https://github.com/SAP/ui5-webcomponents/issues/11313)) ([7a287a1](https://github.com/SAP/ui5-webcomponents/commit/7a287a1098c080c93f409e6685ebfd9f8017ab1e)), closes [#10765](https://github.com/SAP/ui5-webcomponents/issues/10765)
+* **ui5-table:** improve default column widths ([#11078](https://github.com/SAP/ui5-webcomponents/issues/11078)) ([1ec0be6](https://github.com/SAP/ui5-webcomponents/commit/1ec0be669633b2667222385674e6e602e08f580c))
+
+
+
+
+
 # [2.10.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.9.1-rc.0...v2.10.0-rc.0) (2025-04-14)
 
 

package/cypress/specs/Button.cy.tsx

@@ -5,6 +5,10 @@ import ButtonBadge from "../../src/ButtonBadge.js";
 import download from "@ui5/webcomponents-icons/dist/download.js";
 import employee from "@ui5/webcomponents-icons/dist/employee.js";
 
+import {
+	BUTTON_ARIA_TYPE_REJECT,
+} from "../../src/generated/i18n/i18n-defaults.js";
+
 describe("Button general interaction", () => {
 	it("tests button's text rendering", () => {
 		cy.mount(<Button icon={download} design="Negative">Action Bar Button</Button>);
@@ -238,6 +242,13 @@ describe("Accessibility", () => {
 			.should("have.attr", "title", "Download");
 	});
 
+	it("tooltip not displayed when there is a text", () => {
+		cy.mount(<Button icon="home">Action</Button>);
+
+		cy.get("[ui5-button]")	
+			.should("not.have.attr", "title");
+	});
+
 	it("aria-expanded is properly applied on the button tag", () => {
 		cy.mount(<Button icon="home" design="Emphasized">Action Bar Button</Button>);
 
@@ -294,7 +305,6 @@ describe("Accessibility", () => {
 	});
 
 	it("aria-describedby properly applied on the button tag", () => {
-		const hiddenTextTypeId = "ui5-button-hiddenText-type";
 		cy.mount(<Button design="Attention">Content</Button>);
 
 		cy.get("[ui5-button]")
@@ -303,12 +313,19 @@ describe("Accessibility", () => {
 		cy.get("@button")
 			.shadow()
 			.find("button")
-			.should("have.attr", "aria-describedby", hiddenTextTypeId);
+			.should("have.attr", "aria-description", "Warning");
+	});
+
+	it("accessibleDescription in combination with design property applied on the button tag", () => {
+		cy.mount(<Button design="Negative" accessibleDescription="Decline">Content</Button>);
+
+		cy.get("[ui5-button]")
+			.as("button");
 
 		cy.get("@button")
 			.shadow()
-			.find(`span[id="${hiddenTextTypeId}"]`)
-			.should("exist");
+			.find("button")
+			.should("have.attr", "aria-description", `${BUTTON_ARIA_TYPE_REJECT.defaultText} Decline`);
 	});
 
 	it("setting accessible-name-ref on the host is reflected on the button tag", () => {

package/cypress/specs/Carousel.cy.tsx

@@ -1,27 +1,581 @@
+import Button from "../../src/Button.js";
 import Carousel from "../../src/Carousel.js";
-import Text from "../../src/Text.js";
+import Card from "../../src/Card.js";
+import Input from "../../src/Input.js";
+import List from "../../src/List.js";
+import CardHeader from "../../src/CardHeader.js";
+import Icon from "../../src/Icon.js";
+import ListItemGroup from "../../src/ListItemGroup.js";
+import Avatar from "../../src/Avatar.js";
+import ListItemStandard from "../../src/ListItemStandard.js";
 
-describe("Accessibility", () => {
-	it("tests carousel aria roles", () => {
+describe("Carousel general interaction", () => {
+	it("rendering", () => {
 		cy.mount(
-			<Carousel id="carousel">
-				<Text id="text">Test</Text>
-			</Carousel>
-		);
+			<Carousel id="carousel1">
+				<Button>Button 1</Button>
+				<Button>Button 2</Button>
+			</Carousel>);
 
-		cy.get("#carousel")
+		cy.get("#carousel1")
+			.shadow()
+			.find(".ui5-carousel-root")
+			.should("exist");
+
+		cy.get("#carousel1")
+			.shadow()
+			.find(".ui5-carousel-item:nth-child(1)")
+			.should("not.have.class", "ui5-carousel-item--hidden");
+
+		cy.get("#carousel1")
+			.shadow()
+			.find(".ui5-carousel-item:nth-child(2)")
+			.should("have.class", "ui5-carousel-item--hidden");
+	});
+
+	it("Carousel navigates left", () => {
+		cy.mount(
+			<Carousel id="carousel1" cyclic={true}>
+				<Button>Button 1</Button>
+				<Button>Button 2</Button>
+				<Button>Button 3</Button>
+			</Carousel>);
+
+		cy.get("#carousel1")
+			.realHover()
+			.shadow()
+			.find(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
+			.realClick();
+
+		cy.get("#carousel1").should("have.prop", "_selectedIndex", 2);
+	});
+
+	it("Carousel navigates right", () => {
+		cy.mount(
+			<Carousel id="carousel1">
+				<Button>Button 1</Button>
+				<Button>Button 2</Button>
+				<Button>Button 3</Button>
+			</Carousel>);
+
+		cy.get("#carousel1")
+			.realHover()
+			.shadow()
+			.find(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
+			.realClick();
+
+		cy.get("#carousel1").should("have.prop", "_selectedIndex", 1);
+	});
+
+	it("Navigation is rendered for carousel with less than 9 elements", () => {
+		cy.mount(
+			<Carousel id="carousel1">
+				<Button>Button 1</Button>
+				<Button>Button 2</Button>
+				<Button>Button 3</Button>
+			</Carousel>);
+
+		cy.get("#carousel1")
+			.shadow()
+			.find(".ui5-carousel-navigation > div")
+			.should("exist");
+	});
+
+	it("Navigation is rendered for carousel with more than 9 elements", () => {
+		cy.mount(
+			<Carousel id="carousel2">
+				<Button>Button 1 </Button>
+				<Button>Button 2 </Button>
+				<Button>Button 3 </Button>
+				<Button>Button 4 </Button>
+				<Button>Button 5 </Button>
+				<Button>Button 6 </Button>
+				<Button>Button 7 </Button>
+				<Button>Button 8 </Button>
+				<Button>Button 9 </Button>
+			</Carousel>);
+
+		cy.get("#carousel2")
+			.shadow()
+			.find(".ui5-carousel-navigation > .ui5-carousel-navigation-text")
+			.should("exist")
+			.and("have.attr", "dir", "auto");
+	});
+
+	it("Buttons are rendered in the content only when hovering (arrows-placement)", () => {
+		cy.mount(
+			<Carousel id="carousel2">
+				<Button>Button 1 </Button>
+				<Button>Button 2 </Button>
+				<Button>Button 3 </Button>
+				<Button>Button 4 </Button>
+				<Button>Button 5 </Button>
+				<Button>Button 6 </Button>
+				<Button>Button 7 </Button>
+				<Button>Button 8 </Button>
+				<Button>Button 9 </Button>
+			</Carousel>);
+
+		cy.get("#carousel2")
+			.realHover()
+			.shadow()
+			.find(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
+			.should("have.length", 1);
+
+		cy.get("#carousel2")
+			.realHover()
+			.shadow()
+			.find(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
+			.realClick();
+
+		cy.get("#carousel2")
+			.realHover()
+			.shadow()
+			.find(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
+			.should("have.length", 2);
+	});
+
+	it("Buttons are rendered in the navigation without hovering (arrows-placement)", () => {
+		cy.mount(
+			<Carousel id="carousel3" arrowsPlacement="Navigation">
+				<Button>Button 1</Button>
+				<Button>Button 2</Button>
+				<Button>Button 3</Button>
+			</Carousel>);
+
+		cy.get("#carousel3")
+			.shadow()
+			.find(".ui5-carousel-navigation-button[data-ui5-arrow-forward]")
+			.realClick();
+
+		cy.get("#carousel3")
+			.shadow()
+			.find(".ui5-carousel-navigation-wrapper .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
+			.should("have.length", 2)
+	});
+
+	it("ItemsPerPage property is working properly", () => {
+		cy.mount(
+			<Carousel id="carousel4">
+				<span>page 1</span>
+				<span>page 2</span>
+				<span>page 3</span>
+			</Carousel>);
+
+		cy.get("#carousel4")
+			.should("have.prop", "pagesCount", 3)
+	});
+
+	it("Aria attributes are set", () => {
+		const PAGE_INDICATOR_ARIA_LABEL1 = "Item 1 of 5 displayed";
+		const PAGE_INDICATOR_ARIA_LABEL2 = "Item 2 of 5 displayed";
+		const CAROUSEL_ITEM3_POS = "3";
+		const CAROUSEL_ITEM4_POS = "4";
+		const SETSIZE = "8";
+
+		cy.mount(
+			<>
+				<Carousel id="carousel5" itemsPerPage="S1 M4 L4 XL4">
+					<Button>Button 1</Button>
+					<Button>Button 2</Button>
+					<Button>Button 3</Button>
+					<Button>Button 4</Button>
+					<Button>Button 5</Button>
+					<Button>Button 6</Button>
+					<Button>Button 7</Button>
+					<Button>Button 8</Button>
+				</Carousel>
+				<Carousel id="carouselAccName" cyclic={true} accessibleName="Buttons Carousel">
+					<Button>Button 1</Button>
+					<Button>Button 2</Button>
+					<Button>Button 3</Button>
+				</Carousel>
+				<h4 id="manyButtons">Many Buttons Carousel</h4>
+				<Carousel id="carouselAccNameRef" accessibleNameRef="manyButtons">
+					<Button>Button 1</Button>
+					<Button>Button 2</Button>
+					<Button>Button 3</Button>
+					<Button>Button 4</Button>
+					<Button>Button 5</Button>
+					<Button>Button 6</Button>
+					<Button>Button 7</Button>
+					<Button>Button 8</Button>
+					<Button>Button 9</Button>
+				</Carousel>
+			</>);
+
+		cy.get("#carousel5")
+			.shadow()
+			.find(".ui5-carousel-navigation-dot:first-child")
+			.should("have.attr", "aria-label", PAGE_INDICATOR_ARIA_LABEL1);
+
+		cy.get("#carousel5")
+			.shadow()
+			.find(".ui5-carousel-navigation-dot:nth-child(2)")
+			.should("have.attr", "aria-label", PAGE_INDICATOR_ARIA_LABEL2);
+
+		cy.get("#carousel5")
+			.shadow()
+			.find(".ui5-carousel-item:first-child")
+			.should("have.attr", "aria-selected", "true");
+
+		cy.get("#carousel5")
+			.shadow()
+			.find(".ui5-carousel-item:nth-child(3)")
+			.should("have.attr", "aria-posinset", CAROUSEL_ITEM3_POS)
+			.and("have.attr", "aria-setsize", SETSIZE);
+
+		cy.get("#carousel5")
+			.shadow()
+			.find(".ui5-carousel-item:nth-child(4)")
+			.should("have.attr", "aria-posinset", CAROUSEL_ITEM4_POS)
+			.and("have.attr", "aria-setsize", SETSIZE);
+
+		cy.get<Carousel>('#carousel5')
+			.then(($carousel) => {
+				const el = $carousel[0];
+
+				cy.get('#carousel5')
+					.shadow()
+					.find('.ui5-carousel-root')
+					.should('have.attr', 'aria-activedescendant', `${el._id}-carousel-item-1`);
+			});
+
+		cy.get("#carousel5")
+			.shadow()
+			.find(".ui5-carousel-navigation-button:nth-child(2)")
+			.realClick();
+
+		cy.get<Carousel>('#carousel5')
+			.then(($carousel) => {
+				const el = $carousel[0];
+				cy.get('#carousel5')
+					.shadow()
+					.find('.ui5-carousel-root')
+					.should('have.attr', 'aria-activedescendant', `${el._id}-carousel-item-2`);
+			});
+
+		cy.get("#carouselAccName")
+			.shadow()
+			.find(".ui5-carousel-root")
+			.should("have.attr", "aria-label", "Buttons Carousel");
+
+		cy.get("#carouselAccNameRef")
+			.shadow()
+			.find(".ui5-carousel-root")
+			.should("have.attr", "aria-label", "Many Buttons Carousel");
+
+		cy.get("#carousel5")
 			.shadow()
 			.find(".ui5-carousel-root")
 			.should("have.attr", "role", "list");
 
-		cy.get("#carousel")
+		cy.get("#carousel5")
 			.shadow()
 			.find(".ui5-carousel-item")
 			.should("have.attr", "role", "listitem");
 
-		cy.get("#carousel")
+		cy.get("#carousel5")
 			.shadow()
 			.find(".ui5-carousel-root")
 			.should("have.attr", "aria-roledescription", "Carousel");
 	});
-});
+
+	it("all visible elements in the current page have correct tabindex values", () => {
+		cy.mount(
+			<Carousel id="carouselCards" itemsPerPage="S3 M3 L3 XL3">
+				<span>item 1</span>
+				<span>item 2</span>
+				<span>item 3</span>
+			</Carousel>);
+
+		cy.get("#carouselCards")
+			.shadow()
+			.find(".ui5-carousel-item:nth-child(1) slot")
+			.should("have.prop", "tabindex", 0);
+
+		cy.get("#carouselCards")
+			.shadow()
+			.find(".ui5-carousel-item:nth-child(2) slot")
+			.should("have.prop", "tabindex", 0);
+
+		cy.get("#carouselCards")
+			.shadow()
+			.find(".ui5-carousel-item:nth-child(3) slot")
+			.should("have.prop", "tabindex", 0);
+	});
+
+	it("Arrows and Dots not displayed in case of single page", () => {
+		cy.mount(
+			<Carousel id="carousel6">
+				<Button>Button 1</Button>
+			</Carousel>);
+
+		cy.get("#carousel6")
+			.shadow()
+			.find(".ui5-carousel-navigation-wrapper")
+			.should("not.exist");
+
+		cy.get("#carousel6")
+			.shadow()
+			.find(".ui5-carousel-navigation-arrows")
+			.should("not.exist");
+
+		cy.get("#carousel6")
+			.should("have.prop", "pagesCount", 1);
+	});
+
+	it("Event navigate fired when pressing navigation arrows", () => {
+		const navigateEventStub = cy.stub().as("myStub");
+		cy.mount(
+			<Carousel id="carousel8" itemsPerPage="S1 M4 L4 XL4" onNavigate={navigateEventStub}>
+				<Button>Button 1</Button>
+				<Button>Button 2</Button>
+				<Button>Button 3</Button>
+				<Button>Button 4</Button>
+				<Button>Button 5</Button>
+				<Button>Button 6</Button>
+				<Button>Button 7</Button>
+				<Button>Button 8</Button>
+			</Carousel>);
+
+		cy.get("#carousel8")
+			.shadow()
+			.find("ui5-button[data-ui5-arrow-forward]")
+			.should("exist")
+			.realClick();
+		cy.get("@myStub").should("have.been.calledOnce");
+
+		cy.get("#carousel8")
+			.shadow()
+			.find("ui5-button[data-ui5-arrow-forward]")
+			.should("exist")
+			.realClick();
+		cy.get("@myStub").should("have.been.calledTwice");
+
+		cy.get("#carousel8")
+			.shadow()
+			.find("ui5-button[data-ui5-arrow-back]")
+			.should("exist")
+			.realClick();
+		cy.get("@myStub").should("have.been.calledThrice");
+
+		cy.get("#carousel8")
+			.shadow()
+			.find("ui5-button[data-ui5-arrow-back]")
+			.should("exist")
+			.realClick();
+		cy.get("@myStub").should("have.callCount", 4);
+
+		cy.get("#carousel8").realClick();
+		cy.get("#carousel8").realPress("ArrowRight");
+		cy.get("@myStub").should("have.callCount", 5);
+
+		cy.get("#carousel8").realPress("ArrowLeft");
+		cy.get("@myStub").should("have.callCount", 6);
+	});
+
+	it("page-indicator-type property", () => {
+		cy.mount(
+			<Carousel id="carouselNumericPageIndicator" pageIndicatorType="Numeric">
+				<Button>Button 1</Button>
+				<Button>Button 2</Button>
+			</Carousel>);
+
+		cy.get("#carouselNumericPageIndicator")
+			.shadow()
+			.find(".ui5-carousel-navigation .ui5-carousel-navigation-text")
+			.contains("1 of 2");
+	});
+
+	it("hide-page-indicator property", () => {
+		cy.mount(
+			<Carousel id="carouselHiddenPageIndicator" arrowsPlacement="Navigation" hidePageIndicator>
+				<Button>Button 1</Button>
+				<Button>Button 2</Button>
+				<Button>Button 3</Button>
+			</Carousel>);
+
+		cy.get("#carouselHiddenPageIndicator")
+			.shadow()
+			.find(".ui5-carousel-navigation > *")
+			.should('have.length', 0);
+
+	});
+
+	it("navigateTo method and visibleItemsIndices", () => {
+		cy.mount(
+			<Carousel id="carousel9" itemsPerPage="S1 M2 L2 XL2">
+				<Button>Button 1</Button>
+				<Button>Button 2</Button>
+				<Button>Button 3</Button>
+				<Button>Button 4</Button>
+				<Button>Button 5</Button>
+				<Button>Button 6</Button>
+				<Button>Button 7</Button>
+				<Button>Button 8</Button>
+				<Button>Button 9</Button>
+				<Button>Button 10</Button>
+			</Carousel>);
+
+		cy.get("#carousel9")
+			.invoke("prop", "visibleItemsIndices")
+			.should("deep.equal", [0, 1]);
+
+		cy.get<Carousel>("#carousel9").then(($carousel) => {
+			$carousel[0].navigateTo(1);
+		});
+
+		cy.get("#carousel9")
+			.invoke("prop", "visibleItemsIndices")
+			.should("deep.equal", [1, 2]);
+	});
+
+	it("F7 keyboard navigation", () => {
+		cy.mount(
+			<Carousel id="carouselF7" itemsPerPage="S3 M3 L3 XL3">
+				<Card class="myCard">
+					<div>
+						Page 1 <br />
+						<Button>Button 1</Button>
+						<br />
+						<Button id="carouselF7Button">Button 2</Button>
+						<br />
+						<Input></Input>
+					</div>
+				</Card>
+				<Card class="myCard">
+					<div>
+						Page 2 <br />
+						<Button>Button 1</Button>
+						<br />
+						<Button>Button 2</Button>
+						<br />
+						<Input></Input>
+					</div>
+				</Card>
+				<Card class="myCard">
+					<div>
+						Page 3 <br />
+						<Button>Button 1</Button>
+						<br />
+						<Button>Button 2</Button>
+						<br />
+						<Input id="carouselF7Input"></Input>
+					</div>
+				</Card>
+				<Card class="myCard">
+					<div>
+						Page 4 <br />
+						<Button>Button 1</Button>
+						<br />
+						<Button>Button 2</Button>
+						<br />
+						<Input></Input>
+					</div>
+				</Card>
+				<Card class="myCard">
+					<div>
+						Page 5 <br />
+						<Button>Button 1</Button>
+						<br />
+						<Button>Button 2</Button>
+						<br />
+						<Input></Input>
+					</div>
+				</Card>
+				<Card class="myCard">
+					<div>
+						Page 6 <br />
+						<Button>Button 1</Button>
+						<br />
+						<Button>Button 2</Button>
+						<br />
+						<Input></Input>
+					</div>
+				</Card>
+			</Carousel>);
+
+		cy.get(".myCard").should("be.visible");
+
+		cy.get("#carouselF7Button").realClick();
+		cy.get("#carouselF7Button").should('be.focused');
+
+		cy.realPress("F7");
+		cy.focused().should("have.class", "ui5-carousel-root");
+
+		cy.realPress("F7");
+		cy.focused().should("have.class", "ui5-button-root");
+
+		cy.get("#carouselF7Input").realClick();
+		cy.realPress("F7");
+		cy.focused().should("have.class", "ui5-carousel-root");
+
+		cy.realPress("F7");
+		cy.focused().should("have.class", "ui5-input-inner");
+
+		cy.get("#carouselF7Button").realClick();
+		cy.realPress("F7");
+
+		cy.get<Carousel>("#carouselF7").then(($carousel) => {
+			$carousel[0].navigateTo(1);
+		});
+		cy.realPress("F7");
+		cy.focused().should("have.class", "ui5-input-inner");
+	});
+
+	it("Items per page", () => {
+		cy.mount(
+			<Carousel
+				id="itemsPerPage"
+				cyclic
+				itemsPerPage="S1 M2 L3 XL4"
+				arrowsPlacement="Navigation"
+			>
+				<span>item 1</span>
+				<span>item 2</span>
+				<span>item 3</span>
+				<span>item 4</span>
+				<span>item 5</span>
+			</Carousel>);
+
+		cy.viewport(500, 500);
+		cy.get("#itemsPerPage")
+			.shadow()
+			.find(".ui5-carousel-item:nth-child(2)")
+			.should("have.class", "ui5-carousel-item--hidden");
+
+		cy.viewport(1000, 500);
+		cy.get("#itemsPerPage")
+			.shadow()
+			.find(".ui5-carousel-item:nth-child(2)")
+			.should("not.have.class", "ui5-carousel-item--hidden");
+
+		cy.get("#itemsPerPage")
+			.shadow()
+			.find(".ui5-carousel-item:nth-child(3)")
+			.should("have.class", "ui5-carousel-item--hidden");
+
+		cy.viewport(1240, 500);
+		cy.get("#itemsPerPage")
+			.shadow()
+			.find(".ui5-carousel-item:nth-child(3)")
+			.should("not.have.class", "ui5-carousel-item--hidden");
+
+		cy.get("#itemsPerPage")
+			.shadow()
+			.find(".ui5-carousel-item:nth-child(4)")
+			.should("have.class", "ui5-carousel-item--hidden");
+
+		cy.viewport(1540, 500);
+		cy.get("#itemsPerPage")
+			.shadow()
+			.find(".ui5-carousel-item:nth-child(4)")
+			.should("not.have.class", "ui5-carousel-item--hidden");
+
+		cy.get("#itemsPerPage")
+			.shadow()
+			.find(".ui5-carousel-item:nth-child(5)")
+			.should("have.class", "ui5-carousel-item--hidden");
+	});
+});