@ui5/webcomponents-fiori 2.26.0-rc.0 → 2.26.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.26.0-rc.0",
+  "version": "2.26.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1532,7 +1532,7 @@
             },
             {
               "name": "placeholder",
-              "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+              "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When `scopes` are defined and no custom placeholder is provided,\nthe placeholder automatically displays \"Search in: \\{selected scope name\\}\".\nSetting a custom placeholder will override this automatic behavior.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
@@ -1633,7 +1633,7 @@
               },
               {
                 "name": "placeholder",
-                "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+                "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When `scopes` are defined and no custom placeholder is provided,\nthe placeholder automatically displays \"Search in: \\{selected scope name\\}\".\nSetting a custom placeholder will override this automatic behavior.",
                 "value": { "type": "string | undefined" }
               },
               {
@@ -1698,7 +1698,7 @@
             },
             {
               "name": "placeholder",
-              "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+              "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When `scopes` are defined and no custom placeholder is provided,\nthe placeholder automatically displays \"Search in: \\{selected scope name\\}\".\nSetting a custom placeholder will override this automatic behavior.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
@@ -1760,7 +1760,7 @@
               },
               {
                 "name": "placeholder",
-                "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+                "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When `scopes` are defined and no custom placeholder is provided,\nthe placeholder automatically displays \"Search in: \\{selected scope name\\}\".\nSetting a custom placeholder will override this automatic behavior.",
                 "value": { "type": "string | undefined" }
               },
               {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.26.0-rc.0",
+  "version": "2.26.0",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -56,20 +56,20 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.26.0-rc.0",
-    "@ui5/webcomponents-base": "2.26.0-rc.0",
-    "@ui5/webcomponents-icons": "2.26.0-rc.0",
-    "@ui5/webcomponents-theming": "2.26.0-rc.0",
+    "@ui5/webcomponents": "2.26.0",
+    "@ui5/webcomponents-base": "2.26.0",
+    "@ui5/webcomponents-icons": "2.26.0",
+    "@ui5/webcomponents-theming": "2.26.0",
     "@zxing/library": "^0.21.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.26.0-rc.0",
+    "@ui5/webcomponents-tools": "2.26.0",
     "cypress": "15.18.1",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "yarn": "^1.22.22"
   },
-  "gitHead": "112dac3cd0186b3f736f22a467259d8365481fe4"
+  "gitHead": "d022f8f0c8b508a5e59cc89d26a19adf316ea3f6"
 }

package/src/SearchFieldScopePopoverTemplate.tsx

@@ -0,0 +1,37 @@
+import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
+import ListSeparator from "@ui5/webcomponents/dist/types/ListSeparator.js";
+import PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
+import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
+import type SearchField from "./SearchField.js";
+
+export default function SearchFieldScopePopoverTemplate(this: SearchField) {
+	return (
+		<ResponsivePopover
+			id={`${this._id}-scope-popover`}
+			class="ui5-search-field-scope-popover"
+			hideArrow={true}
+			modal={false}
+			placement={PopoverPlacement.Bottom}
+			horizontalAlign={PopoverHorizontalAlign.Start}
+			open={this._scopePopoverOpen}
+			opener={this._scopeIconButton || this}
+			onClose={this._handleScopePopoverClose}
+		>
+			<List
+				separators={ListSeparator.None}
+				onItemClick={this._handleScopeItemClick.bind(this)}
+			>
+				{this.scopes.map(scopeOption => (
+					<ListItemStandard
+						data-scope-value={scopeOption.value}
+						selected={scopeOption.value === this.scopeValue}
+					>
+						{scopeOption.text}
+					</ListItemStandard>
+				))}
+			</List>
+		</ResponsivePopover>
+	);
+}

package/src/SearchFieldTemplate.tsx

