@sapudex/web-components 2.51.0 → 2.53.0

package/src/Avatar.ts

@@ -10,6 +10,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from "./generated/i18n/i18n-defaults.js";
 import type AvatarColorScheme from "@ui5/webcomponents/dist/types/AvatarColorScheme.js";
 import translate from "./utils/translate.js";
+import "@ui5/webcomponents-icons/dist/employee.js";
 
 // Template
 import AvatarTemplate from "./AvatarTemplate.js";
@@ -148,11 +149,11 @@ class UDExAvatar extends UI5Element {
   /**
    * Defines the name of the fallback icon.
    *
-   * @default ""
+   * @default "employee"
    * @public
    */
   @property({ type: String })
-    fallbackIcon: string = "";
+    fallbackIcon: string = "employee";
 
   /**
    * Defines the name of the UI5 Icon, that will be displayed.
@@ -208,11 +209,59 @@ class UDExAvatar extends UI5Element {
   @slot({ type: HTMLElement })
     badge!: Array<HTMLElement>;
 
+  /**
+   * @private
+   */
+  @property({ noAttribute: true })
+    _imageErrored: boolean = false;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
+  private _trackedImageElement: HTMLImageElement | null = null;
+
+  private _handleImageError = (): void => {
+    this._imageErrored = true;
+  };
+
+  private _handleImageLoad = (): void => {
+    if (this._imageErrored) {
+      this._imageErrored = false;
+    }
+  };
+
+  private _syncImageListener(): void {
+    const newImage = this.image.find((el): el is HTMLImageElement => el instanceof HTMLImageElement) ?? null;
+
+    if (newImage === this._trackedImageElement) {
+      return;
+    }
+
+    if (this._trackedImageElement) {
+      this._trackedImageElement.removeEventListener("error", this._handleImageError);
+      this._trackedImageElement.removeEventListener("load", this._handleImageLoad);
+    }
+
+    this._trackedImageElement = newImage;
+
+    if (newImage) {
+      newImage.addEventListener("error", this._handleImageError);
+      newImage.addEventListener("load", this._handleImageLoad);
+
+      if (newImage.complete && newImage.src) {
+        this._imageErrored = !newImage.naturalWidth;
+        return;
+      }
+    }
+
+    if (this._imageErrored) {
+      this._imageErrored = false;
+    }
+  }
+
   onAfterRendering(): void {
     this.title = this.initials;
+    this._syncImageListener();
   }
   handleClick(e: Event) {
     e.stopPropagation();
@@ -258,7 +307,7 @@ class UDExAvatar extends UI5Element {
   get udexAvatarClass(): string {
     let avatarClass = "udex-avatar";
 
-    if (this.imageSlot) {
+    if (this.imageSlot && !this._imageErrored) {
       avatarClass += " udex-avatar--with-image";
     }
 

package/src/AvatarTemplate.tsx

@@ -12,10 +12,10 @@ export default function AvatarTemplate(this: Avatar) {
       initials={this.initials}
       interactive={this.interactive}
       fallbackIcon={this.fallbackIcon}
-      icon={this.icon}
+      icon={this._imageErrored ? this.fallbackIcon : this.icon}
       shape={this.shape}
       size={this.size}>
-      {this.imageSlot && <slot></slot>}
+      {this.imageSlot && !this._imageErrored && <slot></slot>}
       {this.badgeSlot && <slot name="badge" slot="badge"></slot>}
     </UI5Avatar>
   );

package/src/CountrySelector.ts

@@ -154,6 +154,7 @@ class UDExCountrySelector extends UDExSelectBase {
   }
 
   handleDropdownClose(): void {
+    this._setActiveDescendant(null);
     this._open = false;
     this.fireEventDropdownClose();
   }

package/src/List.hbs

@@ -11,8 +11,9 @@
             <div
                 id="udex-list"
                 class="udex-list"
-                role="{{accessibleRole}}"
+                role="{{effectiveAccessibleRole}}"
                 aria-labelledby="{{ariaLabelledBy}}"
+                aria-multiselectable="{{_listAriaMultiSelectable}}"
                 aria-busy="{{ariaBusy}}">
                 <slot></slot>
             </div>

package/src/List.ts

@@ -478,12 +478,29 @@ class UDExList extends UI5Element {
   }
 
   prepareListItemsMode(): void {
+    const treeMode = this._hasCollapsibleGroups;
     this.getItemsFromList().forEach((item, index) => {
       item.mode = this.mode;
       item.controlled = this.controlled;
       item.type = this.type;
       item._icon = this.itemIcon;
       item._tabIndex = this.getTabIndex(index, item);
+      if (item.isGroup) {
+        // Only upgrade _treeMode to true; never force it to false, since
+        // SearchableListBaseTemplate may have set _tree-mode=true externally.
+        if (treeMode) {
+          item._treeMode = true;
+        }
+      } else if (treeMode) {
+        // Set accessibleRole for standalone List tree mode.
+        // Never overwrite a value already set by an external template (e.g. FilterMenu
+        // sets accessible-role="treeitem" on children via SearchableListBaseTemplate).
+        item.accessibleRole = "treeitem";
+        item.setAttribute("_list-managed-role", "");
+      } else if (item.getAttribute("_list-managed-role") !== null) {
+        item.accessibleRole = "";
+        item.removeAttribute("_list-managed-role");
+      }
     });
   }
 
@@ -566,6 +583,25 @@ class UDExList extends UI5Element {
   get holderHeight(): string {
     return this.height ? this.height : "auto";
   }
+
+  /** True when at least one slotted group header has the collapsible attribute. */
+  get _hasCollapsibleGroups(): boolean {
+    return this.getItems().some(item => item.isGroup && item.hasAttribute("collapsible"));
+  }
+
+  /**
+   * The effective ARIA role for the inner list div.
+   * When the list has collapsible group headers it uses the tree pattern so that
+   * JAWS enters application mode and delivers arrow-key events to the component.
+   */
+  get effectiveAccessibleRole(): string {
+    return this._hasCollapsibleGroups ? "tree" : this.accessibleRole;
+  }
+
+  /** aria-multiselectable exposed only for MultiSelect tree (collapsible groups). */
+  get _listAriaMultiSelectable(): string | undefined {
+    return (this._hasCollapsibleGroups && this.modeMultiSelect) ? "true" : undefined;
+  }
 }
 
 UDExList.define();

package/src/ListGroupHeaderBase.ts

@@ -219,6 +219,9 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
   }
 
   get groupWrapperRole(): string {
+    if (this._useHostAriaRole) {
+      return "presentation";
+    }
     return this._treeMode ? "none" : "group";
   }
 

package/src/ListItem.ts

@@ -366,11 +366,20 @@ class UDExListItem extends UDExListItemBase {
   }
 
   get roleItem(): string {
+    // When the host element carries the role (aria-activedescendant mode), the
+    // inner [part=item] div must be presentational to avoid a duplicate ARIA node.
+    if (this._useHostAriaRole) {
+      return "presentation";
+    }
+    return this.accessibleRole.length > 0 ? this.accessibleRole : listItemRole;
+  }
+
+  get effectiveRole(): string {
     return this.accessibleRole.length > 0 ? this.accessibleRole : listItemRole;
   }
 
   get ariaCheckedValue(): "true" | "false" | "mixed" | undefined {
-    if (this.roleItem !== "treeitem") {
+    if (this.effectiveRole !== "treeitem") {
       return undefined;
     }
     // Only MultiSelect treeitems expose aria-checked; SingleSelect uses aria-selected.
@@ -384,7 +393,7 @@ class UDExListItem extends UDExListItemBase {
   }
 
   get ariaSelectedValue(): "true" | "false" | undefined {
-    if (this.roleItem !== "treeitem") {
+    if (this.effectiveRole !== "treeitem") {
       return undefined;
     }
     // Only SingleSelect treeitems expose aria-selected; MultiSelect uses aria-checked.
@@ -402,7 +411,7 @@ class UDExListItem extends UDExListItemBase {
   }
 
   get checkboxAriaHidden(): boolean {
-    return this.roleItem === "treeitem";
+    return this.effectiveRole === "treeitem";
   }
 
   get _ariaDisabled(): boolean | undefined {

package/src/ListItemBase.ts

@@ -229,6 +229,17 @@ class UDExListItemBase extends UI5Element {
   @property({ type: Boolean })
     _filtered!: boolean;
 
+  /**
+   * When true, the host element carries role + ARIA state attributes directly
+   * (set by the outer template) so that aria-activedescendant works across shadow DOM.
+   * The inner [part=item] div is then rendered as role="presentation".
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _useHostAriaRole: boolean = false;
+
   /**
    * Defines the tab index of the component.
    *

package/src/ListSelectAll.ts

@@ -104,7 +104,7 @@ class UDExListSelectAll extends UDExListGroupHeaderBase {
   }
 
   get groupListClassName(): string {
-    return `${groupListClass} ${this._additionalClassName}`;
+    return groupListClass;
   }
 }
 

package/src/MediaPlayer.ts

@@ -338,7 +338,15 @@ class UDExMediaPlayer extends UI5Element {
 
   applyScrollIntoTheView() {
     const bigPlayButton = this.player.bigPlayButton?.el();
+    let mouseActivated = false;
+    bigPlayButton.addEventListener("mousedown", () => {
+      mouseActivated = true;
+    });
     bigPlayButton.addEventListener("focus", () => {
+      if (mouseActivated) {
+        mouseActivated = false;
+        return;
+      }
       this.player.el().scrollIntoView({
         behavior: "smooth",
         block: "center",

package/src/SearchableListBase.ts

@@ -268,6 +268,7 @@ class UDExSearchableListBase extends UI5Element {
   _shouldFilterItems?: boolean;
   _accSearchResultInfo?: string;
   _groupCollapseStateBeforeSearch: Map<string, boolean>;
+  _pendingHeightReset: boolean = false;
 
   constructor() {
     super();
@@ -282,6 +283,19 @@ class UDExSearchableListBase extends UI5Element {
     }
   }
 
+  onAfterRendering() {
+    if (this._pendingHeightReset) {
+      this._pendingHeightReset = false;
+      this.shadowRoot?.querySelectorAll<HTMLElement & { setContentHeight(): void }>("[udex-list-group-header]")
+        .forEach(header => {
+          if (header.hasAttribute("collapsible")) {
+            header.style.removeProperty("--udex-list-content-max-height");
+            header.setContentHeight();
+          }
+        });
+    }
+  }
+
   onItemPress(e:CustomEvent) {
     const dropdownItemId: string = this.getDataTokenId(e.detail.item as UDExListItemBase);
     this.handleDropdownItemPress(dropdownItemId);
@@ -484,21 +498,19 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   restoreGroupCollapseState(): void {
-    if (!this._groupCollapseStateBeforeSearch.size) {
-      return;
-    }
-
     this.items.forEach(item => {
       if (item.isGroup) {
-        const collapsed = this._groupCollapseStateBeforeSearch.get(item._id);
-
-        if (collapsed !== undefined) {
-          item.collapsed = collapsed;
+        if (this._groupCollapseStateBeforeSearch.size) {
+          const collapsed = this._groupCollapseStateBeforeSearch.get(item._id);
+          if (collapsed !== undefined) {
+            item.collapsed = collapsed;
+          }
         }
       }
     });
 
     this._groupCollapseStateBeforeSearch.clear();
+    this._pendingHeightReset = true;
   }
 
   getSlottedItems(items: Array<UDExListItemBase | UDExListGroupHeaderBase>): Array<UDExListItemBase | UDExListGroupHeaderBase> {
@@ -732,6 +744,17 @@ class UDExSearchableListBase extends UI5Element {
     return false;
   }
 
+  /**
+   * Whether items are navigated via aria-activedescendant (focus stays on the
+   * combobox input) rather than via DOM focus on each item.  When true,
+   * SearchableListBaseTemplate places role + ARIA state attrs on the host
+   * element of each list-item so that screen readers can read them through the
+   * aria-activedescendant pointer.
+   */
+  get _activeDescendantMode(): boolean {
+    return false;
+  }
+
   get additionalClassName(): string {
     return `udex-searchable-list__header`;
   }

package/src/SearchableListBaseTemplate.tsx

@@ -9,6 +9,7 @@ import UDExListItem from "./ListItem.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
 import UDExListSelectAll from "./ListSelectAll.js";
 import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+import { cleanLabel } from "./utils/listItemLabelUtils.js";
 
 export default function SearchableListBaseTemplate(this: UDExSearchableListBase) {
   return (
@@ -58,7 +59,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)
+              : renderListItem(processedItem.item as UDExListItem, index, "none", this.listItemRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this.modeMultiSelect)
           ))}
         </UDExList>
       )}
@@ -89,7 +90,7 @@ 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)
+        renderListItem(child as UDExListItem, i, this.listItemRole, undefined, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this.modeMultiSelect)
       )}
     </UDExListSelectAll>
   );
@@ -99,10 +100,22 @@ function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProc
   const { item, groupItems } = processedItem;
   const header = item as UDExListGroupHeaderBase;
   const childAccessibleRole = this.isTreeStructure ? "treeitem" : undefined;
+  // In aria-activedescendant mode (SelectBox), each group header host element
+  // must carry role + ARIA state so screen readers can reach them via the pointer.
+  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: (this.isTreeStructure ? "none" : "group") as AriaRole };
   return (
     <UDExListGroupHeader
       key={index}
-      role={this.isTreeStructure ? "none" : "group"}
+      id={item._id}
+      {...hostAriaAttrs}
       _tree-mode={this.isTreeStructure || undefined}
       {...(index === 0 ? { "_no-border": "" } : {})}
       _additional-class-name="udex-searchable-list__header"
@@ -121,7 +134,7 @@ function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProc
       onSecondIconClick={this.fireSecondIconClickEvent}
       indeterminate={header.indeterminate}>
       {groupItems.map((child, i) =>
-        renderListItem(child as UDExListItem, i, "none", childAccessibleRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent)
+        renderListItem(child as UDExListItem, i, "none", childAccessibleRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this.modeMultiSelect)
       )}
     </UDExListGroupHeader>
   );
@@ -134,11 +147,30 @@ function renderListItem(
   accessibleRole: string | undefined,
   onFirstIconClick: (e: CustomEvent) => void,
   onSecondIconClick: (e: CustomEvent) => void,
+  activeDescendantMode?: boolean,
+  isTreeStructure?: boolean,
+  modeMultiSelect?: boolean,
 ) {
+  // 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 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,
+    "aria-disabled": item.disabled ? "true" as string : undefined,
+    "_use-host-aria-role": true,
+    ...(accessibleRole ? { "accessible-role": accessibleRole } : {}),
+  } : {
+    ...(accessibleRole ? { "accessible-role": accessibleRole } : {}),
+  };
   return (
     <UDExListItem
       key={index}
-      role={role as AriaRole}
+      id={item._id}
+      role={hostRole}
       data-token-id={item._id}
       controlled={item.controlled}
       mode={item.mode}
@@ -164,7 +196,7 @@ function renderListItem(
       flag-position={item.flagPosition}
       size={item.size}
       type={item.type}
-      {...(accessibleRole ? { "accessible-role": accessibleRole } : {})}
+      {...hostAriaAttrs}
       {...((item as any).innerHTML ? { dangerouslySetInnerHTML: { __html: (item as any).innerHTML } } : {})}>
     </UDExListItem>
   );