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

package/src/UserMenuTemplate.tsx

@@ -17,98 +17,62 @@ import userSettings from "@ui5/webcomponents-icons/dist/user-settings.js";
 import log from "@ui5/webcomponents-icons/dist/log.js";
 import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import userEdit from "@ui5/webcomponents-icons/dist/user-edit.js";
+import selectedAccount from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 
 export default function UserMenuTemplate(this: UserMenu) {
 	return (
 		<ResponsivePopover
 			id="user-menu-rp"
-			class="ui5-pm-rp"
-			tabIndex={-1}
+			class="ui5-user-menu-rp"
 			placement="Bottom"
 			verticalAlign="Bottom"
 			horizontalAlign="End"
+			tabindex={-1}
 			accessibleName={this.accessibleNameText}
+			aria-labelledby={this.accessibleNameText}
 			open={this.open}
 			opener={this.opener}
 			onClose={this._handlePopoverAfterClose}
 			onOpen={this._handlePopoverAfterOpen}
+			onScroll={this._handleScroll}
 		>
-			{this._isPhone ?
-				<>
-					<Bar class="ui5-pm-phone-header" slot="header">
-						{this._manageAccountVisibleInHeader &&
-							<Button icon={userSettings} onClick={this._handleManageAccountClick} slot="startContent"></Button>
-						}
+			<>
+				<Bar class={{
+					"ui5-user-menu-fixed-header": true,
+					"ui5-user-menu-rp-scrolled": this._isScrolled || this._titleMovedToHeader
+				}} slot="header">
+					{this._titleMovedToHeader &&
+						<Title
+							level="H1"
+							wrappingType="None"
+						>
+							{this._selectedAccount.titleText}
+						</Title>
+					}
 
-						{this._titleMovedToHeader &&
-							<Title
-								level="H1"
-								wrappingType="None"
-							>
-								{this._selectedAccount.titleText}
-							</Title>
-						}
+					{this._isPhone && <Button
+						icon={decline}
+						design="Transparent"
+						accessibleName={this._closeDialogAriaLabel}
+						onClick={this._closeUserMenu}
+						slot="endContent"
+					 />}
+				</Bar>
 
-						<Button
-							icon={decline}
-							design="Transparent"
-							accessibleName={this._closeDialogAriaLabel}
-							onClick={this._closeUserMenu}
-							slot="endContent"
-						>
-						</Button>
-					</Bar>
-					<div class="ui5-pm-header">
-						{headerContent.call(this)}
-					</div>
-				</>
-				:
-				<div class="ui5-pm-header" slot="header">
+				<div class="ui5-user-menu-header">
 					{headerContent.call(this)}
 				</div>
-			}
+			</>
 
 			{this.showOtherAccounts &&
-					<Panel collapsed={true} class="ui5-pm-other-accounts">
-						<div slot="header" class="ui5-user-menu-account-header">
-							<Title slot="header" level="H4">{this._otherAccountsButtonText} ({this._otherAccounts.length})</Title>
-							{this.showEditAccounts &&
-								<Button slot="header" class="ui5-pm-add-account-btn" design="Transparent" icon={userEdit} onClick={this._handleEditAccountsClick} tooltip={this._editAccountsTooltip}/>
-							}
-						</div>
-						{this._otherAccounts.length > 0 &&
-							<List onItemClick={this._handleAccountSwitch}>
-								{this._otherAccounts.map(account =>
-									<ListItemCustom
-										ref={this.captureRef.bind(account)}
-									>
-										<div class="ui5-pm-other-accounts-content">
-											<Avatar slot="image" size="S" initials={account._initials} fallbackIcon={personPlaceholder}>
-												{account.avatarSrc &&
-													<img src={account.avatarSrc}/>
-												}
-											</Avatar>
-											<div>
-												{account.titleText &&
-												<Title>{account.titleText}</Title>
-												}
-												{account.subtitleText &&
-												<Label>{account.subtitleText}</Label>
-												}
-												{account.description &&
-												<Label>{account.description}</Label>
-												}
-											</div>
-										</div>
-									</ListItemCustom>
-								)}
-							</List>
-						}
-					</Panel>
+				<>
+					{otherAccountsContent.call(this)}
+				</>
 			}
 
 			{this.menuItems.length > 0 &&
 					<List
+						id="ui5-user-menu-list"
 						class="ui5-user-menu-list"
 						selectionMode="None"
 						separators="None"
@@ -120,8 +84,8 @@ export default function UserMenuTemplate(this: UserMenu) {
 					</List>
 			}
 
-			<div slot="footer" class="ui5-pm-footer">
-				<Button class="ui5-pm-sign-out-btn" design="Transparent" icon={log} onClick={this._handleSignOutClick}>{this._signOutButtonText}</Button>
+			<div slot="footer" class="ui5-user-menu-footer">
+				<Button class="ui5-user-menu-sign-out-btn" design="Transparent" icon={log} onClick={this._handleSignOutClick}>{this._signOutButtonText}</Button>
 			</div>
 		</ResponsivePopover>
 	);
@@ -130,8 +94,8 @@ export default function UserMenuTemplate(this: UserMenu) {
 function headerContent(this: UserMenu) {
 	return (<>
 		{this._selectedAccount &&
-			<div class="ui5-pm-selected-account">
-				<Avatar size="L" onClick={this._handleAvatarClick} initials={this._selectedAccount._initials} fallbackIcon={personPlaceholder} class="ui5-pm--selected-account-avatar">
+			<div class="ui5-user-menu-selected-account" aria-labelledby={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}/>
 					}
@@ -142,20 +106,84 @@ function headerContent(this: UserMenu) {
 					}
 				</Avatar>
 				{this._selectedAccount.titleText &&
-					<Title id="selected-account-title" class="ui5-pm-selected-account-title">{this._selectedAccount.titleText}</Title>
+					<Text maxLines={2} id="selected-account-title" class="ui5-user-menu-selected-account-title">{this._selectedAccount.titleText}</Text>
 				}
 
 				{this._selectedAccount.subtitleText &&
-					<Text class="ui5-pm-selected-account-subtitleText">{this._selectedAccount.subtitleText}</Text>
+					<Text maxLines={1} class="ui5-user-menu-selected-account-subtitleText">{this._selectedAccount.subtitleText}</Text>
 				}
 				{this._selectedAccount.description &&
-					<Text class="ui5-pm-selected-account-description">{this._selectedAccount.description}</Text>
+					<Text maxLines={1} class="ui5-user-menu-selected-account-description">{this._selectedAccount.description}</Text>
 				}
 
 				{this.showManageAccount &&
-					<Button id="selected-account-manage-btn" icon={userSettings} class="ui5-pm-manage-account-btn" onClick={this._handleManageAccountClick}>{this._manageAccountButtonText}</Button>
+					<Button id="selected-account-manage-btn" icon={userSettings} class="ui5-user-menu-manage-account-btn" onClick={this._handleManageAccountClick}>{this._manageAccountButtonText}</Button>
 				}
 			</div>
 		}
 	</>);
 }
+
+function otherAccountsContent(this: UserMenu) {
+	return (<>
+		<Panel collapsed={true} class="ui5-user-menu-other-accounts" aria-labelledby={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 &&
+					<Button slot="header" class="ui5-user-menu-add-account-btn" design="Transparent" icon={userEdit} onClick={this._handleEditAccountsClick} tooltip={this._editAccountsTooltip}/>
+				}
+			</div>
+			{this._otherAccounts.length > 0 &&
+				<>
+					{otherAccountsList.call(this)}
+				</>
+			}
+		</Panel>
+	</>);
+}
+
+function otherAccountsList(this: UserMenu) {
+	return (<>
+		<List onItemClick={this._handleAccountSwitch} aria-labelledby={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)}
+				>
+					<div class="ui5-user-menu-other-accounts-content">
+						<Avatar slot="image" size="S" initials={account._initials} fallbackIcon={personPlaceholder}>
+							{account.avatarSrc &&
+								<img src={account.avatarSrc}/>
+							}
+						</Avatar>
+						<div class="ui5-user-menu-other-accounts-info">
+							{account.titleText &&
+								<Title class="ui5-user-menu-other-accounts-title" wrapping-type="None">{account.titleText}</Title>
+							}
+							{account.subtitleText &&
+								<Label class="ui5-user-menu-other-accounts-additional-info" wrapping-type="None">{account.subtitleText}</Label>
+							}
+							{account.description &&
+								<Label class="ui5-user-menu-other-accounts-additional-info" wrapping-type="None">{account.description}</Label>
+							}
+						</div>
+						<div>
+							{account.selected &&
+								<Icon
+									part="icon"
+									name={selectedAccount}
+									class="ui5-user-menu-selected-account-icon"
+									mode="Decorative" />
+							}
+						</div>
+
+					</div>
+				</ListItemCustom>
+			)}
+		</List>
+	</>);
+}

