@sapudex/web-components 2.50.0 → 2.52.0

package/dist/SearchableListBaseTemplate.js

@@ -6,10 +6,11 @@ import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
 import UDExListSelectAll from "./ListSelectAll.js";
+import { cleanLabel } from "./utils/listItemLabelUtils.js";
 export default function SearchableListBaseTemplate() {
     return (_jsxs(_Fragment, { children: [this.showSearch && (_jsxs(_Fragment, { children: [_jsx(UDExSearch, { slot: "header", mode: UDExSearchMode.Standard, class: "udex-filter-menu__search", label: this.searchPlaceholder, "label-animation-disabled": true, "non-interactive-submit-button": true, "show-submit-button": true }), _jsx("span", { "aria-live": "polite", "aria-atomic": "true", class: "hidden", children: this._accSearchResultInfo })] })), this.isListEmpty ? (_jsxs("div", { class: "udex-no-result", children: [_jsx(IllustratedMessage, { name: "NoSearchResults", design: "Dot", "title-text": " ", "subtitle-text": " " }), _jsx("span", { children: this.getNoResultText })] })) : this.busy ? (_jsx(UDExBusyIndicator, { class: "udex-busy-indicator", size: "M", delay: this.busyDelay, active: true })) : (_jsx(UDExList, { id: "udex-list", role: this.roleForGroupList, "accessible-role": this.accessibleRoleForList, ...(this.isTreeStructure && this.modeMultiSelect ? { "aria-multiselectable": "true" } : {}), class: "udex-filter-menu__list", controlled: this.isControlled, mode: this.mode, type: this.type, "item-icon": this.itemIcon, children: this._filteredItems.map((processedItem, index) => (processedItem.isGroup
                     ? renderGroup.call(this, processedItem, index)
-                    : renderListItem(processedItem.item, index, "none", this.listItemRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent))) }))] }));
+                    : renderListItem(processedItem.item, index, "none", this.listItemRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this.modeMultiSelect))) }))] }));
 }
 function renderGroup(processedItem, index) {
     return processedItem.item.isSelectAllHeader
@@ -19,15 +20,41 @@ function renderGroup(processedItem, index) {
 function renderSelectAll(processedItem, index) {
     const { item, groupItems } = processedItem;
     const header = item;
-    return (_jsx(UDExListSelectAll, { "_additional-class-name": this.additionalClassName, "data-token-id": item._id, label: item.label, controlled: header.controlled, "supporting-text": item.supportingText, disabled: item.disabled, selected: item.selected, indeterminate: header.indeterminate, onFirstIconClick: this.fireFirstIconClickEvent, onSecondIconClick: this.fireSecondIconClickEvent, children: groupItems.map((child, i) => renderListItem(child, i, this.listItemRole, undefined, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent)) }, index));
+    return (_jsx(UDExListSelectAll, { "_additional-class-name": this.additionalClassName, "data-token-id": item._id, label: item.label, controlled: header.controlled, "supporting-text": item.supportingText, disabled: item.disabled, selected: item.selected, indeterminate: header.indeterminate, onFirstIconClick: this.fireFirstIconClickEvent, onSecondIconClick: this.fireSecondIconClickEvent, children: groupItems.map((child, i) => renderListItem(child, i, this.listItemRole, undefined, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this.modeMultiSelect)) }, index));
 }
 function renderGroupHeader(processedItem, index) {
     const { item, groupItems } = processedItem;
     const header = item;
     const childAccessibleRole = this.isTreeStructure ? "treeitem" : undefined;
-    return (_jsx(UDExListGroupHeader, { role: this.isTreeStructure ? "none" : "group", "_tree-mode": this.isTreeStructure || undefined, ...(index === 0 ? { "_no-border": "" } : {}), "_additional-class-name": "udex-searchable-list__header", class: this.groupClassName, "non-interactive": header.nonInteractive, "data-token-id": item._id, label: item.label, "supporting-text": item.supportingText, controlled: header.controlled, collapsible: header.collapsible, collapsed: header.collapsed, _filtered: this._shouldFilterItems, disabled: item.disabled, selected: item.selected, onFirstIconClick: this.fireFirstIconClickEvent, onSecondIconClick: this.fireSecondIconClickEvent, indeterminate: header.indeterminate, children: groupItems.map((child, i) => renderListItem(child, i, "none", childAccessibleRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent)) }, index));
+    // 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"),
+        "aria-label": cleanLabel(item.label ?? ""),
+        "aria-selected": (this.modeMultiSelect ? undefined : (item.selected ? "true" : "false")),
+        "aria-checked": (this.modeMultiSelect ? (header.indeterminate ? "mixed" : (item.selected ? "true" : "false")) : undefined),
+        "aria-disabled": item.disabled ? "true" : undefined,
+        "aria-expanded": header.collapsible ? (header.expanded ? "true" : "false") : undefined,
+        "_use-host-aria-role": true,
+    } : { role: (this.isTreeStructure ? "none" : "group") };
+    return (_jsx(UDExListGroupHeader, { id: item._id, ...hostAriaAttrs, "_tree-mode": this.isTreeStructure || undefined, ...(index === 0 ? { "_no-border": "" } : {}), "_additional-class-name": "udex-searchable-list__header", class: this.groupClassName, "non-interactive": header.nonInteractive, "data-token-id": item._id, label: item.label, "supporting-text": item.supportingText, controlled: header.controlled, collapsible: header.collapsible, collapsed: header.collapsed, _filtered: this._shouldFilterItems, disabled: item.disabled, selected: item.selected, onFirstIconClick: this.fireFirstIconClickEvent, onSecondIconClick: this.fireSecondIconClickEvent, indeterminate: header.indeterminate, children: groupItems.map((child, i) => renderListItem(child, i, "none", childAccessibleRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this.modeMultiSelect)) }, index));
 }
-function renderListItem(item, index, role, accessibleRole, onFirstIconClick, onSecondIconClick) {
-    return (_jsx(UDExListItem, { role: role, "data-token-id": item._id, controlled: item.controlled, mode: item.mode, onFirstIconClick: onFirstIconClick, onSecondIconClick: onSecondIconClick, "supporting-text": item.supportingText, "additional-text": item.additionalText, "additional-text-state": item.additionalTextState, divider: item.divider, disabled: item.disabled, selected: item.selected, rating: item.rating, "total-count": item.totalCount, "rating-count": item.ratingCount, "rating-max": item.ratingMax, label: item.label, image: item.image, "image-alt": item.imageAlt, "image-badge-state": item.imageBadgeState, "image-shape": item.imageShape, "image-size": item.imageSize, flag: item.flag, "flag-position": item.flagPosition, size: item.size, type: item.type, ...(accessibleRole ? { "accessible-role": accessibleRole } : {}), ...(item.innerHTML ? { dangerouslySetInnerHTML: { __html: item.innerHTML } } : {}) }, index));
+function renderListItem(item, index, role, accessibleRole, onFirstIconClick, onSecondIconClick, activeDescendantMode, isTreeStructure, modeMultiSelect) {
+    // 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 : role;
+    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") : undefined,
+        "aria-checked": (effectiveRole === "treeitem" && !!modeMultiSelect) ? (item.indeterminate ? "mixed" : (item.selected ? "true" : "false")) : undefined,
+        "aria-disabled": item.disabled ? "true" : undefined,
+        "_use-host-aria-role": true,
+        ...(accessibleRole ? { "accessible-role": accessibleRole } : {}),
+    } : {
+        ...(accessibleRole ? { "accessible-role": accessibleRole } : {}),
+    };
+    return (_jsx(UDExListItem, { id: item._id, role: hostRole, "data-token-id": item._id, controlled: item.controlled, mode: item.mode, onFirstIconClick: onFirstIconClick, onSecondIconClick: onSecondIconClick, "supporting-text": item.supportingText, "additional-text": item.additionalText, "additional-text-state": item.additionalTextState, divider: item.divider, disabled: item.disabled, selected: item.selected, rating: item.rating, "total-count": item.totalCount, "rating-count": item.ratingCount, "rating-max": item.ratingMax, label: item.label, image: item.image, "image-alt": item.imageAlt, "image-badge-state": item.imageBadgeState, "image-shape": item.imageShape, "image-size": item.imageSize, flag: item.flag, "flag-position": item.flagPosition, size: item.size, type: item.type, ...hostAriaAttrs, ...(item.innerHTML ? { dangerouslySetInnerHTML: { __html: item.innerHTML } } : {}) }, index));
 }
 //# sourceMappingURL=SearchableListBaseTemplate.js.map

package/dist/SearchableListBaseTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchableListBaseTemplate.js","sourceRoot":"","sources":["../src/SearchableListBaseTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type UDExSearchableListBase from \"./SearchableListBase.js\";\nimport type { UDExProcessedItem } from \"./types/SearchableListBase.js\";\nimport type UDExListGroupHeaderBase from \"./ListGroupHeaderBase.js\";\nimport UDExSearch, { Mode as UDExSearchMode } from \"./Search.js\";\nimport IllustratedMessage from \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";\nimport UDExBusyIndicator from \"./BusyIndicator.js\";\nimport UDExList from \"./List.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport UDExListGroupHeader from \"./ListGroupHeader.js\";\nimport UDExListSelectAll from \"./ListSelectAll.js\";\nimport type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\n\nexport default function SearchableListBaseTemplate(this: UDExSearchableListBase) {\n  return (\n    <>\n      {this.showSearch && (\n        <>\n          <UDExSearch\n            slot=\"header\"\n            mode={UDExSearchMode.Standard}\n            class=\"udex-filter-menu__search\"\n            label={this.searchPlaceholder}\n            label-animation-disabled\n            non-interactive-submit-button\n            show-submit-button>\n          </UDExSearch>\n          <span aria-live=\"polite\" aria-atomic=\"true\" class=\"hidden\">{this._accSearchResultInfo}</span>\n        </>\n      )}\n      {this.isListEmpty ? (\n        <div class=\"udex-no-result\">\n          <IllustratedMessage\n            name=\"NoSearchResults\"\n            design=\"Dot\"\n            title-text=\" \"\n            subtitle-text=\" \">\n          </IllustratedMessage>\n          <span>{this.getNoResultText}</span>\n        </div>\n      ) : this.busy ? (\n        <UDExBusyIndicator\n          class=\"udex-busy-indicator\"\n          size=\"M\"\n          delay={this.busyDelay}\n          active>\n        </UDExBusyIndicator>\n      ) : (\n        <UDExList\n          id=\"udex-list\"\n          role={this.roleForGroupList as AriaRole}\n          accessible-role={this.accessibleRoleForList}\n          {...(this.isTreeStructure && this.modeMultiSelect ? { \"aria-multiselectable\": \"true\" } : {})}\n          class=\"udex-filter-menu__list\"\n          controlled={this.isControlled}\n          mode={this.mode}\n          type={this.type}\n          item-icon={this.itemIcon}>\n          {this._filteredItems.map((processedItem, index) => (\n            processedItem.isGroup\n              ? renderGroup.call(this, processedItem, index)\n              : renderListItem(processedItem.item as UDExListItem, index, \"none\", this.listItemRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent)\n          ))}\n        </UDExList>\n      )}\n    </>\n  );\n}\n\nfunction renderGroup(this: UDExSearchableListBase, processedItem: UDExProcessedItem, index: number) {\n  return (processedItem.item as UDExListGroupHeaderBase).isSelectAllHeader\n    ? renderSelectAll.call(this, processedItem, index)\n    : renderGroupHeader.call(this, processedItem, index);\n}\n\nfunction renderSelectAll(this: UDExSearchableListBase, processedItem: UDExProcessedItem, index: number) {\n  const { item, groupItems } = processedItem;\n  const header = item as UDExListGroupHeaderBase;\n  return (\n    <UDExListSelectAll\n      key={index}\n      _additional-class-name={this.additionalClassName}\n      data-token-id={item._id}\n      label={item.label}\n      controlled={header.controlled}\n      supporting-text={item.supportingText}\n      disabled={item.disabled}\n      selected={item.selected}\n      indeterminate={header.indeterminate}\n      onFirstIconClick={this.fireFirstIconClickEvent}\n      onSecondIconClick={this.fireSecondIconClickEvent}>\n      {groupItems.map((child, i) =>\n        renderListItem(child as UDExListItem, i, this.listItemRole, undefined, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent)\n      )}\n    </UDExListSelectAll>\n  );\n}\n\nfunction renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProcessedItem, index: number) {\n  const { item, groupItems } = processedItem;\n  const header = item as UDExListGroupHeaderBase;\n  const childAccessibleRole = this.isTreeStructure ? \"treeitem\" : undefined;\n  return (\n    <UDExListGroupHeader\n      key={index}\n      role={this.isTreeStructure ? \"none\" : \"group\"}\n      _tree-mode={this.isTreeStructure || undefined}\n      {...(index === 0 ? { \"_no-border\": \"\" } : {})}\n      _additional-class-name=\"udex-searchable-list__header\"\n      class={this.groupClassName}\n      non-interactive={header.nonInteractive}\n      data-token-id={item._id}\n      label={item.label}\n      supporting-text={item.supportingText}\n      controlled={header.controlled}\n      collapsible={header.collapsible}\n      collapsed={header.collapsed}\n      _filtered={this._shouldFilterItems}\n      disabled={item.disabled}\n      selected={item.selected}\n      onFirstIconClick={this.fireFirstIconClickEvent}\n      onSecondIconClick={this.fireSecondIconClickEvent}\n      indeterminate={header.indeterminate}>\n      {groupItems.map((child, i) =>\n        renderListItem(child as UDExListItem, i, \"none\", childAccessibleRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent)\n      )}\n    </UDExListGroupHeader>\n  );\n}\n\nfunction renderListItem(\n  item: UDExListItem,\n  index: number,\n  role: string,\n  accessibleRole: string | undefined,\n  onFirstIconClick: (e: CustomEvent) => void,\n  onSecondIconClick: (e: CustomEvent) => void,\n) {\n  return (\n    <UDExListItem\n      key={index}\n      role={role as AriaRole}\n      data-token-id={item._id}\n      controlled={item.controlled}\n      mode={item.mode}\n      onFirstIconClick={onFirstIconClick}\n      onSecondIconClick={onSecondIconClick}\n      supporting-text={item.supportingText}\n      additional-text={item.additionalText}\n      additional-text-state={item.additionalTextState}\n      divider={item.divider}\n      disabled={item.disabled}\n      selected={item.selected}\n      rating={item.rating}\n      total-count={item.totalCount}\n      rating-count={item.ratingCount}\n      rating-max={item.ratingMax}\n      label={item.label}\n      image={item.image}\n      image-alt={item.imageAlt}\n      image-badge-state={item.imageBadgeState}\n      image-shape={item.imageShape}\n      image-size={item.imageSize}\n      flag={item.flag}\n      flag-position={item.flagPosition}\n      size={item.size}\n      type={item.type}\n      {...(accessibleRole ? { \"accessible-role\": accessibleRole } : {})}\n      {...((item as any).innerHTML ? { dangerouslySetInnerHTML: { __html: (item as any).innerHTML } } : {})}>\n    </UDExListItem>\n  );\n}\n"]}
+{"version":3,"file":"SearchableListBaseTemplate.js","sourceRoot":"","sources":["../src/SearchableListBaseTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type UDExSearchableListBase from \"./SearchableListBase.js\";\nimport type { UDExProcessedItem } from \"./types/SearchableListBase.js\";\nimport type UDExListGroupHeaderBase from \"./ListGroupHeaderBase.js\";\nimport UDExSearch, { Mode as UDExSearchMode } from \"./Search.js\";\nimport IllustratedMessage from \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";\nimport UDExBusyIndicator from \"./BusyIndicator.js\";\nimport UDExList from \"./List.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport UDExListGroupHeader from \"./ListGroupHeader.js\";\nimport UDExListSelectAll from \"./ListSelectAll.js\";\nimport type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { cleanLabel } from \"./utils/listItemLabelUtils.js\";\n\nexport default function SearchableListBaseTemplate(this: UDExSearchableListBase) {\n  return (\n    <>\n      {this.showSearch && (\n        <>\n          <UDExSearch\n            slot=\"header\"\n            mode={UDExSearchMode.Standard}\n            class=\"udex-filter-menu__search\"\n            label={this.searchPlaceholder}\n            label-animation-disabled\n            non-interactive-submit-button\n            show-submit-button>\n          </UDExSearch>\n          <span aria-live=\"polite\" aria-atomic=\"true\" class=\"hidden\">{this._accSearchResultInfo}</span>\n        </>\n      )}\n      {this.isListEmpty ? (\n        <div class=\"udex-no-result\">\n          <IllustratedMessage\n            name=\"NoSearchResults\"\n            design=\"Dot\"\n            title-text=\" \"\n            subtitle-text=\" \">\n          </IllustratedMessage>\n          <span>{this.getNoResultText}</span>\n        </div>\n      ) : this.busy ? (\n        <UDExBusyIndicator\n          class=\"udex-busy-indicator\"\n          size=\"M\"\n          delay={this.busyDelay}\n          active>\n        </UDExBusyIndicator>\n      ) : (\n        <UDExList\n          id=\"udex-list\"\n          role={this.roleForGroupList as AriaRole}\n          accessible-role={this.accessibleRoleForList}\n          {...(this.isTreeStructure && this.modeMultiSelect ? { \"aria-multiselectable\": \"true\" } : {})}\n          class=\"udex-filter-menu__list\"\n          controlled={this.isControlled}\n          mode={this.mode}\n          type={this.type}\n          item-icon={this.itemIcon}>\n          {this._filteredItems.map((processedItem, index) => (\n            processedItem.isGroup\n              ? renderGroup.call(this, processedItem, index)\n              : renderListItem(processedItem.item as UDExListItem, index, \"none\", this.listItemRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this.modeMultiSelect)\n          ))}\n        </UDExList>\n      )}\n    </>\n  );\n}\n\nfunction renderGroup(this: UDExSearchableListBase, processedItem: UDExProcessedItem, index: number) {\n  return (processedItem.item as UDExListGroupHeaderBase).isSelectAllHeader\n    ? renderSelectAll.call(this, processedItem, index)\n    : renderGroupHeader.call(this, processedItem, index);\n}\n\nfunction renderSelectAll(this: UDExSearchableListBase, processedItem: UDExProcessedItem, index: number) {\n  const { item, groupItems } = processedItem;\n  const header = item as UDExListGroupHeaderBase;\n  return (\n    <UDExListSelectAll\n      key={index}\n      _additional-class-name={this.additionalClassName}\n      data-token-id={item._id}\n      label={item.label}\n      controlled={header.controlled}\n      supporting-text={item.supportingText}\n      disabled={item.disabled}\n      selected={item.selected}\n      indeterminate={header.indeterminate}\n      onFirstIconClick={this.fireFirstIconClickEvent}\n      onSecondIconClick={this.fireSecondIconClickEvent}>\n      {groupItems.map((child, i) =>\n        renderListItem(child as UDExListItem, i, this.listItemRole, undefined, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this.modeMultiSelect)\n      )}\n    </UDExListSelectAll>\n  );\n}\n\nfunction renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProcessedItem, index: number) {\n  const { item, groupItems } = processedItem;\n  const header = item as UDExListGroupHeaderBase;\n  const childAccessibleRole = this.isTreeStructure ? \"treeitem\" : undefined;\n  // In aria-activedescendant mode (SelectBox), each group header host element\n  // must carry role + ARIA state so screen readers can reach them via the pointer.\n  const hostAriaAttrs = this._activeDescendantMode ? {\n    role: (this.isTreeStructure ? \"treeitem\" : \"option\") as AriaRole,\n    \"aria-label\": cleanLabel(item.label ?? \"\"),\n    \"aria-selected\": (this.modeMultiSelect ? undefined : (item.selected ? \"true\" : \"false\")) as string | undefined,\n    \"aria-checked\": (this.modeMultiSelect ? (header.indeterminate ? \"mixed\" : (item.selected ? \"true\" : \"false\")) : undefined) as string | undefined,\n    \"aria-disabled\": item.disabled ? \"true\" as string : undefined,\n    \"aria-expanded\": header.collapsible ? (header.expanded ? \"true\" as string : \"false\" as string) : undefined,\n    \"_use-host-aria-role\": true,\n  } : { role: (this.isTreeStructure ? \"none\" : \"group\") as AriaRole };\n  return (\n    <UDExListGroupHeader\n      key={index}\n      id={item._id}\n      {...hostAriaAttrs}\n      _tree-mode={this.isTreeStructure || undefined}\n      {...(index === 0 ? { \"_no-border\": \"\" } : {})}\n      _additional-class-name=\"udex-searchable-list__header\"\n      class={this.groupClassName}\n      non-interactive={header.nonInteractive}\n      data-token-id={item._id}\n      label={item.label}\n      supporting-text={item.supportingText}\n      controlled={header.controlled}\n      collapsible={header.collapsible}\n      collapsed={header.collapsed}\n      _filtered={this._shouldFilterItems}\n      disabled={item.disabled}\n      selected={item.selected}\n      onFirstIconClick={this.fireFirstIconClickEvent}\n      onSecondIconClick={this.fireSecondIconClickEvent}\n      indeterminate={header.indeterminate}>\n      {groupItems.map((child, i) =>\n        renderListItem(child as UDExListItem, i, \"none\", childAccessibleRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this.modeMultiSelect)\n      )}\n    </UDExListGroupHeader>\n  );\n}\n\nfunction renderListItem(\n  item: UDExListItem,\n  index: number,\n  role: string,\n  accessibleRole: string | undefined,\n  onFirstIconClick: (e: CustomEvent) => void,\n  onSecondIconClick: (e: CustomEvent) => void,\n  activeDescendantMode?: boolean,\n  isTreeStructure?: boolean,\n  modeMultiSelect?: boolean,\n) {\n  // In aria-activedescendant mode (SelectBox), role + ARIA state must be on the\n  // host element so screen readers can reach them via the aria-activedescendant pointer.\n  const effectiveRole = accessibleRole ?? (role !== \"none\" ? role : undefined) ?? \"option\";\n  const hostRole = activeDescendantMode ? (effectiveRole as AriaRole) : (role as AriaRole);\n  const hostAriaAttrs = activeDescendantMode ? {\n    \"aria-label\": \"test\",\n    // option role (listbox): always aria-selected; treeitem + MultiSelect: aria-checked only\n    \"aria-selected\": (effectiveRole !== \"treeitem\" || !modeMultiSelect) ? (item.selected ? \"true\" : \"false\") as string : undefined,\n    \"aria-checked\": (effectiveRole === \"treeitem\" && !!modeMultiSelect) ? (item.indeterminate ? \"mixed\" : (item.selected ? \"true\" : \"false\")) as string : undefined,\n    \"aria-disabled\": item.disabled ? \"true\" as string : undefined,\n    \"_use-host-aria-role\": true,\n    ...(accessibleRole ? { \"accessible-role\": accessibleRole } : {}),\n  } : {\n    ...(accessibleRole ? { \"accessible-role\": accessibleRole } : {}),\n  };\n  return (\n    <UDExListItem\n      key={index}\n      id={item._id}\n      role={hostRole}\n      data-token-id={item._id}\n      controlled={item.controlled}\n      mode={item.mode}\n      onFirstIconClick={onFirstIconClick}\n      onSecondIconClick={onSecondIconClick}\n      supporting-text={item.supportingText}\n      additional-text={item.additionalText}\n      additional-text-state={item.additionalTextState}\n      divider={item.divider}\n      disabled={item.disabled}\n      selected={item.selected}\n      rating={item.rating}\n      total-count={item.totalCount}\n      rating-count={item.ratingCount}\n      rating-max={item.ratingMax}\n      label={item.label}\n      image={item.image}\n      image-alt={item.imageAlt}\n      image-badge-state={item.imageBadgeState}\n      image-shape={item.imageShape}\n      image-size={item.imageSize}\n      flag={item.flag}\n      flag-position={item.flagPosition}\n      size={item.size}\n      type={item.type}\n      {...hostAriaAttrs}\n      {...((item as any).innerHTML ? { dangerouslySetInnerHTML: { __html: (item as any).innerHTML } } : {})}>\n    </UDExListItem>\n  );\n}\n"]}

