@sapudex/web-components 2.61.0 → 2.63.0

package/src/ListGroupHeaderTemplate.tsx

@@ -57,6 +57,7 @@ function SingleCollapsibleHeaderRow(this: UDExListGroupHeader) {
           class="udex-list__header-title"
           {...({ innerHTML: this.label } as object)}>
         </span>
+        {this.supportingText && " "}
         {this.supportingText && (
           <span id="group-supporting-text" class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>
         )}
@@ -79,48 +80,32 @@ function SingleCollapsibleHeaderRow(this: UDExListGroupHeader) {
 }
 
 function SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {
-  // Conformant WAI-ARIA tree (FilterMenu real focus): nest the child role="group"
-  // INSIDE this treeitem so screen readers count children per group natively — no
-  // explicit aria-posinset/aria-setsize (which JAWS distrusts). Excludes SelectBox
-  // (aria-activedescendant, _useHostAriaRole) and non-tree modes, which keep the flat
-  // structure with the content region emitted as a sibling by the template body.
-  const nested = this.isTreeAccessibleRole && !this._useHostAriaRole;
   // In aria-activedescendant mode (SelectBox) the HOST element is the treeitem and
   // already carries aria-expanded + the accessible name. This inner div must then be
   // presentational (singleCollapsibleHeaderRole) and must NOT duplicate those states,
   // otherwise it is a second treeitem nested inside the host treeitem with no owning
-  // tree/group (axe/SiteImprove aria-required-parent). It stays focusable, though:
-  // clicking the collapsible-header body relies on it receiving DOM focus to redirect
-  // focus back to the combobox input — the same focusable, role="presentation" shape
-  // the list-item [part=item] divs already use. The real-focus (FilterMenu) path keeps
+  // tree/group (axe/SiteImprove aria-required-parent). It has no tab stop in that
+  // mode: DOM focus stays on the combobox input. Real-focus (FilterMenu) keeps
   // the treeitem semantics plus controls/labelling on this div.
   const headerAriaAttrs = this._useHostAriaRole ? {} : {
     "aria-expanded": this.expanded,
     "aria-controls": this.ariaControlsId,
     "aria-labelledby": this.collapsibleHeaderLabelledBy,
+    // Own the sibling group without including its visible options in this row's label.
+    "aria-owns": this.isTreeAccessibleRole ? this.ariaControlsId : undefined,
   };
   return (
     <div
-      class={`udex-list__group-content ${nested ? "udex-list__group-content--nested " : ""}udex-list__group-header-wrap ${this.sizeClass}`}
+      class={`udex-list__group-content udex-list__group-header-wrap ${this.sizeClass}`}
       part="group-item"
       id={`${this._id}_group-content__focusable`}
       role={this.singleCollapsibleHeaderRole as AriaRole}
-      tabIndex={0}
+      tabIndex={this._useHostAriaRole ? undefined : 0}
+      onMouseDown={this.handleCollapseIconMouseDown}
       onKeyDown={this.handleKeyDown}
       {...headerAriaAttrs}
       _tab-index={Number(this._effectiveTabIndex)}>
-      {nested ? (
-        <>
-          <div class="udex-list__group-header-row">
-            {SingleCollapsibleHeaderRow.call(this)}
-          </div>
-          <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class="udex-list__group-list__content">
-            <slot></slot>
-          </div>
-        </>
-      ) : (
-        SingleCollapsibleHeaderRow.call(this)
-      )}
+      {SingleCollapsibleHeaderRow.call(this)}
     </div>
   );
 }
@@ -155,6 +140,7 @@ function MultiOrRadioGroupHeader(this: UDExListGroupHeader) {
       size={this.size}
       supportingText={this.supportingText}
       accessible-role={this.nonCollapsibleHeaderAccessibleRole}
+      _useHostAriaRole={this._useHostAriaRole}
       _additional-class-name={this._additionalClassName}
       _tab-index={Number(this._effectiveTabIndex)}
       _aria-pos-in-set={this._ariaPosInSet}
@@ -169,12 +155,13 @@ function MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {
   if (this.isNonActiveHeader) {
     return (
       <header
-        role="button"
+        role={this._useHostAriaRole ? "presentation" : "button"}
         id="group-heading"
         class="udex-list__inactive-header udex-list__group-header-wrap"
-        tabIndex={Number(this._effectiveTabIndex)}
-        aria-expanded={this.expanded}
-        aria-controls={this.ariaControlsId}>
+        tabIndex={this._useHostAriaRole ? undefined : Number(this._effectiveTabIndex)}
+        aria-expanded={this._useHostAriaRole ? undefined : this.expanded}
+        aria-controls={this._useHostAriaRole ? undefined : this.ariaControlsId}
+        onMouseDown={this.handleCollapseIconMouseDown}>
         <div class="udex-list__inactive-header-content">
           <span class="udex-list__header-title" {...({ innerHTML: this.label } as object)}></span>
           {this.supportingText && (
@@ -196,13 +183,13 @@ function MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {
       </header>
     );
   }
+  // Keep this host transparent: aria-expanded/aria-controls would override role="none"
+  // and interrupt the inner treeitem's required context. The inner row exposes expanded.
   return (
     <UDExListItem
       id="group-heading"
       part="group-item"
       role="none"
-      aria-expanded={this.expanded}
-      aria-controls={this.ariaControlsId}
       selected={this.selected}
       indeterminate={this.indeterminate}
       collapsible={this.collapsible}
@@ -217,6 +204,7 @@ function MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {
       size={this.size}
       supportingText={this.supportingText}
       accessible-role={this.collapsibleHeaderAccessibleRole}
+      _useHostAriaRole={this._useHostAriaRole}
       onAccordionIconClick={this.handleCollapseIconClick as EventListener}
       _additional-class-name={this._additionalClassName}
       _tab-index={Number(this._effectiveTabIndex)}
@@ -229,16 +217,12 @@ function MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {
 }
 
 export default function ListGroupHeaderTemplate(this: UDExListGroupHeader) {
-  // Single-select real-focus tree: SingleGroupHeaderCollapsible now emits the
-  // role="group" content region as a CHILD of the treeitem (conformant nesting),
-  // so the template body must not also emit it as a sibling.
-  const singleSelectNested = this.isTreeAccessibleRole && !this.useListItemHeader && !this._useHostAriaRole;
   return (
     <div
       part="item"
       class="udex-list__group"
       role={this.groupWrapperRole as AriaRole}
-      aria-labelledby={(!this.isTreeAccessibleRole && !this.isPerGroupListbox) ? "group-heading" : undefined}>
+      aria-labelledby={(!this._useHostAriaRole && !this.isTreeAccessibleRole && !this.isPerGroupListbox) ? "group-heading" : undefined}>
       {this.collapsible ? (
         <div
           class="udex-list__group-list"
@@ -248,17 +232,15 @@ export default function ListGroupHeaderTemplate(this: UDExListGroupHeader) {
             ? MultiOrRadioGroupHeaderCollapsible.call(this)
             : SingleGroupHeaderCollapsible.call(this)
           }
-          {!singleSelectNested && (
-            <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class="udex-list__group-list__content">
-              {this.isTreeAccessibleRole ? (
+          <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class="udex-list__group-list__content">
+            {this.isTreeAccessibleRole || this.isSingleContentList ? (
+              <slot></slot>
+            ) : (
+              <div role="listbox" aria-label="group">
                 <slot></slot>
-              ) : (
-                <div role="listbox" aria-label="group">
-                  <slot></slot>
-                </div>
-              )}
-            </div>
-          )}
+              </div>
+            )}
+          </div>
         </div>
       ) : (
         <div
@@ -270,8 +252,8 @@ export default function ListGroupHeaderTemplate(this: UDExListGroupHeader) {
             ? MultiOrRadioGroupHeader.call(this)
             : SingleGroupHeader.call(this)
           }
-          {this.isTreeAccessibleRole ? (
-            <div role="group">
+          {this.isTreeAccessibleRole || this.isSingleContentList ? (
+            <div role={this.contentRegionRole as AriaRole}>
               <slot></slot>
             </div>
           ) : this.isPerGroupListbox ? (

package/src/ListItem.ts

@@ -21,7 +21,7 @@ import UDExRadioButton from "./RadioButton.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
-  INDETERMINATE, SELECTED, UNSELECTED, RATING_INDICATOR_TEXT, RATING_COUNT_TITLE, TOTAL,
+  INDETERMINATE, SELECTED, UNSELECTED,
 } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 
@@ -267,7 +267,10 @@ class UDExListItem extends UDExListItemBase {
     document.removeEventListener("mouseup", this.deactivate);
   }
 
-  handleMouseDown() {
+  handleMouseDown(e: MouseEvent) {
+    if (this._useHostAriaRole) {
+      e.preventDefault();
+    }
     this.activate();
   }
 
@@ -276,6 +279,10 @@ class UDExListItem extends UDExListItemBase {
   }
 
   handleKeyUp(e: KeyboardEvent) {
+    // Space activates a native button on keyup; the row must not cancel it.
+    if (this.firstIconElement === e.target || this.secondIconElement === e.target || (e.target as HTMLElement).classList.contains("udex-list__group-heading__icon")) {
+      return;
+    }
     e.preventDefault();
     if (isSpace(e) || isEnter(e)) {
       this.deactivate();
@@ -372,7 +379,8 @@ class UDExListItem extends UDExListItemBase {
     if (this._useHostAriaRole) {
       return "presentation";
     }
-    if (this.accessibleRole.length > 0) {
+    // Removing the reflected attribute can reset the property to null.
+    if (this.accessibleRole) {
       return this.accessibleRole;
     }
     // SingleContent is informational (not a selection widget) — listitem is semantically correct
@@ -380,11 +388,11 @@ class UDExListItem extends UDExListItemBase {
   }
 
   get effectiveRole(): string {
-    return this.accessibleRole.length > 0 ? this.accessibleRole : listItemRole;
+    return this.accessibleRole || listItemRole;
   }
 
   get ariaCheckedValue(): "true" | "false" | "mixed" | undefined {
-    if (this.effectiveRole !== "treeitem") {
+    if (this.roleItem !== "treeitem") {
       return undefined;
     }
     // Only MultiSelect treeitems expose aria-checked; SingleSelect uses aria-selected.
@@ -424,7 +432,7 @@ class UDExListItem extends UDExListItemBase {
     // actually expand/collapse. Non-collapsible group headers must NOT report an
     // expanded/collapsed state (nothing to toggle); the tree hierarchy is conveyed
     // structurally by the nested role="group", not by aria-expanded.
-    if (!this.collapsible) {
+    if (this._useHostAriaRole || !this.collapsible) {
       return undefined;
     }
     return this.expanded ? "true" : "false";
@@ -460,13 +468,6 @@ class UDExListItem extends UDExListItemBase {
     }
     return `${this.selected ? translate(UDExListItem, SELECTED) : translate(UDExListItem, UNSELECTED)} `;
   }
-
-  get ratingAriaLabel(): string {
-    const ratingText = this.ratingCount ? `${translate(UDExListItem, RATING_COUNT_TITLE)} ${this.ratingCount}` : "";
-    const totalText = this.totalCount ? `${translate(UDExListItem, TOTAL)} ${this.totalCount}` : "";
-    const ratingTitleText = translate(UDExListItem, RATING_INDICATOR_TEXT);
-    return [...[ratingText, totalText].filter(Boolean), `${ratingTitleText} ${this.rating} of ${this.ratingMax}`].join(", ");
-  }
 }
 
 UDExListItem.define();

package/src/ListItemBase.ts

@@ -8,7 +8,9 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import translate from "./utils/translate.js";
-import { COLLAPSE, EXPAND } from "./generated/i18n/i18n-defaults.js";
+import {
+  COLLAPSE, EXPAND, RATING_COUNT_TITLE, RATING_INDICATOR_TEXT, TOTAL,
+} from "./generated/i18n/i18n-defaults.js";
 
 export type UDExListItemBaseEvents = {
   "first-icon-click": UDExListItemBaseEventDetail,
@@ -407,6 +409,17 @@ class UDExListItemBase extends UI5Element {
   get hasRating(): boolean {
     return !!this.rating;
   }
+
+  /**
+   * Shared rating description for rendered options and their source items.
+   * @private
+   */
+  get ratingAriaLabel(): string {
+    const ratingText = this.ratingCount ? `${translate(UDExListItemBase, RATING_COUNT_TITLE)} ${this.ratingCount}` : "";
+    const totalText = this.totalCount ? `${translate(UDExListItemBase, TOTAL)} ${this.totalCount}` : "";
+    const ratingTitleText = translate(UDExListItemBase, RATING_INDICATOR_TEXT);
+    return [...[ratingText, totalText].filter(Boolean), `${ratingTitleText} ${this.rating} of ${this.ratingMax}`].join(", ");
+  }
 }
 
 export default UDExListItemBase;

package/src/ListItemTemplate.tsx

@@ -136,8 +136,8 @@ export default function ListItemTemplate(this: UDExListItem) {
       {this.modeSelected && (
         <div
           part="item"
-          tabIndex={Number(this._effectiveTabIndex)}
-          aria-disabled={this._ariaDisabled}
+          tabIndex={this._useHostAriaRole ? undefined : Number(this._effectiveTabIndex)}
+          aria-disabled={this._useHostAriaRole ? undefined : this._ariaDisabled}
           class={this.className}
           role={this.roleItem as AriaRole}
           aria-checked={this.ariaCheckedValue}
@@ -160,7 +160,7 @@ export default function ListItemTemplate(this: UDExListItem) {
               part="checkbox"
               tabindex={-1}
               indeterminate={this.indeterminate}
-              accessible-name={`checkbox ${this.stateAccessibleName}`}
+              accessible-name={this._useHostAriaRole ? undefined : `checkbox ${this.stateAccessibleName}`}
               checked={this.selected}
               disabled={this.disabled}
               aria-hidden="true"
@@ -183,7 +183,7 @@ export default function ListItemTemplate(this: UDExListItem) {
         <div
           part="item"
           role={this.roleItem as AriaRole}
-          aria-selected={this.selected}
+          aria-selected={this.ariaSelectedValue}
           class={this.className}>
           {ContentList.call(this)}
         </div>

package/src/ListSelectAllTemplate.tsx

@@ -6,22 +6,24 @@ export default function ListSelectAllTemplate(this: UDExListSelectAll) {
     <div
       part="item"
       class="udex-list__group"
-      role="group"
-      aria-labelledby="group-select-all">
+      role={this._useHostAriaRole ? "presentation" : "group"}
+      aria-labelledby={this._useHostAriaRole ? undefined : "group-select-all"}>
       <div
-        role="listbox"
-        aria-label="select-all-group"
+        role={this._useHostAriaRole ? "presentation" : "listbox"}
+        aria-label={this._useHostAriaRole ? undefined : "select-all-group"}
         class={this.groupListClassName}
         onui5-item-press={this.handleSelectAllGroupItemsPress}>
         <UDExListItem
-          role="group"
+          role={this._useHostAriaRole ? "none" : "group"}
           part="group-item"
           accessible-role="option"
+          _useHostAriaRole={this._useHostAriaRole}
+          label={this._useHostAriaRole ? this.selectAllLabel : undefined}
           mode={this.multiselectMode}
           onClick={this.handleSelectAllPress}
           class={this.className}
           selected={this.selected}
-          aria-current={this.selected}
+          aria-current={this._useHostAriaRole ? undefined : this.selected}
           indeterminate={this.indeterminate}
           controlled={this.controlled}
           onKeyDown={this.handleKeyDownPress}
@@ -29,9 +31,9 @@ export default function ListSelectAllTemplate(this: UDExListSelectAll) {
           _additional-class-name={this.additionalClassName}
           supportingText={this.supportingText}
           divider>
-          {this.selectAllLabel}
+          {!this._useHostAriaRole && this.selectAllLabel}
         </UDExListItem>
-        <slot></slot>
+        {this._useHostAriaRole ? <div role="group"><slot></slot></div> : <slot></slot>}
       </div>
     </div>
   );

package/src/ListTemplate.tsx

@@ -2,6 +2,8 @@ import type UDExList from "./List.js";
 import type { AriaRole } from "@ui5/webcomponents-base/types.js";
 
 export default function ListTemplate(this: UDExList) {
+  const hasHostAriaRole = this._hasHostAriaRole;
+
   return (
     <>
       {this.modeSelected && (
@@ -13,16 +15,18 @@ export default function ListTemplate(this: UDExList) {
           onui5-header-press={this.handleItemPress}>
           <div class="udex-list__scroll-container">
             {HeaderText.call(this)}
-            <span id={`${this._id}-mode-label`} class="udex-list__hidden-text">
-              {this.ariaLabelModeText}
-            </span>
+            {!hasHostAriaRole && (
+              <span id={this.ariaLabelledBy} class="udex-list__hidden-text">
+                {this.ariaLabelModeText}
+              </span>
+            )}
             <div
               id="udex-list"
               class="udex-list"
-              role={this.effectiveAccessibleRole as AriaRole}
-              aria-labelledby={this.ariaLabelledBy}
-              aria-multiselectable={this._listAriaMultiSelectable as "true" | undefined}
-              aria-busy={(this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
+              role={(hasHostAriaRole ? "none" : this.effectiveAccessibleRole) as AriaRole}
+              aria-labelledby={hasHostAriaRole ? undefined : this.ariaLabelledBy}
+              aria-multiselectable={(hasHostAriaRole ? undefined : this._listAriaMultiSelectable) as "true" | undefined}
+              aria-busy={(hasHostAriaRole ? undefined : this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
               <slot></slot>
             </div>
           </div>
@@ -34,9 +38,9 @@ export default function ListTemplate(this: UDExList) {
           <div
             id="udex-list"
             class="udex-list"
-            role={this.singleContentRole as AriaRole}
-            aria-label={this.singleContentAriaLabel}
-            aria-busy={(this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
+            role={(hasHostAriaRole ? "none" : this.singleContentRole) as AriaRole}
+            aria-label={hasHostAriaRole ? undefined : this.singleContentAriaLabel}
+            aria-busy={(hasHostAriaRole ? undefined : this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
             <slot></slot>
           </div>
         </>

package/src/MastheadCountrySelector.ts

@@ -207,6 +207,24 @@ class UDExMastheadCountrySelector extends UI5Element {
   @property()
     languageVoice!: string;
 
+  /**
+   * Defines the accessible ARIA name of the search field.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    accessibleNameSearch!: string;
+
+  /**
+   * Defines the accessible ARIA name of the search reset icon.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    accessibleNameSearchResetIcon!: string;
+
   /**
    * Defines the country list of the region is opened
    *

package/src/MastheadCountrySelectorTemplate.tsx

@@ -35,6 +35,8 @@ function activeRegionView(this: UDExMastheadCountrySelector) {
             onui5-submit-search-value={this.handleSearch}
             language-voice={this.languageVoice}
             label={this.searchLabel}
+            accessible-name={this.accessibleNameSearch}
+            accessible-name-reset-icon={this.accessibleNameSearchResetIcon}
             mode={this.homeSearchMode}
             show-voice-button={this.showSearchVoiceButton}
             non-interactive-submit-button={true}

package/src/MessageStrip.ts

@@ -224,6 +224,13 @@ class UDExMessageStrip extends MessageStrip {
     return this.isDecorativeDesign || this.isNotIconStatusType;
   }
 
+  get _closableText(): string {
+    if (!MessageStrip.i18nBundle) {
+      return "";
+    }
+    return super._closableText;
+  }
+
   get hiddenText(): string {
     const statusText = this.isDecorativeDesign ? (this.textStatusTypeMapping()[this.design] ?? "") : this.textStatusTypeMapping()[this.design];
     return `${statusText} ${this.hideCloseButton ? "" : this._closableText}`.trim();

package/src/Search.ts

@@ -333,7 +333,10 @@ class UDExSearch extends UI5Element {
     labelPrefix!: string;
 
   /**
-   * Defines display the suggestion popover in the component.
+   * Enables the suggestion popover to open automatically as the user types.
+   * The popover opens when the input has 2 or more characters and closes when cleared.
+   * Use this property for automatic, input-driven popover management.
+   * For programmatic control from the host application, use <code>openSuggestionPopup</code> instead.
    *
    * @default false
    * @public
@@ -371,7 +374,12 @@ class UDExSearch extends UI5Element {
     showPopoverWhenClickedIntoInput!: boolean;
 
   /**
-   * Defines open suggestion popover.
+   * Programmatically controls the visibility of the suggestion popover.
+   * Set to <code>true</code> to open the popover; set to <code>false</code> to close it.
+   * Use this property when the host application needs to control the popover state manually,
+   * for example after receiving an asynchronous API response.
+   * The <code>suggestionList</code> property must be populated with data for suggestions to appear.
+   * Use either this property or <code>showSuggestedPopover</code> — avoid using both simultaneously.
    *
    * @default false
    * @public
@@ -563,6 +571,9 @@ class UDExSearch extends UI5Element {
   @property({ type: Boolean })
     _isTouched!: boolean;
 
+  private _openSuggestionHandled = false;
+  private _intersectionObserver?: IntersectionObserver;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -576,11 +587,22 @@ class UDExSearch extends UI5Element {
     this.isNotMozillaFirefoxIOS = !this.isMozillaFirefox("FxiOS");
     this.initSpeechRecognition();
     ResizeHandler.register(this, this._handleResizeBound);
+    this._intersectionObserver = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting && this.openSuggestionPopup) {
+          this._openSuggestionHandled = false;
+          this.handleOpenSuggestionPopover();
+        }
+      });
+    });
+    this._intersectionObserver.observe(this);
   }
 
   onExitDOM(): void {
     ResizeHandler.deregister(this, this._handleResizeBound);
     this.removeEventListener("dropdown-trigger-event", () => { });
+    this._intersectionObserver?.disconnect();
+    this._intersectionObserver = undefined;
   }
 
   initSpeechRecognition(): void {
@@ -633,6 +655,7 @@ class UDExSearch extends UI5Element {
 
   setPopoverState(changeInfo: ChangeInfo): void {
     if (changeInfo.name === "openSuggestionPopup") {
+      this._openSuggestionHandled = false;
       this.handlePopoverTrigger(changeInfo.newValue as boolean);
     }
   }
@@ -651,8 +674,8 @@ class UDExSearch extends UI5Element {
     }
   }
 
-  setSuggestedRecommendedLists(value: string): void {
-    if (this.showSuggestedPopover && value) {
+  setSuggestedRecommendedLists(value: string, handleClose = true): void {
+    if ((this.showSuggestedPopover || this.openSuggestionPopup) && value) {
       const parsedData: SuggestionRecommendLists = JSON.parse(value);
       const hasDataLabels = this.hasDataLabel(parsedData);
 
@@ -661,7 +684,7 @@ class UDExSearch extends UI5Element {
         this.suggestedList = this.getListWithSuggestion(this.getSuggestedList(hasDataLabels, parsedData), "suggested");
         this.recommendedList = this.getListWithSuggestion(this.getRecommendedList(hasDataLabels, parsedData), "recommended");
       }
-      if (!this.shouldShowPopover(parsedData, hasDataLabels)) {
+      if (handleClose && !this.shouldShowPopover(parsedData, hasDataLabels)) {
         this.onClosePopover();
         this.resetSuggestedRecommendedLists();
       }
@@ -864,7 +887,7 @@ class UDExSearch extends UI5Element {
   }
 
   onOpenPopover(): void {
-    if (this.showSuggestedPopover) {
+    if (this.showSuggestedPopover || this.openSuggestionPopup) {
       if (!this.Suggestion) {
         retryUntilSuccessful(() => this.Suggestion, this.retryDelay, this.maxRetryAttempts, this.unsuccessfulRetryMessage)
           .then(() => {
@@ -884,8 +907,8 @@ class UDExSearch extends UI5Element {
   }
 
   onClosePopover(): void {
-    if (this.showSuggestedPopover) {
-      this.Suggestion!.close();
+    if (this.showSuggestedPopover || this.open) {
+      this.Suggestion?.close();
       this.handleAriaExpanded();
       this.open = false;
       this.fireDecoratorEvent("suggestion-popover-closed");
@@ -897,15 +920,18 @@ class UDExSearch extends UI5Element {
   }
 
   get rootClasses(): string {
-    if (this.mode === Mode.HomeSearch && this.showSuggestedPopover && this.open) {
+    if (this.mode === Mode.HomeSearch && (this.showSuggestedPopover) && this.open) {
       return this.isSuggestionPopoverTop ? "udex-search__root--show-popover-top" : "udex-search__root--show-popover";
     }
     return "";
   }
 
   onBeforeRendering(): void {
-    if (this.showSuggestedPopover) {
+    if (this.showSuggestedPopover || this.openSuggestionPopup) {
       this.enableSuggestions();
+      if (this.suggestionList && !this.suggestedList?.length && !this.recommendedList?.length) {
+        this.setSuggestedRecommendedLists(this.suggestionList, false);
+      }
     }
 
     if (this.isHomeSearchWithPrefixMode && this.dropdownPrefix.length) {
@@ -976,7 +1002,7 @@ class UDExSearch extends UI5Element {
   }
 
   onAfterRendering(): void {
-    if (this.showSuggestedPopover) {
+    if (this.showSuggestedPopover || this.openSuggestionPopup) {
       const prefixPopover = this.getPrefixPopover();
 
       if (this.Suggestion?.popover) {
@@ -998,9 +1024,18 @@ class UDExSearch extends UI5Element {
   }
 
   handleOpenSuggestionPopover() {
-    if (this.openSuggestionPopup) {
+    if (this.openSuggestionPopup && !this._openSuggestionHandled) {
+      this._openSuggestionHandled = true;
       this.Suggestion?._getSuggestionPopover();
-      this.handlePopoverTrigger(this.openSuggestionPopup);
+      // Defer to the next animation frame so the opener element has a resolved
+      // layout before UI5 Popover calculates its position. Without this, opening
+      // during onAfterRendering (which runs in a microtask, before layout) causes
+      // the popover to anchor at 0,0 — appearing detached from the search input.
+      requestAnimationFrame(() => {
+        if (this.openSuggestionPopup) {
+          this.handlePopoverTrigger(this.openSuggestionPopup);
+        }
+      });
     }
   }
 

package/src/SearchTemplate.tsx

@@ -49,12 +49,12 @@ export default function SearchTemplate(this: UDExSearch) {
                   size={UDExButtonSize.Small}
                   design={UDExButtonDesign.Default}
                   tooltip={this.tooltipInfo.tooltipResetButton}
+                  accessible-name={this.accInfo.accessibleNameResetIcon}
                   onClick={this.onReset as any}
                   onKeyDown={this.handleKeyDownReset}
                 >
                   <UI5Icon
                     class="udex-search__button-icon"
-                    accessible-name={this.accInfo.accessibleNameResetIcon}
                     accessible-role="presentation"
                     name={decline}
                   ></UI5Icon>
@@ -111,6 +111,7 @@ export default function SearchTemplate(this: UDExSearch) {
                   design={UDExButtonDesign.Default}
                   icon={search}
                   size={UDExButtonSize.Small}
+                  accessible-name={this.accInfo.accessibleNameSearchIcon}
                   tooltip={this.tooltipInfo.tooltipSubmitButton}
                   onClick={this.onSubmit as any}
                 ></UDExButton>
@@ -127,6 +128,7 @@ export default function SearchTemplate(this: UDExSearch) {
                   icon={search}
                   tooltip={this.tooltipInfo.tooltipSubmitButton}
                   onClick={this.onSubmit as any}
+                  accessible-name={this.accInfo.accessibleNameSearchIcon}
                 ></UDExControlButton>
               ) : ""
             }