Merge branch 'main' into user-settings-appearance-view

Author: dobromiraboycheva

packages/fiori/src/UserMenuTemplate.tsx

@@ -29,7 +29,7 @@ export default function UserMenuTemplate(this: UserMenu) {
 			horizontalAlign="End"
 			tabindex={-1}
 			accessibleName={this.accessibleNameText}
-			aria-labelledby={this.accessibleNameText}
+			aria-label={this.accessibleNameText}
 			open={this.open}
 			opener={this.opener}
 			onClose={this._handlePopoverAfterClose}
@@ -94,13 +94,13 @@ export default function UserMenuTemplate(this: UserMenu) {
 function headerContent(this: UserMenu) {
 	return (<>
 		{this._selectedAccount &&
-			<div class="ui5-user-menu-selected-account" aria-labelledby={this._ariaLabelledByAccountInformationText}>
+			<div class="ui5-user-menu-selected-account" aria-label={this._ariaLabelledByAccountInformationText}>
 				<Avatar size="L" onClick={this._handleAvatarClick} initials={this._selectedAccount._initials} fallbackIcon={personPlaceholder} class="ui5-user-menu--selected-account-avatar" interactive>
 					{this._selectedAccount.avatarSrc &&
-						<img src={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" title={this._editAvatarTooltip}>
+					<Tag slot="badge" wrappingType="None" design="Set1" colorScheme="5" >
 						<Icon slot="icon" name={edit}></Icon>
 					</Tag>
 					}
@@ -129,7 +129,7 @@ function headerContent(this: UserMenu) {
 
 function otherAccountsContent(this: UserMenu) {
 	return (<>
-		<Panel collapsed={true} class="ui5-user-menu-other-accounts" aria-labelledby={this._otherAccountsButtonText}>
+		<Panel collapsed={true} class="ui5-user-menu-other-accounts" aria-label={this._otherAccountsButtonText}>
 			<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 &&
@@ -147,15 +147,16 @@ function otherAccountsContent(this: UserMenu) {
 
 function otherAccountsList(this: UserMenu) {
 	return (<>
-		<List onItemClick={this._handleAccountSwitch} aria-labelledby={this._ariaLabelledByActions} loadingDelay={0}
+		<List onItemClick={this._handleAccountSwitch} aria-label={this._ariaLabelledByActions} loadingDelay={0}
 			  loading={this._otherAccounts.some(account => account.loading === true)}>
 			{this._otherAccounts.map((account, index) =>
 				<ListItemCustom
 					ref={this.captureRef.bind(account)}
-					aria-labelledby={account.titleText}
-					aria-possition={index + 1}
-					aria-setsize={this._otherAccounts.length}
-					aria-dectiption={this.getAccountDescriptionText(account)}
+					accessibilityAttributes={{
+						"ariaPosinset": index + 1,
+						"ariaSetsize": this._otherAccounts.length
+					}}
+					aria-label={account.titleText}
 				>
 					<div class="ui5-user-menu-other-accounts-content">
 						<Avatar slot="image" size="S" initials={account._initials} fallbackIcon={personPlaceholder}>