package/dist/SelectBase.d.ts

@@ -120,6 +120,22 @@ declare class UDExSelectBase extends UDExSearchableListBase {
      * @private
      */
     _requestRender: boolean;
+    /**
+     * True while keyboard list navigation is active (aria-activedescendant set).
+     * Used in CSS to suppress the input focus ring and show the active item ring.
+     *
+     * @private
+     */
+    _navigating: boolean;
+    /**
+     * Text read by screen readers when the active item changes.
+     * Announced via an aria-live="assertive" region in the template.
+     * This works regardless of shadow DOM / popover teleportation because
+     * the live region lives inside SelectBox's own shadow root.
+     *
+     * @private
+     */
+    _liveRegionText: string;
     /**
      * Defines the footer content for the component dropdown.
      * Place any content (e.g. an action button) here. Clicking footer content does not close the dropdown —
@@ -144,14 +160,35 @@ declare class UDExSelectBase extends UDExSearchableListBase {
     _handleResizeBound: ResizeObserverCallback;
     _handleListKeyDownBound: (e: KeyboardEvent) => void;
     _listKeyDownListenerAdded: boolean;
+    _activeDescendantItem: UDExListItemBase | null;
     constructor();
     onEnterDOM(): void;
     onExitDOM(): void;
     onInvalidation({ name }: ChangeInfo): void;
     onAfterRendering(): void;
     _handleResize(): void;
+    /**
+     * Given a candidate index, skips over a non-interactive non-collapsible header if needed.
+     * Returns the effective target index.
+     */
+    _skipNonInteractive(items: UDExListItemBase[], raw: number, lastIndex: number, direction: "down" | "up"): number;
+    /**
+     * Sets or clears the aria-activedescendant on the combobox input and updates
+     * the aria-live region so JAWS/VoiceOver announce the item name and position.
+     * The live region is the primary announcement mechanism because aria-activedescendant
+     * across a UI5 Popover (which teleports content to document.body) is unreliable —
+     * screen readers cannot follow the ID reference across shadow root boundaries.
+     */
+    _setActiveDescendant(item: UDExListItemBase | null, scroll?: boolean): void;
+    /**
+     * Activates the first navigable item as the aria-activedescendant without moving DOM focus.
+     */
+    _activateFirstItem(): void;
+    /**
+     * Navigates to the item at the given index, updating aria-activedescendant and _selectedOption.
+     */
+    _navigateToIndex(items: UDExListItemBase[], nextIndex: number): void;
     handleKeyDownDropdown(e: KeyboardEvent): void;
-    handleListNavigationKeys(e: KeyboardEvent, items: UDExListItemBase[], effectiveTarget?: UDExListItemBase): void;
     handleEndKeyPress(items: UDExListItemBase[], lastItemIndex: number): void;
     handleHomeKeyPress(items: UDExListItemBase[]): void;
     handleDownKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number): void;
