@ui5/webcomponents-fiori 2.9.0-rc.0 → 2.9.0-rc.2

package/cypress/specs/SearchField.cy.tsx

@@ -75,7 +75,6 @@ describe("SearchField general interaction", () => {
 
 			cy.get("@inner-button")
 				.should("have.attr", "title", SEARCH_FIELD_SEARCH_COLLAPSED.defaultText);
-
 			cy.get("@inner-button")
 				.should("have.attr", "aria-label", SEARCH_FIELD_SEARCH_COLLAPSED.defaultText);
 		});
@@ -124,7 +123,6 @@ describe("SearchField general interaction", () => {
 			cy.get("@search-icon")
 				.find("title")
 				.should("contain.text", SEARCH_FIELD_SEARCH_EXPANDED.defaultText);
-
 			cy.get("@search-icon")
 				.should("have.attr", "aria-label", SEARCH_FIELD_SEARCH_EXPANDED.defaultText);
 
@@ -157,7 +155,6 @@ describe("SearchField general interaction", () => {
 			cy.get("@search-icon")
 				.find("title")
 				.should("contain.text", SEARCH_FIELD_SEARCH_ICON.defaultText);
-
 			cy.get("@search-icon")
 				.should("have.attr", "aria-label", SEARCH_FIELD_SEARCH_ICON.defaultText);
 		});
@@ -225,7 +222,6 @@ describe("SearchField general interaction", () => {
 			cy.get("@clear-icon")
 				.find("title")
 				.should("contain.text", SEARCH_FIELD_CLEAR_ICON.defaultText);
-
 			cy.get("@clear-icon")
 				.should("have.attr", "aria-label", SEARCH_FIELD_CLEAR_ICON.defaultText);
 		});

package/cypress/specs/ShellBar.cy.tsx

@@ -1,5 +1,6 @@
 import ShellBar from "../../src/ShellBar.js";
 import ShellBarItem from "../../src/ShellBarItem.js";
+import ShellBarSpacer from "@ui5/webcomponents-fiori/dist/ShellBarSpacer.js";
 import activities from "@ui5/webcomponents-icons/dist/activities.js";
 import navBack from "@ui5/webcomponents-icons/dist/nav-back.js";
 import sysHelp from "@ui5/webcomponents-icons/dist/sys-help.js";
@@ -30,12 +31,12 @@ describe("Responsiveness", () => {
 				<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
 			</Avatar>
 
-			<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"/>
+			<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
 
 			<Button icon={navBack} slot="startButton" id="start-button"></Button>
 
 			<ShellBarItem id="disc" icon={activities} text="Disconnect"></ShellBarItem>
-			<ShellBarItem id="call" icon={sysHelp} text="Incoming Calls"></ShellBarItem>
+			<ShellBarItem id="call" icon={sysHelp} text="Incoming Calls" stable-dom-ref="call"></ShellBarItem>
 
 			<Input placeholder="Instructions" slot="searchField" showSuggestions={true} valueState="Information">
 				<div slot="valueStateMessage">Instructions</div>
@@ -66,7 +67,7 @@ describe("Responsiveness", () => {
 				<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
 			</Avatar>
 
-			<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"/>
+			<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
 
 			<Button icon={navBack} slot="startButton" id="start-button"></Button>
 
@@ -88,7 +89,7 @@ describe("Responsiveness", () => {
 			showNotifications={true}
 			showProductSwitch={true}
 		>
-			<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"/>
+			<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
 		</ShellBar>;
 	}
 	beforeEach(() => {
@@ -101,6 +102,9 @@ describe("Responsiveness", () => {
 		cy.get("#shellbar")
 			.as("shellbar");
 	});
+	afterEach(() => {
+		cy.viewport(1920, 1080);
+	});
 
 	it("tests XL Breakpoint 1920px", () => {
 		cy.viewport(1920, 1080);
@@ -295,4 +299,95 @@ describe("Responsiveness", () => {
 			.find(".ui5-shellbar-overflow-button")
 			.should("be.hidden");
 	});
+
+	it("Test accessibility attributes on custom action buttons", () => {
+		cy.mount(basicTemplate()).as("html");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find<Button>(`[data-ui5-stable="call"]`)
+			.as("call-button")
+			.then($el => {
+				$el.get(0).accessibilityAttributes = { "hasPopup": "dialog", "expanded": "true" };
+			});
+		cy.get("@call-button")
+			.shadow()
+			.find("button")
+			.should("have.attr", "aria-expanded", "true")
+			.should("have.attr", "aria-hasPopup", "dialog");
+	});
+});
+
+describe("Slots", () => {
+	describe("Content slot", () => {
+		it("Test separators visibility", () => {
+			function assertStartSeparatorVisibility(expectedExist: boolean) {
+				cy.get("#shellbar")
+					.shadow()
+					.find(".ui5-shellbar-overflow-container-right-inner > .ui5-shellbar-separator-start")
+					.should(expectedExist ? "exist" : "not.exist");
+			}
+			function assertEndSeparatorVisibility(expectedExist: boolean) {
+				cy.get("#shellbar")
+					.shadow()
+					.find(".ui5-shellbar-overflow-container-right-inner > .ui5-shellbar-separator-end")
+					.should(expectedExist ? "exist" : "not.exist");
+			}
+
+			cy.mount(
+				<ShellBar id="shellbar" primaryTitle="Product Title" showNotifications={true} showProductSwitch={true}>
+					<Button icon={navBack} slot="startButton"></Button>
+					<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
+					<Button slot="content">Start Button 1</Button>
+					<Button slot="content" data-hide-order="1">Start Button 2</Button>
+					<Button slot="content">Start Button 3</Button>
+					<ShellBarSpacer slot="content" />
+					<Button slot="content">End Button 1</Button>
+					<Button slot="content" data-hide-order="1">End Button 2</Button>
+					<Button slot="content">End Button 3</Button>
+				</ShellBar>
+			);
+
+			// both separators should be visible
+			assertStartSeparatorVisibility(true);
+			assertEndSeparatorVisibility(true);
+
+			cy.viewport(420, 1080);
+			// only end separator should be hidden
+			assertStartSeparatorVisibility(true);
+			assertEndSeparatorVisibility(false);
+
+			cy.viewport(320, 1080);
+			// both separators should be hidden
+			assertStartSeparatorVisibility(false);
+			assertEndSeparatorVisibility(false);
+
+			// once items are hidden, both separators should be rendered with the last visible item
+			cy.get("#shellbar")
+				.shadow()
+				.find("div[id='content-2'] > .ui5-shellbar-separator-start")
+				.should("exist");
+
+			cy.get("#shellbar")
+				.shadow()
+				.find("div[id='content-6'] > .ui5-shellbar-separator-end")
+				.should("exist");
+
+			cy.viewport(1920, 1080);
+			// both separators should be visible
+			assertStartSeparatorVisibility(true);
+			assertEndSeparatorVisibility(true);
+
+			// once items are shown, both separators shouldn't be rendered with the last visible item
+			cy.get("#shellbar")
+				.shadow()
+				.find("div[id='content-2'] > .ui5-shellbar-separator-start")
+				.should("not.exist");
+
+			cy.get("#shellbar")
+				.shadow()
+				.find("div[id='content-6'] > .ui5-shellbar-separator-end")
+				.should("not.exist");
+		});
+	});
 });

package/cypress/specs/SideNavigation.cy.tsx

@@ -2,6 +2,7 @@ import SideNavigation from "../../src/SideNavigation.js";
 import SideNavigationItem from "../../src/SideNavigationItem.js";
 import SideNavigationSubItem from "../../src/SideNavigationSubItem.js";
 import group from "@ui5/webcomponents-icons/dist/group.js";
+import { NAVIGATION_MENU_POPOVER_HIDDEN_TEXT } from "../../src/generated/i18n/i18n-defaults.js";
 
 describe("Side Navigation Rendering", () => {
 	it("Tests rendering in collapsed mode", () => {
@@ -65,6 +66,18 @@ describe("Side Navigation Rendering", () => {
 			.find(".ui5-side-navigation-overflow-menu [ui5-navigation-menu-item][text='3.1']")
 			.should("have.attr", "design", "Action");
 	});
+
+	it("Tests accessibility", () => {
+		cy.mount(
+			<SideNavigation id="sideNav" accessible-name="Main">
+			</SideNavigation>
+		);
+
+		cy.get("#sideNav")
+			.shadow()
+			.find(".ui5-sn-root")
+			.should("have.attr", "aria-label", "Main");
+	});
 });
 
 describe("Side Navigation interaction", () => {
@@ -715,6 +728,45 @@ describe("Side Navigation Accessibility", () => {
 			.find(".ui5-sn-item")
 			.should("not.have.attr", "aria-checked");
 	});
+
+	it("Tests accessible-name of overflow menu and sub menu", () => {
+		cy.mount(
+			<SideNavigation id="sideNav" collapsed={true}>
+				<SideNavigationItem text="dummy item"></SideNavigationItem>
+				<SideNavigationItem text="1">
+					<SideNavigationSubItem text="1.1" />
+				</SideNavigationItem>
+			</SideNavigation>
+		);
+
+		cy.get("#sideNav")
+			.invoke("attr", "style", "height: 100px");
+
+		cy.get("#sideNav")
+			.shadow()
+			.find(".ui5-sn-item-overflow")
+			.realClick();
+
+		cy.get("#sideNav")
+			.shadow()
+			.find(".ui5-side-navigation-overflow-menu")
+			.shadow()
+			.find(".ui5-menu-rp")
+			.invoke("attr", "accessible-name-ref")
+			.should("match", /navigationMenuPopoverText$/);
+
+		cy.get("#sideNav")
+			.shadow()
+			.find(".ui5-side-navigation-overflow-menu [ui5-navigation-menu-item][text='1']")
+			.realClick();
+
+		cy.get("#sideNav")
+			.shadow()
+			.find(".ui5-side-navigation-overflow-menu [ui5-navigation-menu-item][text='1']")
+			.shadow()
+			.find(".ui5-menu-rp")
+			.should("have.attr", "accessible-name", NAVIGATION_MENU_POPOVER_HIDDEN_TEXT.defaultText);
+	});
 });
 
 describe("Focusable items", () => {

package/cypress/specs/UserMenu.cy.tsx

@@ -75,7 +75,7 @@ describe("Initial rendering", () => {
 		cy.get("@userMenu").should("exist");
 		cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
 		cy.get("@responsivePopover").should("exist");
-		cy.get("@responsivePopover").find("[ui5-panel]").contains(`${USER_MENU_OTHER_ACCOUNT_BUTTON_TXT.defaultText} (1)`);
+		cy.get("@responsivePopover").find("[ui5-panel]").contains(`${USER_MENU_OTHER_ACCOUNT_BUTTON_TXT.defaultText} (2)`);
 		cy.get("@responsivePopover").find("[ui5-button]").should("have.length", 1);
 	});
 
@@ -105,9 +105,66 @@ describe("Initial rendering", () => {
 		cy.get("@userMenu").should("exist");
 		cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
 		cy.get("@responsivePopover").should("exist");
-		cy.get("@responsivePopover").find(".ui5-pm-add-account-btn").should("exist");
+		cy.get("@responsivePopover").find(".ui5-user-menu-add-account-btn").should("exist");
 		cy.get("@responsivePopover").find("[ui5-button]").should("have.length", 2);
 	});
+
+	it("tests scroll", () => {
+		cy.mount(
+			<>
+				<Button id="openUserMenuBtn">Open User Menu</Button>
+				<UserMenu
+					id="userMenuShellBar"
+					open={true} opener="openUserMenuBtn"
+					showManageAccount={true}
+					showEditAccounts={true}
+				>
+					<UserMenuAccount slot="accounts" titleText="Alain Chevalier 1"></UserMenuAccount>
+					<UserMenuItem text="Setting1" data-id="setting1"></UserMenuItem>
+					<UserMenuItem text="Setting2" data-id="setting2"></UserMenuItem>
+					<UserMenuItem text="Setting3" data-id="setting3"></UserMenuItem>
+					<UserMenuItem text="Setting4" data-id="setting4"></UserMenuItem>
+					<UserMenuItem text="Setting5" data-id="setting5"></UserMenuItem>
+					<UserMenuItem text="Setting6" data-id="setting6"></UserMenuItem>
+					<UserMenuItem text="Setting7" data-id="setting7"></UserMenuItem>
+					<UserMenuItem text="Setting8" data-id="setting8"></UserMenuItem>
+					<UserMenuItem text="Setting9" data-id="setting9"></UserMenuItem>
+					<UserMenuItem text="Setting10" data-id="setting10"></UserMenuItem>
+					<UserMenuItem text="Setting11" data-id="setting11"></UserMenuItem>
+					<UserMenuItem text="Setting12" data-id="setting12"></UserMenuItem>
+					<UserMenuItem text="Setting13" data-id="setting13"></UserMenuItem>
+					<UserMenuItem text="Setting14" data-id="setting14"></UserMenuItem>
+					<UserMenuItem text="Setting15" data-id="setting15"></UserMenuItem>
+					<UserMenuItem text="Setting16" data-id="setting16"></UserMenuItem>
+					<UserMenuItem text="Setting17" data-id="setting17"></UserMenuItem>
+					<UserMenuItem text="Setting18" data-id="setting18"></UserMenuItem>
+					<UserMenuItem text="Setting19" data-id="setting19"></UserMenuItem>
+					<UserMenuItem text="Setting20" data-id="setting20"></UserMenuItem>
+					<UserMenuItem text="Setting21" data-id="setting21"></UserMenuItem>
+					<UserMenuItem text="Setting22" data-id="setting22"></UserMenuItem>
+					<UserMenuItem text="Setting23" data-id="setting23"></UserMenuItem>
+					<UserMenuItem text="Setting24" data-id="setting24"></UserMenuItem>
+					<UserMenuItem text="Setting25" data-id="setting25"></UserMenuItem>
+					<UserMenuItem text="Setting26" data-id="setting26"></UserMenuItem>
+					<UserMenuItem text="Setting27" data-id="setting27"></UserMenuItem>
+					<UserMenuItem text="Setting28" data-id="setting28"></UserMenuItem>
+					<UserMenuItem text="Setting29" data-id="setting29"></UserMenuItem>
+					<UserMenuItem text="Setting30" data-id="setting30"></UserMenuItem>
+					<UserMenuItem text="Setting31" data-id="setting31"></UserMenuItem>
+					<UserMenuItem text="Setting32" data-id="setting32"></UserMenuItem>
+				</UserMenu>
+			</>
+		);
+
+		cy.get("[ui5-user-menu]")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.shadow()
+			.find(`div[part="content"]`)
+			.scrollTo("bottom");
+		cy.get("[ui5-user-menu]").shadow().find("[ui5-bar]").as("headerBar");
+		cy.get("@headerBar").find("[ui5-title]").contains("Alain Chevalier 1");
+	});
 });
 
 describe("Menu configuration", () => {
@@ -338,7 +395,7 @@ describe("Events", () => {
 		cy.get("@clicked").should("have.been.calledOnce");
 	});
 
-	it("tests add-account-click event", () => {
+	it("tests edit-accounts-click event", () => {
 		cy.mount(
 			<>
 				<Button id="openUserMenuBtn">Open User Menu</Button>
@@ -351,7 +408,7 @@ describe("Events", () => {
 		cy.get("[ui5-user-menu]").as("userMenu");
 		cy.get("@userMenu")
 			.shadow()
-			.find(".ui5-pm-add-account-btn")
+			.find(".ui5-user-menu-add-account-btn")
 			.as("addAccountBtn");
 
 		cy.get("@userMenu")
@@ -369,8 +426,8 @@ describe("Events", () => {
 			<>
 				<Button id="openUserMenuBtn">Open User Menu</Button>
 				<UserMenu open={true} opener="openUserMenuBtn" showOtherAccounts={true}>
-					<UserMenuAccount slot="accounts" titleText="Alain Chevalier 1"></UserMenuAccount>
 					<UserMenuAccount slot="accounts" titleText="Alain Chevalier 2"></UserMenuAccount>
+					<UserMenuAccount selected slot="accounts" titleText="Alain Chevalier 1"></UserMenuAccount>
 				</UserMenu>
 			</>
 		);
@@ -390,7 +447,7 @@ describe("Events", () => {
 			.click();
 
 		cy.get("@otherAccounts")
-			.find("[ui5-li-custom]")
+			.find("[ui5-li-custom]").first()
 			.click();
 
 		cy.get("@changedAccount").should("have.been.calledOnce");
@@ -434,7 +491,7 @@ describe("Events", () => {
 		cy.get("@avatar").find("img").as("image");
 		cy.get("@image").should("have.length", 1);
 		cy.get("@image").should("have.attr", "src", "./../../test/pages/img/man_avatar_1.png");
-		cy.get("@avatar").should("have.class", "ui5-pm--selected-account-avatar");
+		cy.get("@avatar").should("have.class", "ui5-user-menu--selected-account-avatar");
 	});
 
 	it("tests item-click event", () => {
@@ -623,7 +680,7 @@ describe("Responsiveness", () => {
 		cy.get("[ui5-user-menu]").as("userMenu");
 		cy.get("@userMenu").should("exist");
 		cy.get("@userMenu").shadow().find("[ui5-bar]").as("headerBar");
-		cy.get("@headerBar").should("have.class", "ui5-pm-phone-header");
+		cy.get("@headerBar").should("have.class", "ui5-user-menu-fixed-header");
 	});
 
 	it("tests scroll on phone", () => {
@@ -668,6 +725,6 @@ describe("Responsiveness", () => {
 			.scrollTo("bottom");
 		cy.get("[ui5-user-menu]").shadow().find("[ui5-bar]").as("headerBar");
 		cy.get("@headerBar").find("[ui5-title]").contains("Alain Chevalier 1");
-		cy.get("@headerBar").find("[ui5-button]").should("have.length", 2);
+		cy.get("@headerBar").find("[ui5-button]").should("have.length", 1);
 	});
 });