Merge branch 'main' into dialog_unwanted_animation

dimovpetar · web-flow · commit 59d6dd0d2dcc · 2025-12-17T10:57:59.000+02:00
diff --git a/.github/workflows/ci-test.yaml b/.github/workflows/ci-test.yaml
@@ -21,7 +21,7 @@ jobs:
         cache: 'yarn'
 
     - name: Install
-      run: yarn --frozen-lockfile
+      run: yarn --immutable
 
     - name: Build
       run: yarn ci:testbuild
diff --git a/.github/workflows/deploy-preview.yaml b/.github/workflows/deploy-preview.yaml
@@ -80,12 +80,14 @@ jobs:
           
           if (pr.state !== 'open') {
             console.log(`PR #${pr.number} was closed during build, skipping deployment`);
-            core.setOutput('should_deploy', 'false');
+            const fs = require('fs');
+            fs.appendFileSync(process.env.GITHUB_OUTPUT, `should_deploy=false\n`);
             return;
           }
           
           console.log(`PR #${pr.number} is still open, proceeding with deployment`);
-          core.setOutput('should_deploy', 'true');
+          const fs = require('fs');
+          fs.appendFileSync(process.env.GITHUB_OUTPUT, `should_deploy=true\n`);
 
     - name: Config Netlify CORS
       if: steps.final-pr-check.outputs.should_deploy == 'true'
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -45,7 +45,7 @@ jobs:
         yarn ci:deploy:nightly
 
     - name: Deploy
-      uses: JamesIves/github-pages-deploy-action@v4.3.3
+      uses: JamesIves/github-pages-deploy-action@v4.7.6
       with:
         branch: gh-pages # The branch the action should deploy to.
         folder: packages/website/build # The folder the action should deploy.
@@ -79,7 +79,7 @@ jobs:
         yarn ci:deploy
 
     - name: Deploy
-      uses: JamesIves/github-pages-deploy-action@v4.3.3
+      uses: JamesIves/github-pages-deploy-action@v4.7.6
       with:
         branch: gh-pages # The branch the action should deploy to.
         folder: packages/website/build # The folder the action should deploy.
diff --git a/.github/workflows/issue-close.yaml b/.github/workflows/issue-close.yaml
@@ -8,7 +8,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/stale@v5
+    - uses: actions/stale@v9
       with:
         # The number of days old an issue can be before marking it stale.
         days-before-stale: 21
diff --git a/.github/workflows/issue-reopen.yaml b/.github/workflows/issue-reopen.yaml
@@ -28,7 +28,8 @@ jobs:
             // Allowed bots
             const isSystemUser = ['ui5-webcomponents-bot', 'github-actions[bot]'].includes(commenter);
 
-            core.setOutput('shouldReopen', !isSystemUser && commentAt > closedAt);
+            const fs = require('fs');
+            fs.appendFileSync(process.env.GITHUB_OUTPUT, `shouldReopen=${!isSystemUser && commentAt > closedAt}\n`);
 
       - name: Reopen Issue
         if: steps.check.outputs.shouldReopen == 'true'
diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml
@@ -17,7 +17,7 @@ jobs:
         cache: 'yarn'
 
     - name: Install Dependencies
-      run: yarn --frozen-lockfile
+      run: yarn --immutable
 
     - name: Lint
       run: yarn ci:lint
diff --git a/.github/workflows/release-downport.yaml b/.github/workflows/release-downport.yaml
@@ -26,7 +26,7 @@ jobs:
         cache: 'yarn'
 
     - name: Install
-      run: yarn --frozen-lockfile
+      run: yarn --immutable
 
     - name: Version Bump
       env:
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -48,7 +48,7 @@ jobs:
           cache: 'yarn'
 
       - name: Install Dependencies
-        run: yarn --frozen-lockfile
+        run: yarn --immutable
 
       - name: Build
         run: yarn ci:releasebuild
@@ -132,7 +132,7 @@ jobs:
           cache: 'yarn'
 
       - name: Install Dependencies
-        run: yarn --frozen-lockfile
+        run: yarn --immutable
 
       - name: Build
         run: yarn ci:releasebuild