@@ -161,10 +198,24 @@ declare class UDExSelectBase extends UDExSearchableListBase {
     handleItemSelection(e: CustomEvent): void;
     onKeyDownSearch(e: KeyboardEvent): void;
     handleSearchChange(e: InputEvent): void;
+    onSearch(value: string): void;
     handleDirection(): void;
     handleDropdownBeforeClose(): void;
     dropdownBeforeOpen(): void;
     handleDropdownOpen(): void;
+    /**
+     * Announces the currently active descendant item (if set), or the first
+     * navigable item as a fallback. Used on open and after state changes.
+     */
+    _announceCurrentOrFirst(): void;
+    /**
+     * Returns the positional announcement text for an item, tree-aware when the
+     * list has groups. Matches the JAWS reading pattern of FilterMenu:
+     *   group header → "level 0, X of Y"  (Y = total navigable groups)
+     *   group child  → "level 1, X of Y"  (Y = siblings in that group)
+     *   flat item    → "X of Y"           (Y = total items, no level prefix)
+     */
+    _treePositionText(item: UDExListItemBase): string;
     fireEventDropdownBeforeOClose(): void;
     fireEventDropdownBeforeOpen(): void;
     fireEventDropdownOpen(): void;
@@ -200,6 +251,16 @@ declare class UDExSelectBase extends UDExSearchableListBase {
     _focusLastListItem(): void;
     _firstFocusableIn(el: Element | undefined): HTMLElement | null;
     _moveFocusAfterComponent(): void;
+    /**
+     * Builds the state portion of the live region announcement for a navigation item.
+     * Returns an array of state strings (e.g. ["collapsed", "Checked"]) to be joined
+     * with the label and position. Handles:
+     *   - collapsible group headers: expanded / collapsed
+     *   - MultiSelect: Checked / Unchecked / Indeterminate
+     *   - SingleSelect (tree): Selected / Unselected
+     *   - disabled: Disabled
+     */
+    _itemStateLabels(item: UDExListItemBase): string[];
     get ariaDescribedbyText(): string;
     get trigger(): HTMLElement;
     get isDisabled(): boolean;
@@ -212,6 +273,9 @@ declare class UDExSelectBase extends UDExSearchableListBase {
     };
     get popoverId(): string;
     get listboxRole(): AriaHasPopup;
+    get listAriaControlsId(): string;
+    get _activeDescendantMode(): boolean;
+    get isTreeStructure(): boolean;
     get hideDropdownSearch(): boolean;
     get showImageFlags(): boolean;
     get searchableList(): object;