@sapudex/web-components 2.51.0 → 2.52.0

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/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>
   );