@sapudex/web-components 2.61.0 → 2.63.0

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 (
@@ -32,9 +35,9 @@ export default function SearchableListBaseTemplate(this: UDExSearchableListBase)
         <div class="udex-no-result">
           <IllustratedMessage
             name="NoSearchResults"
-            design="Dot"
-            title-text=" "
-            subtitle-text=" ">
+            design="Dot">
+            <div slot="title"></div>
+            <div slot="subtitle"></div>
           </IllustratedMessage>
           <span>{this.getNoResultText}</span>
         </div>
@@ -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,33 +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 ? {
-    // 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,