@ui5/webcomponents 2.8.0-rc.3 → 2.8.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.8.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.3...v2.8.0) (2025-03-04)
+
+
+### Bug Fixes
+
+* **ui5-avatar-group:** fixed unnecessary rendering of overflow button ([#10979](https://github.com/SAP/ui5-webcomponents/issues/10979)) ([97ccd05](https://github.com/SAP/ui5-webcomponents/commit/97ccd0581de4ed2ae62648628598e20c47391f46)), closes [#10948](https://github.com/SAP/ui5-webcomponents/issues/10948)
+* **ui5-popover:** ensure that popover is closed when mousedown propagation is stopped ([#10953](https://github.com/SAP/ui5-webcomponents/issues/10953)) ([dbd3ab7](https://github.com/SAP/ui5-webcomponents/commit/dbd3ab7ca3110bd5a90698514b5e032f4f6902f5))
+* **ui5-switch:** reduce touch area according to VD spec ([#10954](https://github.com/SAP/ui5-webcomponents/issues/10954)) ([8cba1cf](https://github.com/SAP/ui5-webcomponents/commit/8cba1cfa1606edb7a595931481c182c97fd804a1))
+* **ui5-token:** align selected token height with non selected ([#10868](https://github.com/SAP/ui5-webcomponents/issues/10868)) ([16af941](https://github.com/SAP/ui5-webcomponents/commit/16af941257c42d91d8dd098ccd9404d952d47d4d)), closes [#10444](https://github.com/SAP/ui5-webcomponents/issues/10444)
+* **ui5-toolbar:** prevent default dialog announcement ([#10971](https://github.com/SAP/ui5-webcomponents/issues/10971)) ([edd54da](https://github.com/SAP/ui5-webcomponents/commit/edd54da0493022d0367e17b30de7abe702806390)), closes [#10324](https://github.com/SAP/ui5-webcomponents/issues/10324)
+
+
+### Features
+
+* **framework:** add `.currentTarget` to the type of event handler in TSX and UI5CustomEvent ([#10957](https://github.com/SAP/ui5-webcomponents/issues/10957)) ([f56753c](https://github.com/SAP/ui5-webcomponents/commit/f56753c5142d6e817b05d7e33bd160f09c2d5205))
+* **ui5-tabcontainer:** add `noAutoSelection` property ([#10877](https://github.com/SAP/ui5-webcomponents/issues/10877)) ([581a626](https://github.com/SAP/ui5-webcomponents/commit/581a626f37fd8d05195555fae2e1d1b2a7a41498))
+
+
+
+
+
 # [2.8.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.2...v2.8.0-rc.3) (2025-02-27)
 
 

package/cypress/specs/AvatarGroup.cy.tsx

@@ -0,0 +1,36 @@
+import Avatar from "../../src/Avatar.js";
+import AvatarGroup from "../../src/AvatarGroup.js";
+
+describe("Overflow", () => {
+	it("checks if overflow button is hiding properly", () => {
+		cy.mount(<AvatarGroup id="ag" style="width: 100px;">
+			<Avatar initials="II"></Avatar>
+			<Avatar initials="II"></Avatar>
+			<Avatar initials="II"></Avatar>
+		</AvatarGroup>);
+
+		// Store the expected hidden items to compare against
+		const expectedHiddenItems = 0;
+
+		// Check if the aria-label is correctly set
+		cy.get("#ag")
+			.as("ag")
+			.then($el => {
+				$el.get(0).innerHTML = "";
+				return $el;
+			});
+
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
+		cy.get("@ag")
+			.then($el => {
+				const avatar = document.createElement("ui5-avatar");
+				avatar.setAttribute("initials", "II");
+				$el.get(0).appendChild(avatar);
+				const ag = document.querySelector("#ag") as AvatarGroup;
+				return ag._hiddenItems;
+			})
+			.should("equal", expectedHiddenItems);
+	});
+});

package/cypress/specs/Link.cy.tsx

@@ -1,31 +1,216 @@
 import Link from "../../src/Link.js";
 
-describe("Main functionality", () => {
+describe("General API", () => {
+	it("render initially", () => {
+		cy.mount(<Link></Link>);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("exist");
+	});
+
+	it("tests rel attribute", () => {
+		cy.mount(<Link href="https://www.sap.com" target="_blank"></Link>);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "rel", "noreferrer noopener");
+	});
+
+	it("should wrap the text of the link", () => {
+		cy.mount(
+			<>
+				<Link style="width: 100px" id="wrapping-link">Eu enim consectetur do amet elit Lorem ipsum dolor, sit amet consectetur adipisicing elit.</Link>
+				<Link style="width: 100px" id="non-wrapping-link" wrapping-type="None">Eu enim consectetur do amet elit Lorem ipsum dolor, sit amet consectetur adipisicing elit.</Link>
+			</>
+		);
+
+		cy.get("#wrapping-link")
+			.shadow()
+			.find(".ui5-link-root")
+			.should($root => {
+				const clientHeight = $root[0].clientHeight;
+				expect(clientHeight).to.be.greaterThan(16);
+			});
+
+		cy.get("#non-wrapping-link")
+			.shadow()
+			.find(".ui5-link-root")
+			.should($root => {
+				const clientHeight = $root[0].clientHeight;
+				expect(clientHeight).to.be.eq(16);
+			});
+	});
+
 	it("clicking the link works", () => {
-		cy.mount(<Link href="#test">Click me</Link>);
+		cy.mount(<Link href="#testClick">Click me</Link>);
+
+		cy.url()
+			.should("not.include", "#testClick");
+
+		cy.get("[ui5-link]")
+			.realClick();
+
+		cy.url()
+			.should("include", "#testClick");
+	});
+
+	it("should prevent clicking on disabled link", () => {
+		cy.mount(<Link href="#testDisabled" disabled>Click me</Link>);
+
+		cy.url()
+			.should("not.include", "#testDisabled");
+
+		cy.get("[ui5-link]")
+			.realClick();
+
+		cy.url().should("not.include", "#testDisabled");
+	});
 
-		cy.url().should("not.include", "#test");
+	it("disabled link should not be enabled", () => {
+		cy.mount(<Link disabled>Click me</Link>);
 
 		cy.get("[ui5-link]")
 			.shadow()
-			.find("a")
-			.as("link")
+			.find(".ui5-link-root")
+			.should("have.attr", "aria-disabled", "true");
+	});
+
+	it("tests prevent default", () => {
+		cy.mount(<Link href="#testPreventDefault">Click me</Link>);
+
+		cy.url()
+			.should("not.include", "#testPreventDefault");
+
+		cy.get("[ui5-link]")
+			.then($link => {
+				$link.get(0).addEventListener("click", event => {
+					event.preventDefault();
+				});
+			});
+
+		cy.get("[ui5-link]")
 			.realClick();
 
-		cy.url().should("include", "#test");
+		cy.url()
+			.should("not.include", "#testPreventDefault");
 	});
-});
 
-describe("Accessibility", () => {
-	it("setting accessible-description is applied to button tag", () => {
-		cy.mount(<Link accessibleDescription="A long description."></Link>);
+	it("link renders aria-expanded attribute", () => {
+		cy.mount(<Link href="#">Click me</Link>);
 
 		cy.get("[ui5-link]")
 			.shadow()
-			.find("a")
-			.as("link");
+			.find(".ui5-link-root")
+			.as("innerLink");
+
+		cy.get<Link>("[ui5-link]")
+			.then($link => {
+				$link.get(0).accessibilityAttributes = {
+					"expanded": true,
+				};
+			});
 
-		cy.get("@link")
-			.should("have.attr", "aria-description", "A long description.");
+		cy.get("@innerLink")
+			.should("have.attr", "aria-expanded", "true");
+
+		cy.get<Link>("[ui5-link]")
+			.then($link => {
+				$link.get(0).accessibilityAttributes = {
+					"expanded": false,
+				};
+			});
+
+		cy.get("@innerLink")
+			.should("have.attr", "aria-expanded", "false");
+	});
+
+	it("link renders proper aria-haspopup attribute", () => {
+		cy.mount(<Link>Click me</Link>);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.as("innerLink");
+
+		cy.get<Link>("[ui5-link]")
+			.then($link => {
+				$link.get(0).accessibilityAttributes = {
+					"hasPopup": "dialog",
+				};
+			});
+
+		cy.get("@innerLink")
+			.should("have.attr", "aria-haspopup", "dialog");
+	});
+
+	it("setting accessible-name applied on the host element is reflected on the anchor tag", () => {
+		cy.mount(<Link accessible-name="more info" tooltip="my tooltip">Click me</Link>);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "aria-label", "more info");
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "title", "my tooltip");
+	});
+
+	it("passes special keys pressed while item clicked", () => {
+		cy.mount(<Link>Link</Link>);
+
+		cy.get("[ui5-link]")
+			.then($link => {
+				$link[0].addEventListener("click", cy.stub().as("clickHandler"));
+			});
+
+		// CTRL Key
+		cy.get("[ui5-link]")
+			.realClick({ ctrlKey: true });
+
+		cy.get("@clickHandler")
+			.should("be.calledWithMatch", { detail: { ctrlKey: true } });
+
+		// META Key
+		cy.get("[ui5-link]")
+			.realClick({ metaKey: true });
+
+		cy.get("@clickHandler")
+			.should("be.calledWithMatch", { detail: { metaKey: true } });
+
+		// ALT Key
+		cy.get("[ui5-link]")
+			.realClick({ altKey: true });
+
+		cy.get("@clickHandler")
+			.should("be.calledWithMatch", { detail: { altKey: true } });
+
+		// SHIFT Key
+		cy.get("[ui5-link]").realClick({ shiftKey: true });
+
+		cy.get("@clickHandler")
+			.should("be.calledWithMatch", { detail: { shiftKey: true } });
+	});
+
+	it("links have icons", () => {
+		cy.mount(
+			<>
+				<Link id="linkWithIcon" icon="employee">View employee profile</Link>
+				<Link id="linkWithEndIcon" end-icon="cloud">Weather today</Link>
+			</>
+		);
+		cy.get("#linkWithIcon")
+			.shadow()
+			.find("[ui5-icon]")
+			.should("exist");
+
+		cy.get("#linkWithEndIcon")
+			.shadow()
+			.find("[ui5-icon]")
+			.should("exist");
 	});
 });

package/cypress/specs/Popover.cy.tsx

@@ -152,6 +152,31 @@ describe("Popover interaction", () => {
 			// assert
 			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").should("be.visible");
 		});
+
+		it("tests clicking outside the popover when 'mousedown' event propagation is stopped", () => {
+			cy.mount(
+				<>
+					<button id="opener">Open</button>
+					<Popover id="pop" open={true} opener="opener" placement="Bottom">
+						<span>popover content</span>
+					</Popover>
+					<button id="btn">Stops mousedown propagation</button>
+				</>
+			);
+
+			cy.get("#pop").should("be.visible");
+			cy.get("#btn").then(btn => {
+				btn.get(0).addEventListener("mousedown", event => {
+					event.stopPropagation();
+				});
+			});
+
+			// act
+			cy.get("#btn").realMouseDown();
+
+			// assert
+			cy.get("#pop").should("not.be.visible");
+		});
 	});
 });
 

package/cypress/specs/TabContainer.cy.tsx

@@ -0,0 +1,29 @@
+import TabContainer from "../../src/TabContainer.js";
+import Tab from "../../src/Tab.js";
+
+describe("TabContainer general interaction", () => {
+	it("Tests no auto selection", () => {
+		cy.mount(
+			<TabContainer no-auto-selection id="tcNoAuto">
+				<Tab text="Products ID">
+					tab1
+				</Tab>
+				<Tab text="Availability">
+					tab2
+				</Tab>
+				<Tab text="Expiration Date">
+					tab3
+				</Tab>
+			</TabContainer>
+		);
+
+		cy.get("#tcNoAuto")
+			.then(tc => {
+				const tabContainer = tc.get(0) as TabContainer;
+				const allItems = tabContainer.allItems;
+				allItems.forEach(item => {
+					cy.wrap(item).should("have.prop", "selected", false);
+				});
+			});
+	});
+});

package/cypress/specs/Table.cy.tsx

@@ -653,13 +653,13 @@ describe("Table - Navigated Rows", () => {
 			.shadow()
 			.find("#navigated-cell")
 			.should("exist")
-			.should("have.attr", "excluded-from-navigation", "");
+			.should("have.attr", "data-excluded-from-navigation");
 
 		cy.get("#row2")
 			.shadow()
 			.find("#navigated-cell")
 			.should("exist")
-			.should("have.attr", "excluded-from-navigation", "");
+			.should("have.attr", "data-excluded-from-navigation");
 
 		cy.get("#row1")
 			.shadow()

package/cypress/specs/TableDragAndDrop.cy.tsx

@@ -77,7 +77,7 @@ describe("API & Events", () => {
 					<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
 					<TableHeaderCell><span>ColumnB</span></TableHeaderCell>
 				</TableHeaderRow>
-				${Array.from({ length: 10 }).map((_, index) =>
+				{Array.from({ length: 10 }).map((_, index) =>
 					<TableRow rowKey={`${index}`} movable={true}>
 						<TableCell><Label>Cell A</Label></TableCell>
 						<TableCell><Label>Cell B</Label></TableCell>

package/cypress/specs/Toolbar.cy.tsx

@@ -170,3 +170,25 @@ describe("Toolbar general interaction", () => {
 			.should("have.been.calledOnce");
 	});
 });
+
+describe("Accessibility", () => {
+	it("Should apply accessibile-name to the popover", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton text="Button 1"></ToolbarButton>
+				<ToolbarButton text="Button 2"></ToolbarButton>
+				<ToolbarButton text="Button 3"></ToolbarButton>
+				<ToolbarSelect accessible-name="Select">
+					<ToolbarSelectOption>1</ToolbarSelectOption>
+					<ToolbarSelectOption>2</ToolbarSelectOption>
+					<ToolbarSelectOption>3</ToolbarSelectOption>
+				</ToolbarSelect>
+			</Toolbar>
+		);
+
+		cy.get("ui5-toolbar")
+			.shadow()
+			.find(".ui5-overflow-popover")
+			.should("have.attr", "accessible-name", "Available Values");
+	});
+});