package/src/ViewSettingsDialogTemplate.tsx

@@ -132,6 +132,7 @@ function ViewSettingsDialogTemplateContent(this: ViewSettingsDialog) {
 									class="ui5-vsd-filterItemList"
 									// selected={item.selected} TODO
 									additionalText={item.additionalText}
+									accessibleName={this._selectedFiltersLabel(item)}
 								>{item.text}</ListItemStandard>
 							))}
 						</ListItemGroup>

package/src/i18n/messagebundle.properties

@@ -153,7 +153,7 @@ SHELLBAR_LABEL = Shell Bar
 SHELLBAR_LOGO = Logo
 
 #XACT: ARIA announcement for the logo area
-SHELLBAR_LOGO_AREA = SAP {0} {1} Home
+SHELLBAR_LOGO_AREA = {0} {1}
 
 #XACT: ARIA announcement for the main navigation button
 SHELLBAR_ADDITIONAL_CONTEXT = Additional Info
@@ -261,6 +261,9 @@ VSD_ORDER_ASCENDING=Ascending
 #XBLI: View Settings Dialog sort order list Descending text
 VSD_ORDER_DESCENDING=Descending
 
+#XACT: View Settings Dialog filter item announcement text
+VSD_FILTER_ITEM_LABEL_TEXT={0} Counter {1}
+
 #XTIT: IllustratedMessage's title for the BeforeSearch illustration
 IM_TITLE_BEFORESEARCH=Let''s get some results
 
@@ -513,6 +516,15 @@ USER_MENU_POPOVER_ACCESSIBLE_NAME=User menu for
 #XACT: ARIA close dialog
 USER_MENU_CLOSE_DIALOG_BUTTON=Decline
 
+#XTXT: ARIA selected account
+USER_MENU_POPOVER_ACCESSIBLE_ACCOUNT_SELECTED_TXT=Selected
+
+#XTXT: ARIA User menu current account information
+USER_MENU_CURRENT_INFORMATION_TXT=Current user information
+
+#XTXT: ARIA User menu actions
+USER_MENU_ACTIONS_TXT=Actions
+
 #XACT: ARIA information for the user settings dialog
 USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=User settings dialog