@sapudex/web-components 2.50.0 → 2.52.0

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