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

package/CHANGELOG.md

@@ -3,6 +3,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Bug Fixes
+
+* **ui5-input:** call change before submit event ([#10613](https://github.com/SAP/ui5-webcomponents/issues/10613)) ([3c3d641](https://github.com/SAP/ui5-webcomponents/commit/3c3d6410da70eec6f979c134539a0e2227be997b)), closes [#10534](https://github.com/SAP/ui5-webcomponents/issues/10534)
+* **ui5-list:** improved acc description when groups are available ([#10561](https://github.com/SAP/ui5-webcomponents/issues/10561)) ([a7a981c](https://github.com/SAP/ui5-webcomponents/commit/a7a981c9095737941baa3c4052c4718cc9088713))
+* **ui5-menu:** prevent global line-height inheritance ([#10916](https://github.com/SAP/ui5-webcomponents/issues/10916)) ([f6682b2](https://github.com/SAP/ui5-webcomponents/commit/f6682b2d076df747e74058b0b156b3cf0627952d))
+* **ui5-notification-list:** improve keyboard accessibility for the "More" button ([#10822](https://github.com/SAP/ui5-webcomponents/issues/10822)) ([b659fe2](https://github.com/SAP/ui5-webcomponents/commit/b659fe2faeb42eb052dafcc0c16215a3bf1f1926))
+* **ui5-popover, ui5-dialog:** fix finding keyboard focusable scroll containers ([#10891](https://github.com/SAP/ui5-webcomponents/issues/10891)) ([ed26b90](https://github.com/SAP/ui5-webcomponents/commit/ed26b9051ef02772d748de463b9b3084de12ebe8))
+* **ui5-popover, ui5-dialog:** fix preventDefault for before-open and before-close events ([#10883](https://github.com/SAP/ui5-webcomponents/issues/10883)) ([e32e7ba](https://github.com/SAP/ui5-webcomponents/commit/e32e7ba83e4a950a7ad4745c302cc34b57c4cb8e))
+* **ui5-text:** provide more optimal truncation for single line text ([#10794](https://github.com/SAP/ui5-webcomponents/issues/10794)) ([7e7b8ad](https://github.com/SAP/ui5-webcomponents/commit/7e7b8ad2dfa6bace21310697fac8c87f96689574))
+* **ui5-tokenizer:** fix overflow mechanism ([#10901](https://github.com/SAP/ui5-webcomponents/issues/10901)) ([febd3f9](https://github.com/SAP/ui5-webcomponents/commit/febd3f9f3dbc60e4776f19ee4003c4ec072c28b9))
+
+
+### Features
+
+* **ui5-search-field:** introduce base component ([#10922](https://github.com/SAP/ui5-webcomponents/issues/10922)) ([f4489c0](https://github.com/SAP/ui5-webcomponents/commit/f4489c0cecd8c0f2f7916b39e2183193f171f725))
+* **ui5-select:** introduced tooltip property ([#10944](https://github.com/SAP/ui5-webcomponents/issues/10944)) ([c365aa3](https://github.com/SAP/ui5-webcomponents/commit/c365aa30b5abab1fda5fc109d74ab27a676badae)), closes [#10855](https://github.com/SAP/ui5-webcomponents/issues/10855)
+* **ui5-table:** single and multi selection components added ([#10897](https://github.com/SAP/ui5-webcomponents/issues/10897)) ([f3b069c](https://github.com/SAP/ui5-webcomponents/commit/f3b069ce6931567f54e6671fb133c9a59318500b))
+* update sap/icons to v5.11 & 4.23 ([#10930](https://github.com/SAP/ui5-webcomponents/issues/10930)) ([47b5942](https://github.com/SAP/ui5-webcomponents/commit/47b59428abf9e9dbcfd6556143efe1e1046b4c3d))
+
+
+
+
+
+# [2.8.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.1...v2.8.0-rc.2) (2025-02-20)
+
+
+### Bug Fixes
+
+* **ui5-avatar:** fix acc-name announcement ([#10854](https://github.com/SAP/ui5-webcomponents/issues/10854)) ([cb37653](https://github.com/SAP/ui5-webcomponents/commit/cb37653ae80a82ba0a588d127490798f787705af)), closes [#10461](https://github.com/SAP/ui5-webcomponents/issues/10461)
+* **ui5-checkbox:** ensure consistent focus behavior ([#10639](https://github.com/SAP/ui5-webcomponents/issues/10639)) ([a73c8d8](https://github.com/SAP/ui5-webcomponents/commit/a73c8d814e7769d81ba43d2239f51269a6fe0859))
+* **ui5-list:** add correct focus style and accessibility roles for no-data item ([#10503](https://github.com/SAP/ui5-webcomponents/issues/10503)) ([9a0bc7c](https://github.com/SAP/ui5-webcomponents/commit/9a0bc7c33f3ff104c50e84f7ffecf69f7dfe116a)), closes [#10436](https://github.com/SAP/ui5-webcomponents/issues/10436)
+* **ui5-popover:** don't close the popover if the opener is clicked ([#10780](https://github.com/SAP/ui5-webcomponents/issues/10780)) ([bc9eb08](https://github.com/SAP/ui5-webcomponents/commit/bc9eb0841074918d5c26ee7a37b51f8284ce87ae))
+* **ui5-popover:** popover is opened from header slot ([#10856](https://github.com/SAP/ui5-webcomponents/issues/10856)) ([c224672](https://github.com/SAP/ui5-webcomponents/commit/c22467261d7598fdc080fde214bf737142715865)), closes [#10544](https://github.com/SAP/ui5-webcomponents/issues/10544)
+* **ui5-tag:** fix tag alignment ([#10852](https://github.com/SAP/ui5-webcomponents/issues/10852)) ([ae629dc](https://github.com/SAP/ui5-webcomponents/commit/ae629dce61baa751819e7b968cb4fa779309f4e1)), closes [#10810](https://github.com/SAP/ui5-webcomponents/issues/10810)
+
+
+### Features
+
+* **ui5-table-header-cell:** add popinHidden property ([#10834](https://github.com/SAP/ui5-webcomponents/issues/10834)) ([12e7dcd](https://github.com/SAP/ui5-webcomponents/commit/12e7dcd187f9f94150643bab7cbdc8ad7590337c))
+
+
+
+
+
 # [2.8.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.0...v2.8.0-rc.1) (2025-02-13)
 
 

package/cypress/specs/Avatar.cy.tsx

@@ -1,4 +1,5 @@
 import Avatar from "../../src/Avatar.js";
+import "@ui5/webcomponents-icons/dist/supplier.js";
 
 describe("Accessibility", () => {
 	it("checks if initials of avatar are correctly announced", () => {
@@ -15,4 +16,18 @@ describe("Accessibility", () => {
 			.find(".ui5-avatar-root")
 			.should("have.attr", "aria-label", expectedLabel);
 	});
+
+	it("checks if accessible-name is correctly passed to the icon", () => {
+		const ACCESSIBLE_NAME = "Supplier Icon";
+		const ICON_NAME = "supplier";
+
+		cy.mount(<Avatar id="avatar-with-icon" icon={ICON_NAME} accessible-name={ACCESSIBLE_NAME}></Avatar>);
+
+		cy.get("#avatar-with-icon")
+			.shadow()
+			.find("ui5-icon")
+			.shadow()
+			.find("svg")
+			.should("have.attr", "aria-label", ACCESSIBLE_NAME);
+	});
 });

package/cypress/specs/Dialog.cy.tsx

@@ -42,3 +42,92 @@ describe("Keyboard", () => {
 			.should("be.focused");
 	});
 });
+
+describe("Events", () => {
+	it("before-open", () => {
+		cy.mount(
+			<>
+				<Dialog id="dialogId">
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="first">First group focusable</button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="second">Second group focusable</button>
+					</div>
+				</Dialog>
+			</>
+		);
+
+		cy.get("#dialogId")
+			.should("not.be.visible");
+
+		const preventDefault = (e : Event) => {
+			e.preventDefault();
+		};
+
+		cy.get("#dialogId").then($dialog => {
+			$dialog.get(0).addEventListener("before-open", preventDefault);
+		});
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", true);
+
+		cy.get("#dialogId")
+			.should("not.be.visible");
+
+		cy.get("#dialogId").then($dialog => {
+			$dialog.get(0).removeEventListener("before-open", preventDefault);
+		});
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", true);
+
+		cy.get("#dialogId")
+			.should("be.visible");
+	});
+
+	it("before-close", () => {
+		cy.mount(
+			<>
+				<Dialog id="dialogId">
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="first">First group focusable</button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="second">Second group focusable</button>
+					</div>
+				</Dialog>
+			</>
+		);
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", true);
+
+		cy.get("#dialogId")
+			.should("be.visible");
+
+		const preventDefault = (e : Event) => {
+			e.preventDefault();
+		};
+
+		cy.get("#dialogId").then($dialog => {
+			$dialog.get(0).addEventListener("before-close", preventDefault);
+		});
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", false);
+
+		cy.get("#dialogId")
+			.should("be.visible");
+
+		cy.get("#dialogId").then($dialog => {
+			$dialog.get(0).removeEventListener("before-close", preventDefault);
+		});
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", false);
+
+		cy.get("#dialogId")
+			.should("not.be.visible");
+	});
+});

package/cypress/specs/Input.cy.tsx

@@ -2,6 +2,8 @@ import Input from "../../src/Input.js";
 import SuggestionItem from "../../src/SuggestionItem.js";
 import SuggestionItemCustom from "../../src/SuggestionItemCustom.js";
 import SuggestionItemGroup from "../../src/SuggestionItemGroup.js";
+import Dialog from "../../src/Dialog.js";
+import Button from "../../src/Button.js";
 
 describe("Input Tests", () => {
 	it("tets input event prevention", () => {
@@ -122,9 +124,178 @@ describe("Input Tests", () => {
 			.shadow()
 			.find("[ui5-li-group-header]")
 			.shadow()
-			.find("ul")
+			.find("div")
 			.should("not.have.attr", "tabindex", "0");
 	});
+
+	it("tests submit and change event order", () => {
+		cy.mount(
+			<form>
+				<Input></Input>
+			</form>
+		);
+
+		cy.get("form")
+			.as("form");
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		// spy change event
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("change", cy.spy().as("change"));
+			});
+
+		// spy submit event and prevent it
+		cy.get("@form")
+			.then($form => {
+				$form.get(0).addEventListener("submit", e => e.preventDefault());
+				$form.get(0).addEventListener("submit", cy.spy().as("submit"));
+			});
+
+		// check if submit is triggered after change
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.type("test{enter}");
+
+		cy.get("@change").should("have.been.calledBefore", cy.get("@submit"));
+		cy.get("@submit").should("have.been.calledOnce");
+		cy.get("@change").should("have.been.calledOnce");
+	});
+
+	it("tests if pressing enter twice fires submit 2 times and change once", () => {
+		cy.mount(
+			<form>
+				<Input></Input>
+			</form>
+		);
+
+		cy.get("form")
+			.as("form");
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		// spy change event
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("change", cy.spy().as("change"));
+			});
+
+		// spy submit event and prevent it
+		cy.get("@form")
+			.then($form => {
+				$form.get(0).addEventListener("submit", e => e.preventDefault());
+				$form.get(0).addEventListener("submit", cy.spy().as("submit"));
+			});
+
+		// check if submit is triggered after change
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.type("test{enter}{enter}");
+
+		cy.get("@change").should("have.been.calledBefore", cy.get("@submit"));
+		cy.get("@submit").should("have.been.calledTwice");
+		cy.get("@change").should("have.been.calledOnce");
+	});
+
+	it("tests if submit is fired in case of autocomplete", () => {
+		cy.mount(
+			<form>
+				<Input showSuggestions={true}>
+					<SuggestionItem text="Hello"></SuggestionItem>
+				</Input>
+			</form>
+		);
+
+		cy.get("form")
+			.as("form");
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		// spy change event
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("change", cy.spy().as("change"));
+			});
+
+		// spy submit event and prevent it
+		cy.get("@form")
+			.then($form => {
+				$form.get(0).addEventListener("submit", e => e.preventDefault());
+				$form.get(0).addEventListener("submit", cy.spy().as("submit"));
+			});
+
+		// checks when the submit is triggered
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.as("inner");
+
+		cy.get("@inner").realClick();
+		cy.get("@inner").type("H{enter}");
+
+		cy.get("@submit").should("have.not.been.called");
+		cy.get("@change").should("have.been.calledOnce");
+
+		cy.get("@inner").realPress("Enter");
+
+		cy.get("@submit").should("have.been.calledOnce");
+		cy.get("@change").should("have.been.calledOnce");
+	});
+
+	it("tests if submit event is fired upon item selection", () => {
+		cy.mount(
+			<form>
+				<Input showSuggestions={true}>
+					<SuggestionItem text="Hello"></SuggestionItem>
+				</Input>
+			</form>
+		);
+
+		cy.get("form")
+			.as("form");
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		// spy change event
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("change", cy.spy().as("change"));
+			});
+
+		// spy submit event and prevent it
+		cy.get("@form")
+			.then($form => {
+				$form.get(0).addEventListener("submit", e => e.preventDefault());
+				$form.get(0).addEventListener("submit", cy.spy().as("submit"));
+			});
+
+		// checks when the submit is triggered
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.as("inner");
+
+		cy.get("@inner").realClick();
+		cy.get("@inner").type("H{downArrow}{enter}");
+
+		cy.get("@submit").should("have.not.been.called");
+		cy.get("@change").should("have.been.calledOnce");
+
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.type("{enter}");
+
+		cy.get("@submit").should("have.been.calledOnce");
+		cy.get("@change").should("have.been.calledOnce");
+	});
 });
 
 describe("Input general interaction", () => {
@@ -534,4 +705,62 @@ describe("Change event behavior when selecting the same suggestion item", () =>
 			expect(changeCount).to.equal(1);
 		});
 	});
+
+	it("should not close the dialog when item is selected", () => {
+		cy.mount(
+			<>
+				<Button>Open</Button>
+				<Dialog>
+					<Input showSuggestions={true}>
+						<SuggestionItem text="First item"></SuggestionItem>
+						<SuggestionItem text="Second item"></SuggestionItem>
+					</Input>
+				</Dialog>
+			</>
+		);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("[ui5-dialog]")
+			.as("dialog");
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		cy.get("@button")
+			.then($btn => {
+				$btn[0].addEventListener("click", () => {
+					cy.get("@dialog").then($dialog => {
+						$dialog[0].setAttribute("open", "");
+					});
+				});
+			});
+
+		cy.get("@dialog")
+			.then($dialog => {
+				$dialog[0].addEventListener("close", () => {
+					$dialog[0].removeAttribute("open");
+				});
+			});
+
+		cy.get("@button")
+			.realClick();
+
+		cy.get("@input")
+			.realClick();
+
+		cy.get("@input")
+			.realType("f");
+
+		cy.get("[ui5-suggestion-item")
+			.eq(0)
+			.as("suggestion-item");
+
+		cy.get("@suggestion-item")
+			.click();
+
+		cy.get("@dialog")
+			.should("have.attr", "open");
+	});
 });

package/cypress/specs/Popover.cy.tsx

@@ -63,3 +63,245 @@ describe("Popover opener", () => {
 		cy.get("#btnClosePopover").realClick();
 	});
 });
+
+describe("Popover interaction", () => {
+	describe("Automatic Closing", () => {
+		it("tests clicking outside the popover", () => {
+			cy.mount(
+				<>
+					<button id="opener">Open</button>
+					<Popover id="pop" open={true} opener="opener">
+						<Button id="btnClosePopover">Close</Button>
+					</Popover>
+				</>
+			);
+
+			cy.get("#pop").should("be.visible");
+
+			// act
+			cy.get("body").realClick();
+
+			// assert
+			cy.get("#pop").should("not.be.visible");
+		});
+
+		it("tests clicking on the opener", () => {
+			cy.mount(
+				<>
+					<button id="opener">Open</button>
+					<Popover id="pop" open={true} opener="opener">
+						<Button id="btnClosePopover">Close</Button>
+					</Popover>
+				</>
+			);
+
+			cy.get("#pop").should("be.visible");
+
+			// act
+			cy.get("#opener").realClick();
+
+			// assert
+			cy.get("#pop").should("be.visible");
+		});
+
+		it("tests clicking on the opener if both the popover and the opener are located in a shadow root", () => {
+			class OpenerShadowRootTest extends HTMLElement {
+				_shadow: ShadowRoot | null = null;
+
+				constructor() {
+					super();
+				}
+
+				connectedCallback() {
+					if (this._shadow) {
+						return;
+					}
+
+					this._shadow = this.attachShadow({ mode: "open" });
+
+					const btn = document.createElement("button");
+					btn.textContent = "Opener in Shadow Root";
+					btn.setAttribute("id", "opener");
+
+					const pop = document.createElement("ui5-popover") as Popover;
+					pop.opener = "opener";
+					pop.open = true;
+
+					this._shadow.appendChild(btn);
+					this._shadow.appendChild(pop);
+				}
+			}
+
+			cy.window().then(win => {
+				win.customElements.define("opener-shadow-root-test", OpenerShadowRootTest);
+			});
+
+			cy.mount(
+				<>
+					{/* @ts-expect-error */}
+					<opener-shadow-root-test id="openerShadowRooTest"></opener-shadow-root-test>
+				</>
+			);
+
+			// assert
+			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").should("be.visible");
+
+			// act
+			cy.get("#openerShadowRooTest").shadow().find("button").realClick();
+
+			// assert
+			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").should("be.visible");
+		});
+	});
+});
+
+describe("Focusing", () => {
+	it("tests no focusable elements, but content is scrolling", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open</Button>
+				<Popover id="popoverId"
+							 style="width: 10rem; height: 10rem;"
+							 opener="btnOpen">
+					<div>
+						Note: The content of the prop will be rendered into a by assigning the
+						respective slot attribute (slot="footer"). Since you can't change the
+						DOM order of slots when declaring them within a prop, it might prove
+						beneficial to manually mount them as part of the component's children,
+						especially when facing problems with the reading order of screen
+						readers. Note: When passing a custom React component to this prop, you
+						have to make sure your component reads the slot prop and appends it to
+						the most outer element of your component. Learn more about it here.
+					</div>
+				</Popover>
+			</>
+		);
+
+		// act
+		cy.get("#popoverId").invoke("prop", "open", "true");
+
+		cy.get("#popoverId")
+			.shadow()
+			.find(".ui5-popup-content")
+			.should("be.focused");
+	});
+
+	it("tests first element is keyboard focusable scroll container", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open</Button>
+				<Popover id="popoverId"
+						 opener="btnOpen">
+					<div id="innerContent" style="width: 10rem; height: 10rem; overflow-y: auto;">
+						Note: The content of the prop will be rendered into a by assigning the
+						respective slot attribute (slot="footer"). Since you can't change the
+						DOM order of slots when declaring them within a prop, it might prove
+						beneficial to manually mount them as part of the component's children,
+						especially when facing problems with the reading order of screen
+						readers. Note: When passing a custom React component to this prop, you
+						have to make sure your component reads the slot prop and appends it to
+						the most outer element of your component. Learn more about it here.
+					</div>
+					<Button>Button</Button>
+				</Popover>
+			</>
+		);
+
+		// act
+		cy.get("#popoverId").invoke("prop", "open", "true");
+
+		cy.get("#innerContent")
+			.should("be.focused");
+	});
+});
+
+describe("Events", () => {
+	it("before-open", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpenPopover">Open</Button>
+				<Popover id="popoverId" opener="btnOpenPopover">
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="first">First group focusable</button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="second">Second group focusable</button>
+					</div>
+				</Popover>
+			</>
+		);
+
+		cy.get("#popoverId")
+			.should("not.be.visible");
+
+		const preventDefault = (e : Event) => {
+			e.preventDefault();
+		};
+
+		cy.get("#popoverId").then($dialog => {
+			$dialog.get(0).addEventListener("before-open", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", true);
+
+		cy.get("#popoverId")
+			.should("not.be.visible");
+
+		cy.get("#popoverId").then($popover => {
+			$popover.get(0).removeEventListener("before-open", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", true);
+
+		cy.get("#popoverId")
+			.should("be.visible");
+	});
+
+	it("before-close", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpenPopover">Open</Button>
+				<Popover id="popoverId" opener="btnOpenPopover">
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="first">First group focusable</button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="second">Second group focusable</button>
+					</div>
+				</Popover>
+			</>
+		);
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", true);
+
+		cy.get("#popoverId")
+			.should("be.visible");
+
+		const preventDefault = (e : Event) => {
+			e.preventDefault();
+		};
+
+		cy.get("#popoverId").then($popover => {
+			$popover.get(0).addEventListener("before-close", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", false);
+
+		cy.get("#popoverId")
+			.should("be.visible");
+
+		cy.get("#popoverId").then($popover => {
+			$popover.get(0).removeEventListener("before-close", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", false);
+
+		cy.get("#popoverId")
+			.should("not.be.visible");
+	});
+});

package/cypress/specs/Select.cy.tsx

@@ -35,6 +35,21 @@ describe("Select - Accessibility", () => {
 			.find("li.ui5-li-root")
 			.should("have.attr", "title", EXPECTED_TOOLTIP);
 	});
+
+	it("setting tooltip on the host is reflected on the select's shadow dom root", () => {
+		cy.mount(<Select tooltip="Go home">
+			<Option value="1">Option 1</Option>
+			<OptionCustom value="2">Option 2</OptionCustom>
+		</Select>);
+
+		cy.get("[ui5-select]")
+			.shadow()
+			.find(".ui5-select-root")
+			.as("select");
+
+		cy.get("@select")
+			.should("have.attr", "title", "Go home");
+	});
 });
 
 describe("Select - Popover", () => {