@sapudex/web-components 2.48.0 → 2.50.0

package/src/ListGroupHeader.hbs

@@ -1,27 +1,27 @@
 <div
     part="item"
     class="udex-list__group"
-    role="group"
-    aria-labelledby="group-heading">
+    role="{{groupWrapperRole}}"
+    {{#unless isTreeAccessibleRole}}aria-labelledby="group-heading"{{/unless}}>
     {{#if collapsible}}
       <div
           class="udex-list__group-list"
           name="group"
           @ui5-item-press="{{getHandleGroupItemsClick}}">
-          {{#if modeMultiSelectOrRadioGroup}}
+          {{#if useListItemHeader}}
               {{> multi-or-radio-group-header-collapsible}}
           {{else}}
               {{> single-group-header-collapsible}}
           {{/if}}
-          <div id="{{ariaControlsId}}" role="region" class="udex-list__group-list__content">
-            <div role="listbox" aria-label="group">
+          <div id="{{ariaControlsId}}" role="{{contentRegionRole}}" class="udex-list__group-list__content">
+            {{#unless isTreeAccessibleRole}}<div role="listbox" aria-label="group">{{/unless}}
               <slot></slot>
-            </div>
+            {{#unless isTreeAccessibleRole}}</div>{{/unless}}
           </div>
       </div>
     {{else}}
       <div
-          role="listbox"
+          role="{{nonCollapsibleContainerRole}}"
           class="udex-list__group-list"
           name="group"
           aria-label="group"
@@ -65,7 +65,8 @@
             type="{{type}}"
             label="{{label}}"
             _icon="{{_icon}}"
-            size="{{size}}">
+            size="{{size}}"
+            accessible-role="{{nonCollapsibleHeaderAccessibleRole}}">
         </udex-list-item>
     {{/if}}
 {{/inline}}
@@ -98,7 +99,7 @@
             id="group-heading"
             aria-expanded="{{expanded}}"
             aria-controls="{{ariaControlsId}}"
-            accessible-role="button"
+            accessible-role="{{collapsibleHeaderAccessibleRole}}"
             _additional-class-name="{{_additionalClassName}}"
             ?selected="{{selected}}"
             _tab-index="{{_effectiveTabIndex}}"
@@ -148,7 +149,7 @@
 {{#*inline "single-group-header-collapsible"}}
     <div class="udex-list__group-content udex-list__group-header-wrap {{sizeClass}}" part="group-item"
     id="{{this._id}}_group-content__focusable"
-    role="button"
+    role="{{singleCollapsibleHeaderRole}}"
     tabindex="0"
     @keydown="{{handleKeyDown}}"
     _tab-index="{{_effectiveTabIndex}}"

package/src/ListGroupHeader.ts

@@ -78,7 +78,11 @@ class UDExListGroupHeader extends UDExListGroupHeaderBase {
   }
 
   handleKeyDown(e: KeyboardEvent) {
-    if (isRight(e) || isLeft(e)) {
+    if (isLeft(e) && !this.collapsed) {
+      this.handleCollapseIconClick(e);
+      return;
+    }
+    if (isRight(e) && this.collapsed) {
       this.handleCollapseIconClick(e);
     }
   }

package/src/ListGroupHeaderBase.ts

@@ -36,6 +36,16 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
   @property({ type: String })
     _additionalClassName!: string;
 
+  /**
+   * Marks the group header as part of a tree structure. When true, the header
+   * renders as a treeitem and its children container as a group.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _treeMode: boolean = false;
+
   /**
    * Slot for group header list items.
    *
@@ -186,6 +196,44 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
     return this.nonInteractive || this.modeRadioGroup;
   }
 
+  /**
+   * Decides which collapsible-header partial to render.
+   * Uses the udex-list-item-based partial for MultiSelect/RadioGroup only.
+   * SingleSelect collapsible headers use the plain div partial — the list-item
+   * partial fires its own Enter/Space/click selection handlers that must not run.
+   */
+  get useListItemHeader(): boolean {
+    return this.modeMultiSelectOrRadioGroup;
+  }
+
+  get isTreeAccessibleRole(): boolean {
+    return this._treeMode;
+  }
+
+  get singleCollapsibleHeaderRole(): string {
+    return this._treeMode ? "treeitem" : "button";
+  }
+
+  get collapsibleHeaderAccessibleRole(): string {
+    return this._treeMode ? "treeitem" : "button";
+  }
+
+  get groupWrapperRole(): string {
+    return this._treeMode ? "none" : "group";
+  }
+
+  get contentRegionRole(): string {
+    return this._treeMode ? "group" : "region";
+  }
+
+  get nonCollapsibleContainerRole(): string {
+    return "group";
+  }
+
+  get nonCollapsibleHeaderAccessibleRole(): string | undefined {
+    return this._treeMode ? "treeitem" : undefined;
+  }
+
   get className(): string {
     const controlledClassName = this.controlled ? `${listGroupHeaderClass}_controlled` : "";
     return `${listGroupHeaderClass} ${this._additionalClassName} ${controlledClassName} ${listGroupHeaderClass}-wrap`;

package/src/ListItem.hbs

@@ -5,6 +5,9 @@
         aria-disabled="{{_ariaDisabled}}"
         class="{{className}}"
         role="{{roleItem}}"
+        aria-checked="{{ariaCheckedValue}}"
+        aria-selected="{{ariaSelectedValue}}"
+        aria-expanded="{{ariaExpandedValue}}"
         @click="{{handleItemClick}}"
         @mousedown="{{handleMouseDown}}"
         @mouseup="{{handleMouseUp}}"
@@ -24,7 +27,8 @@
                 ?indeterminate="{{indeterminate}}"
                 accessible-name="checkbox {{stateAccessibleName}}"
                 ?checked="{{selected}}"
-                ?disabled="{{disabled}}">
+                ?disabled="{{disabled}}"
+                ?aria-hidden="{{checkboxAriaHidden}}">
             </udex-checkbox>
         {{/if}}
         {{#if modeRadioGroup}}

package/src/ListItem.ts

@@ -369,6 +369,42 @@ class UDExListItem extends UDExListItemBase {
     return this.accessibleRole.length > 0 ? this.accessibleRole : listItemRole;
   }
 
+  get ariaCheckedValue(): "true" | "false" | "mixed" | undefined {
+    if (this.roleItem !== "treeitem") {
+      return undefined;
+    }
+    // Only MultiSelect treeitems expose aria-checked; SingleSelect uses aria-selected.
+    if (!this.modeMultiSelect) {
+      return undefined;
+    }
+    if (this.indeterminate) {
+      return "mixed";
+    }
+    return this.selected ? "true" : "false";
+  }
+
+  get ariaSelectedValue(): "true" | "false" | undefined {
+    if (this.roleItem !== "treeitem") {
+      return undefined;
+    }
+    // Only SingleSelect treeitems expose aria-selected; MultiSelect uses aria-checked.
+    if (this.modeMultiSelect) {
+      return undefined;
+    }
+    return this.selected ? "true" : "false";
+  }
+
+  get ariaExpandedValue(): "true" | "false" | undefined {
+    if (!this.collapsible) {
+      return undefined;
+    }
+    return this.expanded ? "true" : "false";
+  }
+
+  get checkboxAriaHidden(): boolean {
+    return this.roleItem === "treeitem";
+  }
+
   get _ariaDisabled(): boolean | undefined {
     return this.disabled ? true : undefined;
   }

package/src/MediaPlayer.ts

@@ -10,6 +10,7 @@ import type { VimeoPlayer } from "./MediaPlayerVimeo.js";
 import mapLangFile from "./mediaPlayerLanguageMapping.js";
 import type UDExMediaPlayerYoutube from "./MediaPlayerYoutube.js";
 import type UDExMediaPlayerVimeo from "./MediaPlayerVimeo.js";
+import "./BusyIndicator.js";
 
 // Template
 import MediaPlayerTemplate from "./MediaPlayerTemplate.js";
@@ -281,6 +282,15 @@ class UDExMediaPlayer extends UI5Element {
     this._pendingPlugins.push({ name, plugin });
   }
 
+  _injectBusyIndicator(): void {
+    const spinner = this.shadowRoot?.querySelector(".vjs-loading-spinner");
+    if (!spinner || spinner.querySelector("[udex-busy-indicator]")) { return; }
+    const busyIndicator = document.createElement("udex-busy-indicator");
+    busyIndicator.setAttribute("active", "");
+    busyIndicator.setAttribute("surface-container", "");
+    spinner.appendChild(busyIndicator);
+  }
+
   getPlayedTime = (target: EventTarget): number => {
     const progressControl = (target as any)?.player.controlBar?.progressControl?.childNameIndex_.seekBar;
     if (!progressControl) {
@@ -566,6 +576,7 @@ class UDExMediaPlayer extends UI5Element {
 
       this.player = videojs(this.shadowRoot?.querySelector(".video-js") || "", options);
       this.attachListeners(this.player);
+      this._injectBusyIndicator();
 
       if (this.audioOnly) { return; }
 

package/src/PromoTile.ts

@@ -240,7 +240,7 @@ class UDExPromoTile extends UI5Element {
     const eyebrowColor = this.checkEyebrowColor(this.colorScheme);
     const isDarkMode = this._colorMode === UDExPromoTileMode.dark;
     const defaultButtonDesign = isDarkMode ? UDExButtonDesign.Secondary : UDExButtonDesign.Primary;
-    const modeColor = isDarkMode ? "var(--udexCoreTextLight)" : "inherit";
+    const modeColor = isDarkMode ? "var(--udexColorNeutralWhite)" : "inherit";
 
     if (this._button) {
       this._button.design = this.buttonDesign || defaultButtonDesign;

package/src/SearchableListBase.ts

@@ -247,11 +247,11 @@ class UDExSearchableListBase extends UI5Element {
   /**
    * Defines the default accessible role for the list component.
    *
-   * @default "list"
+   * @default "listbox"
    * @public
    */
   @property({ type: String })
-    defaultAccessibleRole: string = "list";
+    defaultAccessibleRole: string = "listbox";
 
   /**
    * Defines the filtered items for the component.
@@ -582,7 +582,7 @@ class UDExSearchableListBase extends UI5Element {
     if (firstItem.isGroup) {
       list.focusHeader(firstItem);
     } else {
-      firstItem.focus();
+      list.focusItem(firstItem);
     }
   }
 
@@ -720,6 +720,18 @@ class UDExSearchableListBase extends UI5Element {
     return this.modeMultiSelect && isGrouping;
   }
 
+  /**
+   * Whether the dropdown list should use the ARIA tree pattern
+   * (role="tree"/"treeitem" with aria-expanded / aria-selected / aria-checked).
+   *
+   * Base implementation is never a tree. Subclasses that support grouped
+   * hierarchical navigation (e.g. UDExFilterMenu) override this with their
+   * own mode/collapsible rules.
+   */
+  get isTreeStructure(): boolean {
+    return false;
+  }
+
   get additionalClassName(): string {
     return `udex-searchable-list__header`;
   }
@@ -743,16 +755,21 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get roleForGroupList(): string {
-    return this._filteredItems.some(element => element.isGroup) ? "group" : "none";
+    // Host is always transparent; the shadow-inner div carries the widget role
+    // (tree/listbox) via accessibleRoleForList.
+    return "none";
   }
 
   get accessibleRoleForList(): string {
-    return this._filteredItems.some(element => element.isGroup) ? "group" : this.defaultAccessibleRole;
+    if (this.isTreeStructure) {
+      return "tree";
+    }
+    return this.defaultAccessibleRole;
   }
 
   get listItemRole(): string {
-    if (this.accessibleRoleForList === "list") {
-      return "listitem";
+    if (this.isTreeStructure) {
+      return "treeitem";
     }
 
     if (this.accessibleRoleForList === "listbox") {

package/src/SearchableListBaseTemplate.tsx

@@ -49,6 +49,7 @@ export default function SearchableListBaseTemplate(this: UDExSearchableListBase)
           id="udex-list"
           role={this.roleForGroupList as AriaRole}
           accessible-role={this.accessibleRoleForList}
+          {...(this.isTreeStructure && this.modeMultiSelect ? { "aria-multiselectable": "true" } : {})}
           class="udex-filter-menu__list"
           controlled={this.isControlled}
           mode={this.mode}
@@ -97,10 +98,12 @@ function renderSelectAll(this: UDExSearchableListBase, processedItem: UDExProces
 function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProcessedItem, index: number) {
   const { item, groupItems } = processedItem;
   const header = item as UDExListGroupHeaderBase;
+  const childAccessibleRole = this.isTreeStructure ? "treeitem" : undefined;
   return (
     <UDExListGroupHeader
       key={index}
-      role="group"
+      role={this.isTreeStructure ? "none" : "group"}
+      _tree-mode={this.isTreeStructure || undefined}
       {...(index === 0 ? { "_no-border": "" } : {})}
       _additional-class-name="udex-searchable-list__header"
       class={this.groupClassName}
@@ -118,7 +121,7 @@ function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProc
       onSecondIconClick={this.fireSecondIconClickEvent}
       indeterminate={header.indeterminate}>
       {groupItems.map((child, i) =>
-        renderListItem(child as UDExListItem, i, "none", undefined, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent)
+        renderListItem(child as UDExListItem, i, "none", childAccessibleRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent)
       )}
     </UDExListGroupHeader>
   );

package/src/SelectBase.ts

@@ -225,6 +225,10 @@ class UDExSelectBase extends UDExSearchableListBase {
     this._trigger = this.trigger;
     this.handleDirection();
 
+    if (this._list) {
+      this._list._scrollIntoView = "Nearest";
+    }
+
     if (this._requestRender) {
       this._requestRender = false;
     }
@@ -299,12 +303,18 @@ class UDExSelectBase extends UDExSearchableListBase {
 
     if (isRight(e)) {
       e.preventDefault();
+      if (this._handleGroupHeaderCollapse(e.target as HTMLElement, false)) {
+        return;
+      }
       this._handleArrowRightInRow(e.target as HTMLElement);
       return;
     }
 
     if (isLeft(e)) {
       e.preventDefault();
+      if (this._handleGroupHeaderCollapse(e.target as HTMLElement, true)) {
+        return;
+      }
       this._handleArrowLeftInRow(e.target as HTMLElement);
       return;
     }
@@ -617,6 +627,51 @@ class UDExSelectBase extends UDExSearchableListBase {
     return (iconSlot === "firstIcon" || iconSlot === "secondIcon") ? iconSlot : null;
   }
 
+  /**
+   * Collapses (Left) or expands (Right) a collapsible group header when the arrow key
+   * is pressed while focus is on that header. Mirrors List.handleArrowLeft/Right, but is
+   * needed here because SelectBox intercepts Left/Right at the popover level (for icon-row
+   * navigation) before the event would reach the List's own handler.
+   *
+   * Returns true when a collapse/expand was handled, so the caller skips icon-row handling.
+   */
+  _handleGroupHeaderCollapse(target: HTMLElement, collapse: boolean): boolean {
+    const header = this._resolveCollapsibleGroupHeader(target);
+    if (!header) { return false; }
+
+    // Left only collapses an expanded group; Right only expands a collapsed one.
+    if (collapse && !header.collapsed) {
+      header.collapsed = true;
+      this._list.setCollapsedItems(true, header);
+      return true;
+    }
+    if (!collapse && header.collapsed) {
+      header.collapsed = false;
+      this._list.setCollapsedItems(false, header);
+      return true;
+    }
+    // Target is a collapsible header but already in the requested state — still consume
+    // the key so it does not fall through to icon-row navigation.
+    return header.isGroup;
+  }
+
+  /**
+   * Resolves the collapsible group-header host from a keydown target, walking up through
+   * shadow host boundaries (the focused element can be the header's inner wrapper/list-item).
+   */
+  _resolveCollapsibleGroupHeader(target: HTMLElement): UDExListItemBase | null {
+    let node: Node | null = target;
+    while (node) {
+      const el = node as UDExListItemBase;
+      if (el.isGroup && typeof el.hasAttribute === "function" && el.hasAttribute("collapsible")) {
+        return el;
+      }
+      const root = node.getRootNode() as ShadowRoot | Document;
+      node = (root as ShadowRoot).host ?? null;
+    }
+    return null;
+  }
+
   _handleArrowRightInRow(target: HTMLElement): void {
     const iconSlot = this._getIconButtonSlot(target);
     if (!iconSlot) {
@@ -642,7 +697,7 @@ class UDExSelectBase extends UDExSearchableListBase {
       const firstIcon = parentItem.querySelector<HTMLElement>("[slot=\"firstIcon\"]");
       firstIcon?.focus();
     } else if (iconSlot === "firstIcon") {
-      (parentItem as UDExListItemBase).focus();
+      this._list.focusItem(parentItem as UDExListItemBase);
     }
   }
 
@@ -680,7 +735,7 @@ class UDExSelectBase extends UDExSearchableListBase {
 
     this._list.unsetTabIndexByIndex(items, currentIndex);
     this._list.setTabIndexByIndex(items, targetIndex);
-    items[targetIndex].focus();
+    this._list.focusItem(items[targetIndex]);
     this._selectedOption = items[targetIndex].label;
   }
 
@@ -697,7 +752,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     if (lastItem.isGroup) {
       this._list.focusHeader(lastItem);
     } else {
-      lastItem.focus();
+      this._list.focusItem(lastItem);
     }
   }
 

package/src/SelectBoxTemplate.tsx

@@ -76,6 +76,7 @@ export default function SelectBoxTemplate(this: UDExSelectBox) {
             <UI5Popover
               id={this.popoverId}
               allow-target-overlap={this.allowTargetOverlap}
+              accessible-role="None"
               onKeyDown={this.handleKeyDownDropdown}
               {...({
                 onSelectAll: this.handleSelectAll,

package/src/TabNavigation.hbs

@@ -43,7 +43,7 @@
         <udex-button
             class="udex-tab-navigation__button-more"
             design="Tertiary"
-            size="Medium"
+            size="{{sizeMoreButton}}"
             end-icon="navigation-down-arrow"
             @click="{{handleMoreButton}}"
             @keydown="{{handleFocusMoreButton}}"

package/src/TabNavigation.ts

@@ -125,7 +125,7 @@ class UDExTabNavigation extends UI5Element {
    * @default "Small"
   */
   @property()
-    UDExsizeMoreButton: `${UDExSizeMoreButton}` = "Small";
+    sizeMoreButton: `${UDExSizeMoreButton}` = "Small";
 
   /**
    * Defines the mode of the component.
@@ -139,6 +139,7 @@ class UDExTabNavigation extends UI5Element {
   /**
    * Defines the orientation of the tab navigation.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. Only `Horizontal` orientation should be used.
    * @public
    * @default "Horizontal"
    */
@@ -149,6 +150,7 @@ class UDExTabNavigation extends UI5Element {
    * Defines the placement of the tab strip relative to the content area.
    * Applies to Vertical orientation only.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. This property only applies to Vertical orientation.
    * @public
    * @default "Start"
    */
@@ -159,6 +161,7 @@ class UDExTabNavigation extends UI5Element {
    * Defines the vertical alignment of the tab strip relative to the content area.
    * Applies to Vertical orientation only.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. This property only applies to Vertical orientation.
    * @public
    * @default "Top"
    */
@@ -168,6 +171,7 @@ class UDExTabNavigation extends UI5Element {
   /**
    * Enables automatic tab switching for Vertical orientation.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. This property only applies to Vertical orientation.
    * @public
    * @default false
    */
@@ -178,6 +182,7 @@ class UDExTabNavigation extends UI5Element {
    * Defines the interval in milliseconds between automatic tab switches.
    * Applies only when autoPlay is enabled.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. This property only applies to Vertical orientation with autoPlay.
    * @public
    * @default 5000
    */
@@ -256,6 +261,7 @@ class UDExTabNavigation extends UI5Element {
    * Defines optional content rendered below the tab list in Vertical orientation.
    * Use to place a button or any action element beneath the tabs.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. This slot only applies to Vertical orientation.
    * @slot footer
    * @public
    */
@@ -709,6 +715,7 @@ class UDExTabNavigation extends UI5Element {
     this.setVisibleTabs();
     this.setTabsIndex(selectedTabIndex);
     this.emitClickEvent(selectedTabIndex + 1);
+    this.fireDecoratorEvent("tab-select", { tab: this._selectedTab, tabIndex: selectedTabIndex });
   }
 
   getMoreButton(): HTMLElement {

package/src/Wizard.ts

@@ -1,7 +1,9 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import UI5Wizard from "@ui5/webcomponents-fiori/dist/Wizard.js";
+import type { WizardStepChangeEventDetail } from "@ui5/webcomponents-fiori/dist/Wizard.js";
 import WizardContentLayout from "@ui5/webcomponents-fiori/dist/types/WizardContentLayout.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import WizardTemplate from "./WizardTemplate.js";
@@ -67,8 +69,19 @@ export type StepInfo = {
   template: WizardTemplate,
   styles: [UI5Wizard.styles, WizardCss],
 })
-
+/**
+ * Fired when the step is changed by user interaction.
+ *
+ * @public
+ * @param {WizardStepChangeEventDetail} step - The new step.
+ * @param {WizardStepChangeEventDetail} previousStep - The previous step.
+ * @param {boolean} withScroll - Indicates if the change of the step was triggered by scrolling.
+ */
+@event("step-change", { bubbles: true })
 class UDExWizard extends UI5Wizard {
+  eventDetails!: {
+    "step-change": WizardStepChangeEventDetail;
+  };
   @slot({
     "default": true,
     type: HTMLElement,
@@ -259,3 +272,4 @@ class UDExWizard extends UI5Wizard {
 UDExWizard.define();
 
 export default UDExWizard;
+export type { WizardStepChangeEventDetail };