@@ -5,8 +5,10 @@ import Select from "@ui5/webcomponents/dist/Select.js";
 import type SearchField from "./SearchField.js";
 import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import search from "@ui5/webcomponents-icons/dist/search.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
 import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import SearchFieldScopePopoverTemplate from "./SearchFieldScopePopoverTemplate.js";
 
 export type SearchFieldTemplateOptions = {
 	/**
@@ -35,23 +37,47 @@ export default function SearchFieldTemplate(this: SearchField, options?: SearchF
 					<div class="ui5-search-field-content">
 						{this.scopes?.length ? (
 							<>
-								<Select
-									onChange={this._handleScopeChange}
-									class="ui5-search-field-select"
-									accessibleName={this._translations.scope}
-									tooltip={this._translations.scope}
-									value={this.scopeValue}
-								>
-									{this.scopes.map(scopeOption => (
-										<Option
-											value={scopeOption.value}
-											data-ui5-stable={scopeOption.stableDomRef}
-											ref={this.captureRef.bind(scopeOption)}
-										>{scopeOption.text}
-										</Option>
-									))}
-								</Select>
-								<div class="ui5-search-field-separator"></div>
+								{!this._isMobileView ? (
+									// Desktop/Tablet: Show full Select component
+									<>
+										<Select
+											onChange={this._handleScopeChange}
+											class="ui5-search-field-select"
+											accessibleName={this._translations.scope}
+											tooltip={this._translations.scope}
+											value={this.scopeValue}
+											exportparts="label:scope-label"
+										>
+											{this.scopes.map(scopeOption => (
+												<Option
+													value={scopeOption.value}
+													data-ui5-stable={scopeOption.stableDomRef}
+													ref={this.captureRef.bind(scopeOption)}
+												>{scopeOption.text}
+												</Option>
+											))}
+										</Select>
+										<div class="ui5-search-field-separator"></div>
+									</>
+								) : (
+									// Mobile/Phone: Show icon button only
+									<>
+										<Button
+											ref={this.captureScopeIconRef.bind(this)}
+											class="ui5-search-field-scope-button"
+											icon={slimArrowDown}
+											design={ButtonDesign.Transparent}
+											onClick={this._handleScopeIconPress}
+											tooltip={this._scopeIconAccessibleName}
+											accessibleName={this._scopeIconAccessibleName}
+											accessibilityAttributes={{
+												hasPopup: "dialog",
+												expanded: this._scopePopoverOpen,
+											}}
+										/>
+										<div class="ui5-search-field-separator"></div>
+									</>
+								)}
 							</>
 						) : this.filterButton?.length ? (
 							<>
@@ -70,7 +96,7 @@ export default function SearchFieldTemplate(this: SearchField, options?: SearchF
 							aria-autocomplete="both"
 							aria-controls="ui5-search-list"
 							value={this.value}
-							placeholder={this.placeholder}
+							placeholder={this._effectivePlaceholder}
 							data-sap-focus-ref
 							onInput={this._handleInput}
 							onFocusIn={this._onfocusin}
@@ -100,6 +126,7 @@ export default function SearchFieldTemplate(this: SearchField, options?: SearchF
 						></Icon>
 					</div>
 				</div>
+				{SearchFieldScopePopoverTemplate.call(this)}
 			</BusyIndicator>
 		)
 	);

package/src/UserMenuTemplate.tsx

@@ -145,7 +145,7 @@ function headerContent(this: UserMenu) {
 
 function otherAccountsContent(this: UserMenu) {
 	return (<>
-		<Panel collapsed={true} class="ui5-user-menu-other-accounts">
+		<Panel collapsed={true} class="ui5-user-menu-other-accounts" accessibleName={`${this._otherAccountsButtonText} (${this._otherAccounts.length})`}>
 			<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 &&

package/src/UserSettingsDialogTemplate.tsx

@@ -55,11 +55,11 @@ export default function UserSettingsDialogTemplate(this: UserSettingsDialog) {
 			<Toolbar slot="footer" design="Transparent" data-sap-ui-fastnavgroup="true">
 				{this.saveMode ? (
 					<>
-						<ToolbarButton design="Emphasized" text={this.saveButtonText} onClick={this._handleSaveButtonClick} />
-						<ToolbarButton design="Transparent" text={this.cancelButtonText} onClick={this._handleCancelButtonClick} />
+						<ToolbarButton id={`${this._id}-save-btn`} design="Emphasized" text={this.saveButtonText} onClick={this._handleSaveButtonClick} />
+						<ToolbarButton id={`${this._id}-cancel-btn`} design="Transparent" text={this.cancelButtonText} onClick={this._handleCancelButtonClick} />
 					</>
 				) : (
-					<ToolbarButton design="Transparent" text={this.closeButtonText} onClick={this._handleCloseButtonClick} />
+					<ToolbarButton id={`${this._id}-close-btn`} design="Transparent" text={this.closeButtonText} onClick={this._handleCloseButtonClick} />
 				)}
 			</Toolbar>
 		</Dialog>
@@ -67,7 +67,7 @@ export default function UserSettingsDialogTemplate(this: UserSettingsDialog) {
 }
 
 function renderList(this: UserSettingsDialog, items: Array<UserSettingsItem> = [], classes: string) {
-	return <List accessibleRole="Menu" onItemClick={this._handleItemClick} class={classes} separators="None" data-sap-ui-fastnavgroup="false">
+	return <List onItemClick={this._handleItemClick} class={classes} separators="None" data-sap-ui-fastnavgroup="false">
 		{items.map(item => (
 			<ListItemStandard
 				class={!item._icon && item._siblingsWithIcon ? "ui5-user-settings-item-no-icon" : ""}

package/src/i18n/messagebundle.properties

@@ -503,6 +503,9 @@ SEARCH_FIELD_SCOPE_SELECT_LABEL=Select scope
 #XACT: ARIA label for search field
 SEARCH_FIELD_LABEL=Search field
 
+#XFLD: Placeholder text for search field with scope on mobile
+SEARCH_FIELD_PLACEHOLDER_WITH_SCOPE=Search in: {0}
+
 #XACT: ARIA announcement for search field clear icon
 SEARCH_FIELD_CLEAR_ICON=Clear search
 
@@ -614,6 +617,15 @@ USER_SETTINGS_DIALOG_CANCEL_BUTTON_TEXT=Cancel
 #XTXT: User settings dialog not result text
 USER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT=No search results
 
+#XACT: ARIA announcement for the User Settings Dialog search result if no hit
+USER_SETTINGS_DIALOG_SEARCH_NO_RESULTS=No search results
+
+#XACT: ARIA announcement for the User Settings Dialog search result if one hit
+USER_SETTINGS_DIALOG_SEARCH_ONE_RESULT=1 result available
+
+#XACT: ARIA announcement for the User Settings Dialog search result if more than one hit ({0} is the number of hits)
+USER_SETTINGS_DIALOG_SEARCH_MORE_RESULTS={0} results are available
+
 #XTXT: User settings account view edit avatar text
 USER_SETTINGS_ACCOUNT_EDIT_AVATAR_TXT=Edit avatar