feat(ui5-user-menu): design enhancements (#11124)

---------

Co-authored-by: Adrian Bobev <[email protected]>

Author: dobromiraboycheva

packages/fiori/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,7 +105,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-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);
 	});
 });
@@ -338,7 +338,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 +351,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 +369,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 +390,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 +434,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 +623,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", () => {

packages/fiori/src/UserMenu.ts

@@ -11,6 +11,7 @@ import type { ListItemClickEventDetail } from "@ui5/webcomponents/dist/List.js";
 import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
 import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { PopupScrollEventDetail } from "@ui5/webcomponents/dist/Popup.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import type UserMenuAccount from "./UserMenuAccount.js";
@@ -27,6 +28,9 @@ import {
 	USER_MENU_EDIT_AVATAR_TXT,
 	USER_MENU_EDIT_ACCOUNTS_TXT,
 	USER_MENU_CLOSE_DIALOG_BUTTON,
+	USER_MENU_POPOVER_ACCESSIBLE_ACCOUNT_SELECTED_TXT,
+	USER_MENU_CURRENT_INFORMATION_TXT,
+	USER_MENU_ACTIONS_TXT,
 } from "./generated/i18n/i18n-defaults.js";
 
 type UserMenuItemClickEventDetail = {
@@ -235,6 +239,13 @@ class UserMenu extends UI5Element {
 	@property({ type: Boolean })
 	_manageAccountMovedToHeader = false;
 
+	/**
+	 * @default false
+	 * @private
+	 */
+	@property({ type: Boolean })
+	_isScrolled = false;
+
 	/**
 	 * @private
 	 */
@@ -268,7 +279,7 @@ class UserMenu extends UI5Element {
 	}
 
 	onAfterRendering(): void {
-		if (this._isPhone && this._responsivePopover) {
+		if (this._responsivePopover) {
 			const observerOptions = {
 				threshold: [0.15],
 			};
@@ -290,6 +301,10 @@ class UserMenu extends UI5Element {
 		return isPhone();
 	}
 
+	_handleScroll(e: CustomEvent<PopupScrollEventDetail>) {
+		this._isScrolled = e.detail.scrollTop > 0;
+	}
+
 	_handleIntersection(entries: IntersectionObserverEntry[]) {
 		entries.forEach(entry => {
 			if (entry.isIntersecting) {
@@ -396,7 +411,7 @@ class UserMenu extends UI5Element {
 	}
 
 	get _otherAccounts() {
-		return this.accounts.filter(account => account !== this._selectedAccount);
+		return this.accounts;
 	}
 
 	get _manageAccountButtonText() {
@@ -430,6 +445,18 @@ class UserMenu extends UI5Element {
 		return `${UserMenu.i18nBundle.getText(USER_MENU_POPOVER_ACCESSIBLE_NAME)} ${this._selectedAccount.titleText}`;
 	}
 
+	get _ariaLabelledByAccountInformationText() {
+		return UserMenu.i18nBundle.getText(USER_MENU_CURRENT_INFORMATION_TXT);
+	}
+
+	get _ariaLabelledByActions() {
+		return UserMenu.i18nBundle.getText(USER_MENU_ACTIONS_TXT);
+	}
+
+	getAccountDescriptionText(account: UserMenuAccount) {
+		return `${account.subtitleText} ${account.description} ${account.selected ? UserMenu.i18nBundle.getText(USER_MENU_POPOVER_ACCESSIBLE_ACCOUNT_SELECTED_TXT) : ""}`;
+	}
+
 	getAccountByRefId(refId: string) {
 		return this.accounts.find(account => account._id === refId)!;
 	}

packages/fiori/src/UserMenuAccount.ts

@@ -74,6 +74,15 @@ class UserMenuAccount extends UI5Element {
 	@property({ type: Boolean })
 	selected = false;
 
+	/**
+	 * Indicates whether a loading indicator should be shown.
+	 * @default false
+	 * @public
+	 * @since 2.9.0
+	 */
+	@property({ type: Boolean })
+	loading = false;
+
 	get _initials() {
 		return this.avatarInitials || "undefined";
 	}