@ui5/webcomponents-fiori 2.7.0-rc.1 → 2.7.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.7.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.1...v2.7.0-rc.2) (2025-01-30)
+
+
+### Bug Fixes
+
+* **ui5-side-navigation-item:** correct color for actions in overflow menu ([#10678](https://github.com/SAP/ui5-webcomponents/issues/10678)) ([a96d5ff](https://github.com/SAP/ui5-webcomponents/commit/a96d5ff937807c895b8956882c8f4995fcda8aa1))
+* **ui5-side-navigation:** don't toggle expanded state of items in popover ([#10691](https://github.com/SAP/ui5-webcomponents/issues/10691)) ([4c49c96](https://github.com/SAP/ui5-webcomponents/commit/4c49c96317159fbde9a69c09e8454be99a14a8c8))
+* **ui5-timeline-item:** correct wrapping on long text ([#10483](https://github.com/SAP/ui5-webcomponents/issues/10483)) ([bf4c816](https://github.com/SAP/ui5-webcomponents/commit/bf4c816a38d2206b0c472c05846d74c81edc9e6e))
+
+
+### Features
+
+* **ui5-side-navigation:** add actions and unselectable items ([#10482](https://github.com/SAP/ui5-webcomponents/issues/10482)) ([9fb9bae](https://github.com/SAP/ui5-webcomponents/commit/9fb9bae3ce086320aed83117aa8641fc06ad5587))
+* **ui5-timeline:** introduce "growing" property ([#10470](https://github.com/SAP/ui5-webcomponents/issues/10470)) ([c39c0e8](https://github.com/SAP/ui5-webcomponents/commit/c39c0e845dceadb1383c49ea8d2f60cd98df3fc0))
+* **ui5-user-menu:** introduce `show-edit-button` property ([#10619](https://github.com/SAP/ui5-webcomponents/issues/10619)) ([6adec46](https://github.com/SAP/ui5-webcomponents/commit/6adec468c2edf41df608d26511a9b7cbf58381f7))
+
+
+
+
+
 # [2.7.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.0...v2.7.0-rc.1) (2025-01-23)
 
 

package/cypress/specs/FCL.cy.ts

@@ -15,28 +15,65 @@ describe("Columns resize", () => {
 `);
 	});
 
-	it("toggles _resizing property during separator drag'n'drop", () => {
+	it("separator drag'n'drop", () => {
+		let oldWidthFirstCol: number;
+		let widthAfterMove: number;
+
 		cy.get("[ui5-flexible-column-layout]")
 			.as("fcl");
 
 		cy.get("[ui5-flexible-column-layout]")
 			.shadow()
 			.find(".ui5-fcl-separator-start")
+			.should("be.visible")
 			.as("separator");
 
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--start")
+			.then($el => {
+				oldWidthFirstCol = $el.width()!;
+			});
+
 		// act: mock the user starting to drag the separator
 		cy.get("@separator")
 			.realMouseDown();
 
-		// assert that the property is set
-		cy.get("@fcl")
-			.should("have.prop", "_resizing", true);
+		// act: mock the user starting to drag the separator
+		cy.get("@separator")
+			.realMouseMove(200, 0);
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--start")
+			.should($el => {
+				widthAfterMove = $el.width()!;
+
+				expect(oldWidthFirstCol).to.be.lt(widthAfterMove);
+			});
 
 		// act: mock the user releasing the mouse button; use "then" to ensure it happens after the above check has completed
 		cy.get("@separator")
 			.realMouseUp();
-		// assert that the property is reset
-		cy.get("@fcl")
-			.should("have.prop", "_resizing", false);
+
+		for (let i = 0; i < 5; i++) {
+			cy.get("@separator")
+				.realMouseMove(i * 50, 0);
+		}
+
+		for (let i = 0; i < 5; i++) {
+			cy.get("@separator")
+				.realMouseMove(i * -100, 0);
+		}
+
+		cy.get("@separator")
+			.realMouseMove(-400, 0);
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--start")
+			.should($el => {
+				expect(widthAfterMove).to.be.equal($el.width()!);
+			});
 	});
 });

package/cypress/specs/ShellBar.cy.ts

@@ -8,7 +8,6 @@ import "@ui5/webcomponents/dist/Switch.js";
 import "@ui5/webcomponents/dist/Tag.js";
 import "@ui5/webcomponents/dist/Avatar.js";
 import "@ui5/webcomponents/dist/Input.js";
-import "@ui5/webcomponents/dist/features/InputSuggestions.js";
 import "@ui5/webcomponents/dist/SuggestionItem.js";
 import "@ui5/webcomponents/dist/SuggestionItemCustom.js";
 import "@ui5/webcomponents/dist/SuggestionItemGroup.js";

package/cypress/specs/SideNavigation.cy.ts

@@ -3,36 +3,533 @@ import "../../src/SideNavigation.js";
 import "../../src/SideNavigationItem.js";
 import "../../src/SideNavigationSubItem.js";
 
-const sample = html` <ui5-side-navigation>
-	<ui5-side-navigation-item
-		id="item1"
-		text="Home"
-		icon="home"
-		tooltip="Home tooltip"
-	></ui5-side-navigation-item>
-	<ui5-side-navigation-item id="item2" text="People" icon="group">
-		<ui5-side-navigation-sub-item
-			id="item21"
-			text="From My Team"
-			icon="employee-approvals"
-			tooltip="From My Team tooltip"
-		></ui5-side-navigation-sub-item>
-		<ui5-side-navigation-sub-item
-			id="item22"
-			text="From Other Teams"
-			icon="employee-rejections"
-		></ui5-side-navigation-sub-item>
-	</ui5-side-navigation-item>
-</ui5-side-navigation>`;
+describe("Side Navigation Rendering", () => {
+	it("Tests rendering in collapsed mode", () => {
+		cy.mount(html`
+			<ui5-side-navigation id="sideNav" collapsed>
+				<ui5-side-navigation-item text="1" id="parentItem">
+					<ui5-side-navigation-sub-item text="1.1"></ui5-side-navigation-sub-item>
+					<ui5-side-navigation-sub-item text="1.2" design="Action"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+				<ui5-side-navigation-item text="2" id="parentItem2" design="Action">
+					<ui5-side-navigation-sub-item text="2.1"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+			</ui5-side-navigation>
+		`);
+
+		cy.get("#parentItem").realClick();
+		cy.get("#sideNav")
+			.shadow()
+			.find("[ui5-responsive-popover] [ui5-side-navigation-sub-item][text='1.2']")
+			.should("have.attr", "design", "Action");
+
+		cy.get("#parentItem2").realClick();
+		cy.get("#sideNav")
+			.shadow()
+			.find("[ui5-responsive-popover] [ui5-side-navigation-item][text='2']")
+			.should("have.attr", "design", "Action");
+	});
+
+	it("Tests rendering of overflow items", () => {
+		cy.mount(html`
+			<ui5-side-navigation id="sideNav" collapsed>
+				<ui5-side-navigation-item text="dummy item"></ui5-side-navigation-item>
+				<ui5-side-navigation-item text="1" design="Action"></ui5-side-navigation-item>
+				<ui5-side-navigation-item text="2" href="https://sap.com" target="_blank" design="Action"></ui5-side-navigation-item>
+				<ui5-side-navigation-item text="3">
+					<ui5-side-navigation-sub-item text="3.1" design="Action"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+			</ui5-side-navigation>
+		`);
+
+		cy.get("#sideNav")
+			.invoke("attr", "style", "height: 100px");
+
+		cy.get("#sideNav")
+			.shadow()
+			.find(".ui5-sn-item-overflow:not(.ui5-sn-item-hidden)")
+			.realClick();
+
+		cy.get("#sideNav")
+			.shadow()
+			.find(".ui5-side-navigation-overflow-menu [ui5-navigation-menu-item][text='1']")
+			.should("have.attr", "design", "Action");
+
+		cy.get("#sideNav")
+			.shadow()
+			.find(".ui5-side-navigation-overflow-menu [ui5-navigation-menu-item][text='2']")
+			.should("have.attr", "design", "Action");
+
+		cy.get("#sideNav")
+			.shadow()
+			.find(".ui5-side-navigation-overflow-menu [ui5-navigation-menu-item][text='3.1']")
+			.should("have.attr", "design", "Action");
+	});
+});
 
 describe("Side Navigation interaction", () => {
-	it("Tests that expand works", () => {
-		cy.mount(sample);
+	it("Tests expanding and collapsing of items", () => {
+		cy.mount(html`
+			<ui5-side-navigation>
+				<ui5-side-navigation-item id="item1" text="1" icon="group">
+					<ui5-side-navigation-sub-item text="1.1"></ui5-side-navigation-sub-item>
+					<ui5-side-navigation-sub-item text="1.2"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+			</ui5-side-navigation>
+		`);
+
+		// act
+		cy.get("#item1").shadow().find(".ui5-sn-item-toggle-icon").realClick();
+
+		// assert
+		cy.get("#item1").should("have.attr", "expanded");
 
 		// act
-		cy.get("#item2").shadow().find(".ui5-sn-item-toggle-icon").realClick();
+		cy.get("#item1").shadow().find(".ui5-sn-item-toggle-icon").realClick();
+
+		// assert
+		cy.get("#item1").should("not.have.attr", "expanded");
+	});
+
+	it("Tests expanding and collapsing of unselectable items", () => {
+		cy.mount(html`
+			<ui5-side-navigation>
+				<ui5-side-navigation-item id="item1" text="1" unselectable>
+					<ui5-side-navigation-sub-item text="2"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+			</ui5-side-navigation>
+		`);
+
+		// act
+		cy.get("#item1").shadow().find(".ui5-sn-item-toggle-icon").realClick();
+
+		// assert
+		cy.get("#item1").should("have.attr", "expanded");
+
+		// act
+		cy.get("#item1").shadow().find(".ui5-sn-item-toggle-icon").realClick();
+
+		// assert
+		cy.get("#item1").should("not.have.attr", "expanded");
+
+		// act
+		cy.get("#item1").shadow().find(".ui5-sn-item-text").realClick();
+
+		// assert
+		cy.get("#item1").should("have.attr", "expanded");
+
+		// act
+		cy.get("#item1").shadow().find(".ui5-sn-item-text").realClick();
+
+		// assert
+		cy.get("#item1").should("not.have.attr", "expanded");
+	});
+
+	it("Tests expanding and collapsing of unselectable items with Space and Enter", () => {
+		cy.mount(html`
+			<ui5-side-navigation>
+				<ui5-side-navigation-item id="focusStart" text="focus start"></ui5-side-navigation-item>
+				<ui5-side-navigation-item id="unselectableItem" text="1" unselectable>
+					<ui5-side-navigation-sub-item text="1.2"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+			</ui5-side-navigation>
+		`);
+
+		// act
+		cy.get("#focusStart").realClick();
+		cy.realPress("ArrowDown");
+		cy.realPress("Space");
+
+		// assert
+		cy.get("#unselectableItem").should("be.focused").and("have.attr", "expanded");
+
+		// act
+		cy.realPress("Space");
+
+		// assert
+		cy.get("#unselectableItem").should("be.focused").and("not.have.attr", "expanded");
+
+		// act
+		cy.realPress("Enter");
+
+		// assert
+		cy.get("#unselectableItem").should("be.focused").and("have.attr", "expanded");
+
+		// act
+		cy.realPress("Enter");
+
+		// assert
+		cy.get("#unselectableItem").should("be.focused").and("not.have.attr", "expanded");
+	});
+
+	it("Tests expanding and collapsing of unselectable parent item when SideNavigation is collapsed", () => {
+		cy.mount(html`
+			<ui5-side-navigation id="sideNav" collapsed>
+				<ui5-side-navigation-item id="item1" text="1" unselectable>
+					<ui5-side-navigation-sub-item text="1.1"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+			</ui5-side-navigation>
+		`);
+
+		// act
+		cy.get("#item1").realClick();
+
+		// assert
+		cy.get("#sideNav")
+			.shadow()
+			.find("[ui5-responsive-popover] [ui5-side-navigation-item][text='1']")
+			.should("have.attr", "expanded");
 
 		// assert
-		cy.get("#item2").should("have.attr", "expanded");
+		cy.get("#sideNav")
+			.shadow()
+			.find("[ui5-responsive-popover] [ui5-side-navigation-item][text='1']")
+			.realClick();
+
+		// assert
+		cy.get("#sideNav")
+			.shadow()
+			.find("[ui5-responsive-popover] [ui5-side-navigation-item][text='1']")
+			.should("have.attr", "expanded");
+	});
+
+	it("Tests isSelectable", () => {
+		cy.mount(`
+			<ui5-side-navigation>
+				<ui5-side-navigation-item id="item1" text="1"></ui5-side-navigation-item>
+				<ui5-side-navigation-item id="item2" text="2" disabled></ui5-side-navigation-item>
+				<ui5-side-navigation-item id="item3" text="3" design="Action"></ui5-side-navigation-item>
+				<ui5-side-navigation-item id="item4" text="4" href="https://sap.com"></ui5-side-navigation-item>
+				<ui5-side-navigation-item id="item5" text="5" unselectable></ui5-side-navigation-item>
+				<ui5-side-navigation-item>
+					<ui5-side-navigation-sub-item id="item6" text="6"></ui5-side-navigation-sub-item>
+					<ui5-side-navigation-sub-item id="item7" text="7" unselectable></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+			</ui5-side-navigation>
+		`);
+
+		// assert
+		[
+			{ id: "item1", expectedIsSelectable: true },
+			{ id: "item2", expectedIsSelectable: false },
+			{ id: "item3", expectedIsSelectable: true },
+			{ id: "item4", expectedIsSelectable: true },
+			{ id: "item5", expectedIsSelectable: false },
+			{ id: "item6", expectedIsSelectable: true },
+			{ id: "item7", expectedIsSelectable: false },
+		].forEach(({ id, expectedIsSelectable }) => {
+			cy.get(`#${id}`)
+				.invoke("prop", "isSelectable")
+				.should("equal", expectedIsSelectable);
+		});
+	});
+
+	it("Tests 'click' event", () => {
+		cy.mount(html`
+			<ui5-side-navigation id="sideNav">
+				<ui5-side-navigation-item id="item" text="1"></ui5-side-navigation-item>
+				<ui5-side-navigation-item id="unselectableItem" text="2" unselectable></ui5-side-navigation-item>
+				<ui5-side-navigation-item id="parentItem" text="3">
+					<ui5-side-navigation-sub-item text="3.1"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+				<ui5-side-navigation-item text="4" expanded>
+					<ui5-side-navigation-sub-item id="childItem" text="4.1"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+				<ui5-side-navigation-item id="unselectableParentItem" text="5" unselectable>
+					<ui5-side-navigation-sub-item id="text9" text="5.1"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+			</ui5-side-navigation>
+		`);
+
+		[
+			{ element: cy.get("#item"), expectedCallCount: 1 },
+			{ element: cy.get("#unselectableItem"), expectedCallCount: 1 },
+			{ element: cy.get("#parentItem"), expectedCallCount: 1 },
+			{ element: cy.get("#childItem"), expectedCallCount: 1 },
+			{ element: cy.get("#unselectableParentItem"), expectedCallCount: 1 },
+			{ element: cy.get("#unselectableParentItem").shadow().find(".ui5-sn-item-toggle-icon"), expectedCallCount: 0 },
+		].forEach(({ element, expectedCallCount }) => {
+			cy.get("#sideNav")
+				.then(sideNav => {
+					sideNav.get(0).addEventListener("click", cy.stub().as("clickHandler"));
+				});
+			// act
+			element.realClick();
+
+			// assert
+			cy.get("@clickHandler").should("have.callCount", expectedCallCount);
+		});
+	});
+
+	it("Tests 'click' event with Enter and Space", () => {
+		cy.mount(html`
+			<ui5-side-navigation id="sideNav">
+				<ui5-side-navigation-item id="item" text="1"></ui5-side-navigation-item>
+				<ui5-side-navigation-item id="unselectableItem" text="2" unselectable></ui5-side-navigation-item>
+				<ui5-side-navigation-item id="parentItem" text="3">
+					<ui5-side-navigation-sub-item text="3.1"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+				<ui5-side-navigation-item text="4" expanded>
+					<ui5-side-navigation-sub-item id="childItem" text="4.1"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+				<ui5-side-navigation-item id="unselectableParentItem" text="5" unselectable>
+					<ui5-side-navigation-sub-item id="text9" text="5.1"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+			</ui5-side-navigation>
+		`);
+
+		[
+			{ selector: "#item", expectedCallCount: 2 },
+			{ selector: "#unselectableItem", expectedCallCount: 2 },
+			{ selector: "#parentItem", expectedCallCount: 2 },
+			{ selector: "#childItem", expectedCallCount: 2 },
+			{ selector: "#unselectableParentItem", expectedCallCount: 2 },
+		].forEach(({ selector, expectedCallCount }) => {
+			cy.get("#sideNav")
+				.then(sideNav => {
+					sideNav.get(0).addEventListener("click", cy.stub().as("clickHandler"));
+				});
+
+			cy.get(selector)
+				.shadow()
+				.find(".ui5-sn-item")
+				.as("sn-item")
+				.should("have.attr", "tabindex");
+
+			// act
+			cy.get("@sn-item")
+				.focus();
+
+			cy.realPress("Space")
+				.realPress("Enter");
+
+			// assert
+			cy.get("@clickHandler").should("have.callCount", expectedCallCount);
+		});
+	});
+
+	it("Tests 'selection-change' event", () => {
+		cy.mount(html`
+			<ui5-side-navigation id="sideNav">
+				<ui5-side-navigation-item id="item" text="1"></ui5-side-navigation-item>
+				<ui5-side-navigation-item id="unselectableItem" text="2" unselectable></ui5-side-navigation-item>
+				<ui5-side-navigation-item id="parentItem" text="3">
+					<ui5-side-navigation-sub-item text="3.1"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+				<ui5-side-navigation-item text="4" expanded>
+					<ui5-side-navigation-sub-item id="childItem" text="4.1"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+				<ui5-side-navigation-item id="unselectableParentItem" text="5" unselectable>
+					<ui5-side-navigation-sub-item id="text9" text="5.1"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+			</ui5-side-navigation>
+		`);
+
+		[
+			{ element: cy.get("#item"), expectedCallCount: 1 },
+			{ element: cy.get("#unselectableItem"), expectedCallCount: 0 },
+			{ element: cy.get("#parentItem"), expectedCallCount: 1 },
+			{ element: cy.get("#childItem"), expectedCallCount: 1 },
+			{ element: cy.get("#unselectableParentItem"), expectedCallCount: 0 },
+			{ element: cy.get("#unselectableParentItem").shadow().find(".ui5-sn-item-toggle-icon"), expectedCallCount: 0 },
+		].forEach(({ element, expectedCallCount }) => {
+			cy.get("#sideNav")
+				.then(sideNav => {
+					sideNav.get(0).addEventListener("ui5-selection-change", cy.stub().as("selectionChangeHandler"));
+				});
+			// act
+			element.realClick();
+
+			// assert
+			cy.get("@selectionChangeHandler").should("have.callCount", expectedCallCount);
+		});
+	});
+
+	it("Tests 'selection-change' event when SideNavigation is collapsed", () => {
+		cy.mount(html`
+			<ui5-side-navigation id="sideNav" collapsed>
+				<ui5-side-navigation-item text="1"></ui5-side-navigation-item>
+				<ui5-side-navigation-item id="parentItem" text="2">
+					<ui5-side-navigation-sub-item text="2.1"></ui5-side-navigation-sub-item>
+					<ui5-side-navigation-sub-item text="2.2" unselectable></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+			</ui5-side-navigation>
+		`);
+
+		cy.get("#parentItem").realClick();
+		[
+			{
+				element: cy.get("#sideNav").shadow().find("[ui5-responsive-popover] [ui5-side-navigation-item][text='2']").shadow()
+					.find(".ui5-sn-item"),
+				expectedCallCount: 1,
+			},
+			{
+				element: cy.get("#sideNav").shadow().find("[ui5-responsive-popover] [ui5-side-navigation-sub-item][text='2.1']"),
+				expectedCallCount: 1,
+			},
+			{
+				element: cy.get("#sideNav").shadow().find("[ui5-responsive-popover] [ui5-side-navigation-sub-item][text='2.2']"),
+				expectedCallCount: 0,
+			},
+		].forEach(({ element, expectedCallCount }) => {
+			cy.get("#sideNav")
+				.then(sideNav => {
+					sideNav.get(0).addEventListener("ui5-selection-change", cy.stub().as("selectionChangeHandler"));
+				});
+
+			// act
+			cy.get("#parentItem").realClick();
+			element.realClick();
+
+			// assert
+			cy.get("@selectionChangeHandler").should("have.callCount", expectedCallCount);
+		});
+	});
+});
+
+describe("Side Navigation Accessibility", () => {
+	it("SideNavigationItem ariaHasPopup", () => {
+		cy.mount(html`
+			<ui5-side-navigation>
+				<ui5-side-navigation-item id="item1" text="1"></ui5-side-navigation-item>
+				<ui5-side-navigation-item id="item2" text="2" expanded>
+					<ui5-side-navigation-sub-item id="childItem" text="2.1"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+			</ui5-side-navigation>
+		`);
+
+		cy.get("#item1")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("not.have.attr", "aria-haspopup");
+
+		cy.get("#item1")
+			.invoke("prop", "accessibilityAttributes", {
+				hasPopup: "dialog",
+			});
+
+		cy.get("#item1")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("have.attr", "aria-haspopup", "dialog");
+
+		cy.get("#childItem")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("not.have.attr", "aria-haspopup");
+
+		cy.get("#childItem")
+			.invoke("prop", "accessibilityAttributes", {
+				hasPopup: "dialog",
+			});
+
+		cy.get("#childItem")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("have.attr", "aria-haspopup", "dialog");
+	});
+
+	it("SideNavigationItem with sub items ariaHasPopup in collapsed SideNavigation", () => {
+		cy.mount(html`
+			<ui5-side-navigation id="sideNav" collapsed>
+				<ui5-side-navigation-item id="item1" text="1">
+					<ui5-side-navigation-sub-item id="childItem" text="1.1"></ui5-side-navigation-sub-item>
+				</ui5-side-navigation-item>
+			</ui5-side-navigation>
+		`);
+		cy.get("#item1").realClick();
+
+		// assert
+		cy.get("#item1")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("have.attr", "aria-haspopup", "tree");
+
+		cy.get("#sideNav")
+			.shadow()
+			.find("[ui5-responsive-popover] [ui5-side-navigation-item][text='1']")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("not.have.attr", "aria-haspopup");
+
+		cy.get("#sideNav")
+			.shadow()
+			.find("[ui5-responsive-popover] [ui5-side-navigation-sub-item][text='1.1']")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("not.have.attr", "aria-haspopup");
+
+		// act
+		cy.get("#item1")
+			.invoke("prop", "accessibilityAttributes", {
+				hasPopup: "dialog",
+			});
+		cy.get("#childItem")
+			.invoke("prop", "accessibilityAttributes", {
+				hasPopup: "dialog",
+			});
+
+		// reopen the popover
+		cy.get("#item1").realClick().realClick();
+
+		// assert
+		cy.get("#item1")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("have.attr", "aria-haspopup", "tree");
+
+		cy.get("#sideNav")
+			.shadow()
+			.find("[ui5-responsive-popover] [ui5-side-navigation-item][text='1']")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("have.attr", "aria-haspopup", "dialog");
+
+		cy.get("#sideNav")
+			.shadow()
+			.find("[ui5-responsive-popover] [ui5-side-navigation-sub-item][text='1.1']")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("have.attr", "aria-haspopup", "dialog");
+	});
+
+	it("SideNavigationItem aria-role in collapsed SideNavigation", () => {
+		cy.mount(html`
+			<ui5-side-navigation id="sideNav" collapsed>
+				<ui5-side-navigation-item id="item" text="1"></ui5-side-navigation-item>
+				<ui5-side-navigation-item id="unselectableItem" text="2" unselectable></ui5-side-navigation-item>
+			</ui5-side-navigation>
+		`);
+
+		// assert
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("have.attr", "role", "menuitemradio");
+
+		cy.get("#unselectableItem")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("have.attr", "role", "menuitem");
+	});
+
+	it("SideNavigationItem aria-checked in collapsed SideNavigation", () => {
+		cy.mount(html`
+			<ui5-side-navigation id="sideNav" collapsed>
+				<ui5-side-navigation-item id="item" text="1"></ui5-side-navigation-item>
+				<ui5-side-navigation-item id="unselectableItem" text="2" unselectable></ui5-side-navigation-item>
+			</ui5-side-navigation>
+		`);
+
+		// assert
+		cy.get("#item")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("have.attr", "aria-checked");
+
+		cy.get("#unselectableItem")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("not.have.attr", "aria-checked");
 	});
 });