@sapudex/web-components 2.60.0 → 2.62.0

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/SearchableListBase.ts

@@ -851,15 +851,23 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get roleForGroupList(): string {
-    // Host is always transparent; the shadow-inner div carries the widget role
-    // (tree/listbox) via accessibleRoleForList.
-    return "none";
+    // Active-descendant items carry their roles on their hosts; their owning
+    // container must do the same, regardless of the selection mode.
+    return this._activeDescendantMode ? this.accessibleRoleForList : "none";
+  }
+
+  /** @private Accessible name for a host-owned popup list. */
+  get listAccessibleName(): string {
+    return "";
   }
 
   get accessibleRoleForList(): string {
     if (this.isTreeStructure) {
       return "tree";
     }
+    if (this.mode === UDExListMode.SingleContent) {
+      return "list";
+    }
     if (this.isPerGroupListbox) {
       // Each group is its own role="listbox" (see ListGroupHeaderTemplate); the outer
       // container must be transparent, otherwise the per-group listboxes would be nested
@@ -891,6 +899,10 @@ class UDExSearchableListBase extends UI5Element {
       return "treeitem";
     }
 
+    if (this.mode === UDExListMode.SingleContent) {
+      return "listitem";
+    }
+
     if (this.accessibleRoleForList === "listbox") {
       return "option";
     }

package/src/SearchableListBaseTemplate.tsx

@@ -8,8 +8,11 @@ import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
 import UDExListSelectAll from "./ListSelectAll.js";
+import { UDExListMode } from "./types/List.js";
 import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
 import { cleanLabel } from "./utils/listItemLabelUtils.js";
+import { INDETERMINATE, SELECT_ALL } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 export default function SearchableListBaseTemplate(this: UDExSearchableListBase) {
   return (
@@ -49,8 +52,12 @@ export default function SearchableListBaseTemplate(this: UDExSearchableListBase)
         <UDExList
           id="udex-list"
           role={this.roleForGroupList as AriaRole}
-          accessible-role={this.accessibleRoleForList}
-          {...(this.isTreeStructure && this.modeMultiSelect ? { "aria-multiselectable": "true" } : {})}
+          {...(this._activeDescendantMode ? {
+            "aria-label": this.listAccessibleName,
+            accessibleName: this.listAccessibleName,
+          } : {})}
+          accessibleRole={this._activeDescendantMode ? "" : this.accessibleRoleForList}
+          {...((this.isTreeStructure || this._activeDescendantMode) && this.modeMultiSelect ? { "aria-multiselectable": "true" } : {})}
           class="udex-filter-menu__list"
           controlled={this.isControlled}
           mode={this.mode}
@@ -59,7 +66,7 @@ export default function SearchableListBaseTemplate(this: UDExSearchableListBase)
           {this._filteredItems.map((processedItem, index) => (
             processedItem.isGroup
               ? renderGroup.call(this, processedItem, index)
-              : renderListItem(processedItem.item as UDExListItem, index, "none", this.listItemRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this.modeMultiSelect)
+              : renderListItem(processedItem.item as UDExListItem, index, "none", this.listItemRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this._activeDescendantMode ? index + 1 : undefined, this._activeDescendantMode ? this._filteredItems.length : undefined)
           ))}
         </UDExList>
       )}
@@ -76,9 +83,14 @@ function renderGroup(this: UDExSearchableListBase, processedItem: UDExProcessedI
 function renderSelectAll(this: UDExSearchableListBase, processedItem: UDExProcessedItem, index: number) {
   const { item, groupItems } = processedItem;
   const header = item as UDExListGroupHeaderBase;
+  const label = item.label && item.label !== "undefined" ? item.label : translate(UDExListSelectAll, SELECT_ALL);
   return (
     <UDExListSelectAll
       key={index}
+      id={item._id}
+      {...UDExGroupHostAria.call(this, header, index, label)}
+      mode={this.mode}
+      _treeMode={this.isTreeStructure}
       _additional-class-name={this.additionalClassName}
       data-token-id={item._id}
       label={item.label}
@@ -90,26 +102,38 @@ function renderSelectAll(this: UDExSearchableListBase, processedItem: UDExProces
       onFirstIconClick={this.fireFirstIconClickEvent}
       onSecondIconClick={this.fireSecondIconClickEvent}>
       {groupItems.map((child, i) =>
-        renderListItem(child as UDExListItem, i, this.listItemRole, undefined, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this.modeMultiSelect)
+        renderListItem(child as UDExListItem, i, this.listItemRole, this._activeDescendantMode && this.isTreeStructure ? "treeitem" : undefined, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this._activeDescendantMode ? i + 1 : undefined, this._activeDescendantMode ? groupItems.length : undefined)
       )}
     </UDExListSelectAll>
   );
 }
 
+function UDExGroupHostAria(this: UDExSearchableListBase, header: UDExListGroupHeaderBase, index: number, label = header.label) {
+  return this._activeDescendantMode ? {
+    role: (this.isTreeStructure ? "treeitem" : "option") as AriaRole,
+    "aria-label": [label, header.supportingText].filter(Boolean).map(UDExText => cleanLabel(UDExText)).join(" "),
+    "aria-level": this.isTreeStructure ? 1 : undefined,
+    "aria-posinset": index + 1,
+    "aria-setsize": this._filteredItems.length,
+    "aria-selected": this.modeSingleSelect || this.modeMultiSelect ? String(header.selected && !header.indeterminate) : undefined,
+    // aria-selected is Boolean, not tri-state. Describe partial group selection
+    // separately rather than exposing the same selection as both checked and selected.
+    "aria-description": this.modeMultiSelect && header.indeterminate ? translate(UDExListSelectAll, INDETERMINATE) : undefined,
+    "aria-disabled": header.disabled ? "true" : undefined,
+    "aria-expanded": header.collapsible ? String(header.expanded) : undefined,
+    "_use-host-aria-role": true,
+  } : { role: "none" as AriaRole };
+}
+
 function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProcessedItem, index: number) {
   const { item, groupItems } = processedItem;
   const header = item as UDExListGroupHeaderBase;
   const childAccessibleRole = this.isTreeStructure ? "treeitem" : undefined;
-  // Position among sibling group headers, for the explicit tree-position attributes below.
+  // Explicit positions for real-focus MultiSelect group headers.
   const treeGroups = this.isTreeStructure ? this._filteredItems.filter(p => p.isGroup) : [];
   const groupPosInSet = treeGroups.indexOf(processedItem) + 1;
   const groupSetSize = treeGroups.length;
-  // Explicit per-group tree position for the FilterMenu (real-focus) treeitems. Scoped to
-  // MultiSelect only: the SingleSelect tree is now conformantly nested (role="group" inside
-  // the parent treeitem) so JAWS/NVDA count children natively — explicit values there just
-  // confuse JAWS. MultiSelect still uses the malformed sibling structure until Phase 2, so it
-  // keeps the explicit override. Not applied in aria-activedescendant mode (SelectBox announces
-  // position via its own live region — see [[project_selectbox_aria_live_region]]).
+  // Keep the existing real-focus position overrides separate from host-owned ARIA.
   const treePositionAttrs = (!this._activeDescendantMode && this.isTreeStructure && this.modeMultiSelect) ? {
     "_aria-pos-in-set": groupPosInSet,
     "_aria-set-size": groupSetSize,
@@ -120,23 +144,16 @@ function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProc
   // the shadow DOM's div.udex-list__group provides the single role="group" with
   // aria-labelledby="group-heading" in non-tree mode; in tree mode the treeitem is
   // on the focusable div inside the shadow.
-  const hostAriaAttrs = this._activeDescendantMode ? {
-    role: (this.isTreeStructure ? "treeitem" : "option") as AriaRole,
-    "aria-label": cleanLabel(item.label ?? ""),
-    "aria-selected": (this.modeMultiSelect ? undefined : (item.selected ? "true" : "false")) as string | undefined,
-    "aria-checked": (this.modeMultiSelect ? (header.indeterminate ? "mixed" : (item.selected ? "true" : "false")) : undefined) as string | undefined,
-    "aria-disabled": item.disabled ? "true" as string : undefined,
-    "aria-expanded": header.collapsible ? (header.expanded ? "true" as string : "false" as string) : undefined,
-    "_use-host-aria-role": true,
-  } : { role: "none" as AriaRole };
+  const hostAriaAttrs = UDExGroupHostAria.call(this, header, index);
   return (
     <UDExListGroupHeader
       key={index}
       id={item._id}
       {...hostAriaAttrs}
       {...treePositionAttrs}
-      _tree-mode={this.isTreeStructure || undefined}
-      _group-as-listbox={this.isPerGroupListbox || undefined}
+      _treeMode={this.isTreeStructure}
+      _groupAsListbox={this.isPerGroupListbox}
+      mode={this.mode}
       {...(index === 0 ? { "_no-border": "" } : {})}
       _additional-class-name="udex-searchable-list__header"
       class={this.groupClassName}
@@ -155,7 +172,7 @@ function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProc
       onAccordionIconClick={this.handleAccordionIconClick}
       indeterminate={header.indeterminate}>
       {groupItems.map((child, i) =>
-        renderListItem(child as UDExListItem, i, "none", childAccessibleRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this.modeMultiSelect, i + 1, groupItems.length)
+        renderListItem(child as UDExListItem, i, "none", childAccessibleRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, i + 1, groupItems.length)
       )}
     </UDExListGroupHeader>
   );
@@ -170,34 +187,31 @@ function renderListItem(
   onSecondIconClick: (e: CustomEvent) => void,
   activeDescendantMode?: boolean,
   isTreeStructure?: boolean,
-  modeMultiSelect?: boolean,
   posInSet?: number,
   setSize?: number,
 ) {
   // In aria-activedescendant mode (SelectBox), role + ARIA state must be on the
   // host element so screen readers can reach them via the aria-activedescendant pointer.
   const effectiveRole = accessibleRole ?? (role !== "none" ? role : undefined) ?? "option";
+  const selectable = item.mode !== UDExListMode.SingleContent;
   const hostRole = activeDescendantMode ? (effectiveRole as AriaRole) : (role as AriaRole);
   const hostAriaAttrs = activeDescendantMode ? {
-    "aria-label": "test",
-    // option role (listbox): always aria-selected; treeitem + MultiSelect: aria-checked only
-    "aria-selected": (effectiveRole !== "treeitem" || !modeMultiSelect) ? (item.selected ? "true" : "false") as string : undefined,
-    "aria-checked": (effectiveRole === "treeitem" && !!modeMultiSelect) ? (item.indeterminate ? "mixed" : (item.selected ? "true" : "false")) as string : undefined,
+    // Rating-only options need a host name too, rather than a name derived from
+    // descendants that can include the decorative checkbox's selection label.
+    "aria-label": [item.label, item.supportingText, item.additionalText, item.hasRating ? item.ratingAriaLabel : undefined]
+      .filter(Boolean).map(UDExText => cleanLabel(UDExText!)).join(" ") || undefined,
+    // Native position metadata replaces the duplicate spoken live-region summary.
+    "aria-level": isTreeStructure ? ((item.parentElement as UDExListGroupHeaderBase | null)?.isGroup ? 2 : 1) : undefined,
+    "aria-posinset": posInSet,
+    "aria-setsize": setSize,
+    "aria-selected": selectable && (effectiveRole === "option" || effectiveRole === "treeitem") ? String(item.selected) : undefined,
     "aria-disabled": item.disabled ? "true" as string : undefined,
     "_use-host-aria-role": true,
     ...(accessibleRole ? { "accessible-role": accessibleRole } : {}),
   } : {
     ...(accessibleRole ? { "accessible-role": accessibleRole } : {}),
   };
-  // Explicit per-group position for FilterMenu real-focus items. Applied whenever
-  // posInSet/setSize are provided (i.e. items inside a group header), across all
-  // modes except aria-activedescendant (SelectBox uses its own live region):
-  //   • Non-tree grouped listbox (SingleSelect non-collapsible): options get per-group
-  //     counts since native shadow-DOM counting is unreliable for nested custom elements.
-  //   • SingleSelect conformant-nested tree: explicit values match the native structural
-  //     count, so JAWS trusts and re-announces on every arrow step (not just group entry).
-  //   • MultiSelect sibling tree (Phase 2 pending): keeps the fix-20 override.
-  // Not applied in aria-activedescendant mode (SelectBox — see [[project_selectbox_aria_live_region]]).
+  // Real-focus grouped children keep their position on the inner focusable row.
   const treePositionAttrs = (!activeDescendantMode && posInSet != null && setSize != null) ? {
     "_aria-pos-in-set": posInSet,
     "_aria-set-size": setSize,

package/src/SecondaryNavigation.ts

@@ -21,6 +21,7 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import translate from "./utils/translate.js";
+import type { RelativeValue } from "./utils/parseRelativeUnits.js";
 
 // Styles
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
@@ -180,7 +181,7 @@ class UDExSecondaryNavigation extends UI5Element {
    * @public
    */
   @property({ type: String })
-    maxDropdownHeight!: string;
+    maxDropdownHeight!: RelativeValue;
 
   @property({ type: Boolean, noAttribute: true })
     _selectedMore!: boolean;

package/src/SecondaryNavigationItem.ts

@@ -32,6 +32,11 @@ type UDExSecondaryNavigationItemSubItemClickEventDetail = {
   originalEvent: PointerEvent | KeyboardEvent
 }
 
+const DROPDOWN_MAX_HEIGHT_VAR = {
+  desktop: "--udex-secondary-navigation-item-dropdown-desktop-max-height",
+  mobile: "--udex-secondary-navigation-item-dropdown-mobile-max-height",
+} as const;
+
 /**
  * @class
  *
@@ -394,24 +399,27 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   setDesktopDropdownMaxHeight(): void {
     const { top } = this.dropdown.getBoundingClientRect();
     const maxHeight = window.innerHeight - top - DESKTOP_DROPDOWN_BOTTOM_GAP;
-    this.style.setProperty("--udex-secondary-navigation-item-dropdown-desktop-max-height", `${maxHeight}px`);
+    this.style.setProperty(DROPDOWN_MAX_HEIGHT_VAR.desktop, `${maxHeight}px`);
   }
 
   setMobileDropdownMaxHeight(): void {
     if (!this._maxHeight || this._dropdownMaxHeightExceeds || !this.heightSatisfiesType) {
-      const secondaryNavigationMobileTrigger = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!;
-      const maxDropdownHeight = window.innerHeight - secondaryNavigationMobileTrigger.clientHeight;
-      this.style.setProperty("--udex-secondary-navigation-item-dropdown-mobile-max-height", `${maxDropdownHeight}px`);
+      const { clientHeight } = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!;
+      const { top } = this.getBoundingClientRect();
+      const maxDropdownHeight = window.innerHeight - top - clientHeight;
+
+      this.style.setProperty(DROPDOWN_MAX_HEIGHT_VAR.mobile, `${maxDropdownHeight}px`);
       return;
     }
 
-    this.style.setProperty("--udex-secondary-navigation-item-dropdown-mobile-max-height", `${this._maxHeight}`);
+    this.style.setProperty(DROPDOWN_MAX_HEIGHT_VAR.mobile, `${this._maxHeight}`);
   }
 
   get _dropdownMaxHeightExceeds(): boolean {
     const normalizedHeight = parseRelativeUnits(this._maxHeight, this.dropdown);
+    const { top } = this.getBoundingClientRect();
     const secondaryNavigationMobileTriggerHeight = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!.clientHeight;
-    return normalizedHeight >= window.innerHeight - secondaryNavigationMobileTriggerHeight;
+    return normalizedHeight >= window.innerHeight - top - secondaryNavigationMobileTriggerHeight;
   }
 
   get heightSatisfiesType(): boolean {

package/src/SecondaryNavigationTemplate.tsx

@@ -41,7 +41,7 @@ export default function SecondaryNavigationTemplate(this: UDExSecondaryNavigatio
                   subItems={item.items ?? []}
                   onui5-sub-item-click={this.handleSubItemClick}
                   onui5-nav-item-click={this.handleItemClick}
-                  {...{ "_nav-items-length": this.visibleItems.length }}>
+                  _navItemsLength={this.visibleItems.length}>
                 </UDExSecondaryNavigationItem>
               </li>
             ))}
@@ -53,7 +53,7 @@ export default function SecondaryNavigationTemplate(this: UDExSecondaryNavigatio
                   onui5-nav-item-click={this.handleItemClick}
                   label={this.moreButtonText}
                   subItems={this._overflowItems}
-                  {...{ "_nav-items-length": this.visibleItems.length }}>
+                  _navItemsLength={this.visibleItems.length}>
                 </UDExSecondaryNavigationItem>
               </li>
             )}
@@ -75,10 +75,8 @@ export default function SecondaryNavigationTemplate(this: UDExSecondaryNavigatio
         onui5-sub-item-click={this.handleSubItemClick}
         onKeyDown={this.handleKeyDown}
         subItems={this.parsedItems}
-        {...{
-          "_is-mobile-menu-opener": "",
-          "_max-height": this.maxDropdownHeight
-        }}>
+        _maxHeight={this.maxDropdownHeight}
+        _is-mobile-menu-opener={true}>
         {this.hasMobileButtonsSlot && (
           <div className="udex-secondary-navigation__buttons" onClick={this.handleMobileButtonsClick}>
             <slot name="buttons"></slot>