chore(ui5-user-menu): acc fixes (#13182)

* chore(user-menu): acc fixes

* chore(user-menu): acc fixes

* chore(user-menu): acc fixes

Fixes:
 - translatable texts are aligned with spec
 - 'undefined' announcment is removed
 - 'Accounts' aria label is now to the list instead of the panel
 - Menu with Settings items now has corect aria label

Author: SvilenDarvenyashki

packages/fiori/src/UserMenu.ts

@@ -475,7 +475,7 @@ class UserMenu extends UI5Element {
 	}
 
 	getAccountDescriptionText(account: UserMenuAccount) {
-		return `${account.subtitleText} ${account.description} ${account.selected ? UserMenu.i18nBundle.getText(USER_MENU_POPOVER_ACCESSIBLE_ACCOUNT_SELECTED_TXT) : ""}`;
+		return `${account.titleText} ${account.subtitleText} ${account.description} ${account.selected ? UserMenu.i18nBundle.getText(USER_MENU_POPOVER_ACCESSIBLE_ACCOUNT_SELECTED_TXT) : ""}`;
 	}
 
 	getAccountByRefId(refId: string) {

packages/fiori/src/UserMenuAccount.ts

@@ -103,7 +103,7 @@ class UserMenuAccount extends UI5Element {
 	loading = false;
 
 	get _initials() {
-		return this.avatarInitials || "undefined";
+		return this.avatarInitials || undefined;
 	}
 }
 

packages/fiori/src/UserMenuTemplate.tsx

@@ -77,6 +77,7 @@ export default function UserMenuTemplate(this: UserMenu) {
 						selectionMode="None"
 						separators="None"
 						accessibleRole="Menu"
+						accessibleName={this._ariaLabelledByActions}
 						onItemClick={this._handleMenuItemClick}
 						onui5-close-menu={this._handleMenuItemClose}
 					>
@@ -103,16 +104,18 @@ function headerContent(this: UserMenu) {
 	return (<>
 		{this._selectedAccount &&
 			<div class="ui5-user-menu-selected-account" aria-label={this._ariaLabelledByAccountInformationText}>
-				<Avatar size="L" onClick={this._handleAvatarClick} initials={this._selectedAccount._initials} colorScheme={this._selectedAccount.avatarColorScheme} fallbackIcon={personPlaceholder} class="ui5-user-menu-selected-account-avatar" interactive>
-					{this._selectedAccount.avatarSrc &&
-						<img src={this._selectedAccount.avatarSrc} title={this.showEditButton ? this._editAvatarTooltip : undefined	}/>
-					}
-					{this.showEditButton &&
-					<Tag slot="badge" wrappingType="None" design="Set1" colorScheme="5" >
-						<Icon slot="icon" name={edit}></Icon>
-					</Tag>
-					}
-				</Avatar>
+				<span title={this.showEditButton ? this._editAvatarTooltip : undefined}>
+					<Avatar size="L" onClick={this._handleAvatarClick} initials={this._selectedAccount._initials} colorScheme={this._selectedAccount.avatarColorScheme} fallbackIcon={personPlaceholder} class="ui5-user-menu-selected-account-avatar" interactive>
+						{this._selectedAccount.avatarSrc &&
+							<img src={this._selectedAccount.avatarSrc}/>
+						}
+						{this.showEditButton &&
+						<Tag slot="badge" wrappingType="None" design="Set1" colorScheme="5" >
+							<Icon slot="icon" name={edit}></Icon>
+						</Tag>
+						}
+					</Avatar>
+				</span>
 				{this._selectedAccount.titleText &&
 					<Text id="selected-account-title" class="ui5-user-menu-selected-account-title">{this._selectedAccount.titleText}</Text>
 				}
@@ -137,7 +140,7 @@ function headerContent(this: UserMenu) {
 
 function otherAccountsContent(this: UserMenu) {
 	return (<>
-		<Panel collapsed={true} class="ui5-user-menu-other-accounts" aria-label={this._otherAccountsButtonText}>
+		<Panel collapsed={true} class="ui5-user-menu-other-accounts">
 			<div slot="header" class="ui5-user-menu-account-header">
 				<Title slot="header" level="H4" wrapping-type="None">{this._otherAccountsButtonText} ({this._otherAccounts.length})</Title>
 				{this.showEditAccounts &&
@@ -155,7 +158,8 @@ function otherAccountsContent(this: UserMenu) {
 
 function otherAccountsList(this: UserMenu) {
 	return (<>
-		<List onItemClick={this._handleAccountSwitch} aria-label={this._ariaLabelledByActions} loadingDelay={0}
+		<List onItemClick={this._handleAccountSwitch} loadingDelay={0}
+			accessibleName={`${this._otherAccountsButtonText} (${this._otherAccounts.length})`}
 			  loading={this._otherAccounts.some(account => account.loading === true)}>
 			{this._otherAccounts.map((account, index) =>
 				<ListItemCustom
@@ -164,7 +168,7 @@ function otherAccountsList(this: UserMenu) {
 						"ariaPosinset": index + 1,
 						"ariaSetsize": this._otherAccounts.length
 					}}
-					aria-label={account.titleText}
+					accessibleName={this.getAccountDescriptionText(account)}
 				>
 					<div class="ui5-user-menu-other-accounts-content">
 						<Avatar slot="image" size="S" initials={account._initials} fallbackIcon={personPlaceholder} colorScheme={account.avatarColorScheme}>

packages/fiori/src/i18n/messagebundle.properties

@@ -575,11 +575,11 @@ USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT=Manage account
 #XTXT: User menu sign out button
 USER_MENU_SIGN_OUT_BUTTON_TXT=Sign Out
 
-#XACT: ARIA User menu edit avatar
-USER_MENU_EDIT_AVATAR_TXT=Edit avatar
+#XACT: ARIA User menu edit profile image
+USER_MENU_EDIT_AVATAR_TXT=Edit Profile Image
 
-#XACT: ARIA edit accounts
-USER_MENU_EDIT_ACCOUNTS_TXT=Edit accounts
+#XACT: ARIA edit account
+USER_MENU_EDIT_ACCOUNTS_TXT=Edit account
 
 #XACT: ARIA information for the user menu popover
 USER_MENU_POPOVER_ACCESSIBLE_NAME=User menu for
@@ -588,7 +588,7 @@ USER_MENU_POPOVER_ACCESSIBLE_NAME=User menu for
 USER_MENU_CLOSE_DIALOG_BUTTON=Decline
 
 #XTXT: ARIA selected account
-USER_MENU_POPOVER_ACCESSIBLE_ACCOUNT_SELECTED_TXT=Selected
+USER_MENU_POPOVER_ACCESSIBLE_ACCOUNT_SELECTED_TXT=selected
 
 #XTXT: ARIA User menu current account information
 USER_MENU_CURRENT_INFORMATION_TXT=Current user information