@@ -200,7 +200,7 @@ jobs:
           cache: 'yarn'
 
       - name: Install Dependencies
-        run: yarn --frozen-lockfile
+        run: yarn --immutable
 
       - name: Build
         run: yarn ci:releasebuild
@@ -244,7 +244,7 @@ jobs:
           cache: 'yarn'
 
       - name: Install Dependencies
-        run: yarn --frozen-lockfile
+        run: yarn --immutable
 
       - name: Build
         run: yarn ci:releasebuild
diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts
@@ -277,9 +277,7 @@ abstract class UI5Element extends HTMLElement {
 	}
 
 	/**
-	 * Returns a unique ID for this UI5 Element
-	 *
-	 * @deprecated - This property is not guaranteed in future releases
+	 * Returns a unique ID for this UI5 Element.
 	 * @protected
 	 */
 	get _id() {
diff --git a/packages/fiori/cypress/specs/Search.cy.tsx b/packages/fiori/cypress/specs/Search.cy.tsx
@@ -1746,6 +1746,38 @@ describe("Accessibility", () => {
 		cy.get("[ui5-search]")
 			.should("be.focused");
 	});
+
+	it("should have aria-autocomplete='both' on the input element", () => {
+		cy.mount(
+			<Search>
+				<SearchItem text="Item 1" icon={history} />
+			</Search>
+		);
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-autocomplete", "both");
+	});
+
+	it("should have aria-controls pointing to responsive popover", () => {
+		cy.mount(
+			<Search>
+				<SearchItem text="Item 1" icon={history} />
+			</Search>
+		);
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("input")
+			.invoke("attr", "aria-controls")
+			.then((ariaControlsId) => {
+				cy.get("[ui5-search]")
+					.shadow()
+					.find("[ui5-responsive-popover]")
+					.should("have.attr", "id", ariaControlsId);
+			});
+	});
 });
 
 describe("Lazy loaded items and autocomplete", () => {
diff --git a/packages/fiori/cypress/specs/SearchField.cy.tsx b/packages/fiori/cypress/specs/SearchField.cy.tsx
@@ -396,6 +396,48 @@ describe("SearchField general interaction", () => {
 				.should("have.length", 2);
 		});
 
+		it("preselected scope option should be applied", () => {
+			cy.mount(<SearchField scope-value="products" value="test">
+				<SearchScope text="Apps" value="apps" slot="scopes"></SearchScope>
+				<SearchScope text="Products" value="products" slot="scopes"></SearchScope>
+			</SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-select]")
+				.as("select");
+
+			cy.get("@select")
+				.should("have.prop", "value", "products");
+		});
+
+		it("changes scope-value on option select", () => {
+			cy.mount(<SearchField value="test">
+				<SearchScope text="Apps" value="apps" slot="scopes"></SearchScope>
+				<SearchScope text="Products" value="products" slot="scopes"></SearchScope>
+			</SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("[ui5-select]")
+				.as("scope");
+
+			cy.get("@scope")
+				.realClick();
+
+			cy.get("@scope")
+				.realPress("ArrowDown");
+
+			cy.get("@scope")
+				.realPress("Enter");
+
+			cy.get("@searchfield")
+				.should("have.prop", "scopeValue", "products");
+		});
+
 		it("scope-change event should be fired, when a scope option is selected", () => {
 			cy.mount(<SearchField value="test">
 				<SearchScope text="Apps" slot="scopes"></SearchScope>
diff --git a/packages/fiori/src/SearchField.ts b/packages/fiori/src/SearchField.ts
@@ -28,7 +28,7 @@ import {
  */
 interface ISearchScope extends UI5Element {
 	text?: string,
-	selected: boolean,
+	value?: string,
 	stableDomRef: string,
 }
 
@@ -153,6 +153,20 @@ class SearchField extends UI5Element {
 	@property()
 	accessibleDescription?: string;
 
+	/**
+	 * Defines the value of the component:
+	 *
+	 * Applications are responsible for setting the correct scope value.
+	 *
+	 * **Note:** If the given value does not match any existing scopes,
+	 * no scope will be selected and the SearchField scope component will be displayed as empty.
+	 * @public
+	 * @default ""
+	 * @since 2.18.0
+	 */
+	@property()
+	scopeValue?: string;
+
 	/**
 	 * Defines the component scope options.
 	 * @public
@@ -241,6 +255,12 @@ class SearchField extends UI5Element {
 
 	_handleScopeChange(e: CustomEvent<SelectChangeEventDetail>) {
 		const item = e.detail.selectedOption as IOption & { scopeOption: ISearchScope };
+
+		// Set the scopeValue property if the selected scope has a value defined
+		if (item.value) {
+			this.scopeValue = item.value;
+		}
+
 		this.fireDecoratorEvent("scope-change", {
 			scope: item.scopeOption,
 		});
diff --git a/packages/fiori/src/SearchFieldTemplate.tsx b/packages/fiori/src/SearchFieldTemplate.tsx
@@ -36,10 +36,12 @@ export default function SearchFieldTemplate(this: SearchField, options?: SearchF
 								onChange={this._handleScopeChange}
 								class="sapUiSizeCompact ui5-search-field-select"
 								accessibleName={this._translations.scope}
-								tooltip={this._translations.scope}>
+								tooltip={this._translations.scope}
+								value={this.scopeValue}
+							>
 								{this.scopes.map(scopeOption => (
 									<Option
-										selected={scopeOption.selected}
+										value={scopeOption.value}
 										data-ui5-stable={scopeOption.stableDomRef}
 										ref={this.captureRef.bind(scopeOption)}
 									>{scopeOption.text}
@@ -62,6 +64,8 @@ export default function SearchFieldTemplate(this: SearchField, options?: SearchF
 						role="searchbox"
 						aria-description={this.accessibleDescription}
 						aria-label={this.accessibleName || this._translations.searchFieldAriaLabel}
+						aria-autocomplete="both"
+						aria-controls="ui5-search-list"
 						value={this.value}
 						placeholder={this.placeholder}
 						data-sap-focus-ref
diff --git a/packages/fiori/src/SearchItem.ts b/packages/fiori/src/SearchItem.ts
@@ -7,7 +7,10 @@ import SearchItemCss from "./generated/themes/SearchItem.css.js";
 import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import { SEARCH_ITEM_DELETE_BUTTON } from "./generated/i18n/i18n-defaults.js";
+import {
+	SEARCH_ITEM_DELETE_BUTTON_TOOLTIP,
+} from "./generated/i18n/i18n-defaults.js";
+
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
@@ -259,7 +262,7 @@ class SearchItem extends ListItemBase {
 	}
 
 	get _deleteButtonTooltip() {
-		return SearchItem.i18nBundle.getText(SEARCH_ITEM_DELETE_BUTTON);
+		return SearchItem.i18nBundle.getText(SEARCH_ITEM_DELETE_BUTTON_TOOLTIP);
 	}
 
 	get hasActions() {
diff --git a/packages/fiori/src/SearchPopoverTemplate.tsx b/packages/fiori/src/SearchPopoverTemplate.tsx
@@ -17,6 +17,7 @@ import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
 export default function SearchPopoverTemplate(this: Search, headerTemplate?: JsxTemplate) {
 	return (
 		<ResponsivePopover
+			id="ui5-search-list"
 			hideArrow={true}
 			preventFocusRestore={true}
 			preventInitialFocus={!isPhone()}
diff --git a/packages/fiori/src/SearchScope.ts b/packages/fiori/src/SearchScope.ts
@@ -25,12 +25,13 @@ class SearchScope extends UI5Element implements ISearchScope {
 	text!: string;
 
 	/**
-	 * Indicates whether the item is selected
-	 * @default false
+	 * Defines the value of the `ui5-search-scope`.
+	 * Used for selection in Search scopes.
+	 * @default undefined
 	 * @public
 	 */
-	@property({ type: Boolean })
-	selected!: boolean;
+	@property()
+	value?: string;
 
 	get stableDomRef() {
 		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
diff --git a/packages/fiori/src/i18n/messagebundle.properties b/packages/fiori/src/i18n/messagebundle.properties
@@ -197,8 +197,8 @@ SHELLBAR_IMAGE_BTN = User Menu
 #XACT: ARIA announcement for the search button
 SHELLBAR_SEARCH_BTN_OPEN = Open Search
 
-#XACT: ARIA announcement for the search item delete button
-SEARCH_ITEM_DELETE_BUTTON=Remove Suggestion
+#XACT: ARIA announcement for the search item delete button tooltip
+SEARCH_ITEM_DELETE_BUTTON_TOOLTIP=Remove Suggestion
 
 #XACT: ARIA announcement for the more button
 SHELLBAR_OVERFLOW = More
diff --git a/packages/fiori/test/pages/Search.html b/packages/fiori/test/pages/Search.html
@@ -213,10 +213,10 @@
 
 	<div class="container">
 		<ui5-label>Search with Scoped Suggestions - Filter by scope</ui5-label>
-		<ui5-search id="search-scope" show-clear-icon placeholder="Search Apps, Products">
-			<ui5-search-scope text="All" slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Apps" selected slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Products" slot="scopes"></ui5-search-scope>
+		<ui5-search id="search-scope" show-clear-icon scope-value="apps" placeholder="Search Apps, Products">
+			<ui5-search-scope text="All" value="all" slot="scopes"></ui5-search-scope>
+			<ui5-search-scope text="Apps" value="apps" slot="scopes"></ui5-search-scope>
+			<ui5-search-scope text="Products" value="products" slot="scopes"></ui5-search-scope>
 		</ui5-search>
 		<ui5-text style="padding-top: 0.25rem; font-style: italic;">The examples shows scoped search with scoped suggestions. Change scope to filter suggestions.</ui5-text>
 	</div>
@@ -324,7 +324,7 @@
 		const searchScope = document.getElementById('search-scope');
 		createScopeItems();
 		searchScope.addEventListener('ui5-scope-change', (event) => {
-			let scope = event.detail.scope.text === "All" ? "" : event.detail.scope.text.toLowerCase();
+			let scope = event.detail.scope.value === "all" ? "" : event.detail.scope.value;
 
 			searchScope.getSlottedNodes("items").forEach(item => {
 				item.remove();
diff --git a/packages/fiori/test/pages/SearchField.html b/packages/fiori/test/pages/SearchField.html
@@ -32,10 +32,10 @@
 	</div>
 	<div class="container" style="padding-top: 1rem; display: flex; flex-direction: column;">
 		<ui5-label>Initially expanded fixed search with scope and placeholder:</ui5-label>
-		<ui5-search-field accessible-name="Global Search" id="scoped-search" fixed expanded mode="Scoped" placeholder="Placeholder">
-			<ui5-search-scope text="All" slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Apps" selected slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Products" slot="scopes"></ui5-search-scope>
+		<ui5-search-field accessible-name="Global Search" id="scoped-search" scope-value="apps" fixed expanded mode="Scoped" placeholder="Placeholder">
+			<ui5-search-scope text="All" value="all" slot="scopes"></ui5-search-scope>
+			<ui5-search-scope text="Apps" value="apps" slot="scopes"></ui5-search-scope>
+			<ui5-search-scope text="Products" value="products" slot="scopes"></ui5-search-scope>
 		</ui5-search-field>
 	</div>
 	<ui5-label>Advanced filtering search</ui5-label>
diff --git a/packages/fiori/test/pages/ShellBar_evolution.html b/packages/fiori/test/pages/ShellBar_evolution.html
diff --git a/packages/main/cypress/specs/Panel.cy.tsx b/packages/main/cypress/specs/Panel.cy.tsx
diff --git a/packages/main/src/Panel.ts b/packages/main/src/Panel.ts
diff --git a/packages/tools/components-package/nps.js b/packages/tools/components-package/nps.js
diff --git a/packages/website/docs/_samples/fiori/Search/Basic/main.js b/packages/website/docs/_samples/fiori/Search/Basic/main.js
diff --git a/packages/website/docs/_samples/fiori/Search/Basic/sample.html b/packages/website/docs/_samples/fiori/Search/Basic/sample.html
diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js
diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html
