@sapudex/web-components 2.61.0 → 2.62.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.61.0",
+  "version": "2.62.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/AccordionSpotlight.ts

@@ -75,13 +75,14 @@ class UDExAccordionSpotlight extends UI5Element {
   };
 
   /**
-   * The index of the currently expanded item (0-based).
-   * Derived from items' <code>selected</code> attribute; kept in sync by the parent.
+   * The index of the currently expanded item (0-based), or <code>-1</code> when
+   * no item is expanded. Derived from items' <code>selected</code> attribute;
+   * kept in sync by the parent.
    *
    * @private
    */
   @property({ type: Number, noAttribute: true })
-    _selectedIndex: number = 0;
+    _selectedIndex: number = -1;
 
   /**
    * Vertical alignment of the navigation sidebar relative to the content panel.
@@ -155,9 +156,18 @@ class UDExAccordionSpotlight extends UI5Element {
   /**
    * The slotted AccordionSpotlightItem elements.
    *
+   * <code>invalidateOnChildChange</code> lets the component react when an item's
+   * <code>selected</code> property is set programmatically, so
+   * <code>item.selected = true</code> switches the expanded item at runtime.
+   *
    * @public
    */
-  @slot({ type: HTMLElement, "default": true, individualSlots: true })
+  @slot({
+    type: HTMLElement,
+    "default": true,
+    individualSlots: true,
+    invalidateOnChildChange: true,
+  })
     items!: DefaultSlot<AccordionSpotlightItem>;
 
   /**
@@ -235,8 +245,27 @@ class UDExAccordionSpotlight extends UI5Element {
       return;
     }
 
-    const foundIndex = this.items.findIndex(item => item.selected);
-    const activeIndex = foundIndex === -1 ? 0 : foundIndex;
+    const selectedIndexes = this.items.reduce<number[]>((acc, item, index) => {
+      if (item.selected) {
+        acc.push(index);
+      }
+      return acc;
+    }, []);
+
+    // Prefer a selected item that differs from the currently tracked index — it
+    // signals a selection requested via `item.selected = true`. Otherwise keep
+    // the current index if it is still selected. When no item is selected, leave
+    // the component with no active item (-1) rather than forcing the first one.
+    let activeIndex: number;
+    const newlySelected = selectedIndexes.find(index => index !== this._selectedIndex);
+    if (newlySelected !== undefined) {
+      activeIndex = newlySelected;
+    } else if (selectedIndexes.includes(this._selectedIndex)) {
+      activeIndex = this._selectedIndex;
+    } else {
+      activeIndex = selectedIndexes[0] ?? -1;
+    }
+
     this._selectedIndex = activeIndex;
 
     this.items.forEach((item, index) => {

package/src/AccordionSpotlightItem.ts

@@ -57,7 +57,9 @@ class UDExAccordionSpotlightItem extends UI5Element {
 
   /**
    * Whether this item is currently expanded.
-   * Set on the element directly to control the initial selection.
+   * Set on the element directly to control the initial selection, or at runtime
+   * (<code>item.selected = true</code>) to expand this item programmatically —
+   * the parent deselects the other items automatically.
    *
    * @default false
    * @public

package/src/Carousel.ts

@@ -369,8 +369,7 @@ class UDExCarousel extends UI5Element {
       return;
     }
 
-    this._carousel.navigateArrowLeft();
-    this._calculateDisabledButtonsState();
+    this._navigateToPage(-1);
   }
 
   _nextButtonClick() {
@@ -378,7 +377,27 @@ class UDExCarousel extends UI5Element {
       return;
     }
 
-    this._carousel.navigateArrowRight();
+    this._navigateToPage(1);
+  }
+
+  _navigateToPage(direction: 1 | -1) {
+    const carousel = this._carousel;
+    if (!carousel) {
+      return;
+    }
+
+    let newPageIndex = carousel._currentPageIndex + direction;
+
+    if (this.cyclic) {
+      const lastPageIndex = carousel.items.length - carousel.effectiveItemsPerPage;
+      if (newPageIndex > lastPageIndex) {
+        newPageIndex = 0;
+      } else if (newPageIndex < 0) {
+        newPageIndex = carousel.items.length - 1;
+      }
+    }
+
+    carousel._changePageIndex(newPageIndex);
     this._calculateDisabledButtonsState();
   }
 

package/src/CountrySelector.ts

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

package/src/List.ts

@@ -174,6 +174,14 @@ class UDExList extends UI5Element {
   static i18nBundle: I18nBundle;
 
   onBeforeRendering(): void {
+    if (this._hasHostAriaRole) {
+      const label = this.modeSelected ? this.ariaLabelModeText : this.singleContentAriaLabel;
+      if (label) {
+        this.setAttribute("aria-label", label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
+    }
     this.prepareListItemsMode();
     this._focusHandler.resetMatchingItems();
     this._focusHandler._focusableListItems = this.getKeyboardNavigationItems();
@@ -495,7 +503,7 @@ class UDExList extends UI5Element {
   }
 
   prepareListItemsMode(): void {
-    const treeMode = this._hasCollapsibleGroups;
+    const treeMode = this.modeSelected && this._hasCollapsibleGroups;
     this.getItemsFromList().forEach((item, index) => {
       item.mode = this.mode;
       item.controlled = this.controlled;
@@ -503,10 +511,14 @@ class UDExList extends UI5Element {
       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) {
+        // Track only List-owned upgrades so mode changes can reset them without
+        // removing tree semantics supplied by SelectBox/SearchableListBase.
+        if (treeMode && !item._treeMode) {
           item._treeMode = true;
+          item.setAttribute("_list-managed-tree-mode", "");
+        } else if (!treeMode && item.hasAttribute("_list-managed-tree-mode")) {
+          item._treeMode = false;
+          item.removeAttribute("_list-managed-tree-mode");
         }
       } else if (treeMode) {
         // Set accessibleRole for standalone List tree mode.
@@ -615,6 +627,11 @@ class UDExList extends UI5Element {
     return this._hasCollapsibleGroups ? "tree" : this.accessibleRole;
   }
 
+  /** @private Whether the list's owning role is already exposed on its host. */
+  get _hasHostAriaRole(): boolean {
+    return ["tree", "listbox", "list"].includes(this.getAttribute("role") || "");
+  }
+
   /**
    * Role for SingleContent mode. listbox/option is for selection widgets only;
    * SingleContent is informational so "list"/"listitem" is the correct semantic.

package/src/ListGroupHeader.ts

@@ -7,7 +7,7 @@ import {
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import ListGroupHeaderTemplate from "./ListGroupHeaderTemplate.js";
-import { UDExListItemSize } from "./types/List.js";
+import { UDExListItemSize, UDExListMode } from "./types/List.js";
 import type { UDExListItemBaseEvents } from "./ListItemBase.js";
 import type UDExListItemBase from "./ListItemBase.js";
 
@@ -85,6 +85,10 @@ class UDExListGroupHeader extends UDExListGroupHeaderBase {
   }
 
   handleKeyDown(e: KeyboardEvent) {
+    if (this.mode === UDExListMode.SingleContent && (isEnter(e) || isSpace(e))) {
+      this.handleCollapseIconClick(e);
+      return;
+    }
     if (isLeft(e) && !this.collapsed) {
       this.handleCollapseIconClick(e);
       return;

package/src/ListGroupHeaderBase.ts

@@ -4,6 +4,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import UDExListItemBase from "./ListItemBase.js";
+import { UDExListMode } from "./types/List.js";
 
 const listGroupHeaderClass: string = "udex-list__group-header";
 
@@ -220,7 +221,14 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
   }
 
   get isTreeAccessibleRole(): boolean {
-    return this._treeMode;
+    // Host-owned tree semantics must not depend on the child's rendering order
+    // or a subsequent List mode-preparation pass.
+    return this._treeMode || (this._useHostAriaRole && this.getAttribute("role") === "treeitem");
+  }
+
+  /** @private Informational groups outside a host-owned or externally supplied tree. */
+  get isSingleContentList(): boolean {
+    return this.mode === UDExListMode.SingleContent && !this._treeMode && !this._useHostAriaRole;
   }
 
   // FilterMenu real-focus SingleSelect non-collapsible group: its options are
@@ -263,6 +271,9 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
     if (this._useHostAriaRole) {
       return "presentation";
     }
+    if (this.isSingleContentList) {
+      return "listitem";
+    }
     // Tree mode keeps the treeitem/group nesting; per-group-listbox mode moves the
     // single labelled role="listbox" onto the inner options wrapper — the outer div
     // is transparent so screen readers don't announce a redundant "group" around it.
@@ -273,7 +284,10 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
   }
 
   get contentRegionRole(): string {
-    return this._treeMode ? "group" : "region";
+    if (this.isSingleContentList) {
+      return "list";
+    }
+    return this.isTreeAccessibleRole ? "group" : "region";
   }
 
   get nonCollapsibleContainerRole(): string {

package/src/ListGroupHeaderTemplate.tsx

@@ -57,6 +57,7 @@ function SingleCollapsibleHeaderRow(this: UDExListGroupHeader) {
           class="udex-list__header-title"
           {...({ innerHTML: this.label } as object)}>
         </span>
+        {this.supportingText && " "}
         {this.supportingText && (
           <span id="group-supporting-text" class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>
         )}
@@ -79,48 +80,32 @@ function SingleCollapsibleHeaderRow(this: UDExListGroupHeader) {
 }
 
 function SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {
-  // Conformant WAI-ARIA tree (FilterMenu real focus): nest the child role="group"
-  // INSIDE this treeitem so screen readers count children per group natively — no
-  // explicit aria-posinset/aria-setsize (which JAWS distrusts). Excludes SelectBox
-  // (aria-activedescendant, _useHostAriaRole) and non-tree modes, which keep the flat
-  // structure with the content region emitted as a sibling by the template body.
-  const nested = this.isTreeAccessibleRole && !this._useHostAriaRole;
   // In aria-activedescendant mode (SelectBox) the HOST element is the treeitem and
   // already carries aria-expanded + the accessible name. This inner div must then be
   // presentational (singleCollapsibleHeaderRole) and must NOT duplicate those states,
   // otherwise it is a second treeitem nested inside the host treeitem with no owning
-  // tree/group (axe/SiteImprove aria-required-parent). It stays focusable, though:
-  // clicking the collapsible-header body relies on it receiving DOM focus to redirect
-  // focus back to the combobox input — the same focusable, role="presentation" shape
-  // the list-item [part=item] divs already use. The real-focus (FilterMenu) path keeps
+  // tree/group (axe/SiteImprove aria-required-parent). It has no tab stop in that
+  // mode: DOM focus stays on the combobox input. Real-focus (FilterMenu) keeps
   // the treeitem semantics plus controls/labelling on this div.
   const headerAriaAttrs = this._useHostAriaRole ? {} : {
     "aria-expanded": this.expanded,
     "aria-controls": this.ariaControlsId,
     "aria-labelledby": this.collapsibleHeaderLabelledBy,
+    // Own the sibling group without including its visible options in this row's label.
+    "aria-owns": this.isTreeAccessibleRole ? this.ariaControlsId : undefined,
   };
   return (
     <div
-      class={`udex-list__group-content ${nested ? "udex-list__group-content--nested " : ""}udex-list__group-header-wrap ${this.sizeClass}`}
+      class={`udex-list__group-content udex-list__group-header-wrap ${this.sizeClass}`}
       part="group-item"
       id={`${this._id}_group-content__focusable`}
       role={this.singleCollapsibleHeaderRole as AriaRole}
-      tabIndex={0}
+      tabIndex={this._useHostAriaRole ? undefined : 0}
+      onMouseDown={this.handleCollapseIconMouseDown}
       onKeyDown={this.handleKeyDown}
       {...headerAriaAttrs}
       _tab-index={Number(this._effectiveTabIndex)}>
-      {nested ? (
-        <>
-          <div class="udex-list__group-header-row">
-            {SingleCollapsibleHeaderRow.call(this)}
-          </div>
-          <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class="udex-list__group-list__content">
-            <slot></slot>
-          </div>
-        </>
-      ) : (
-        SingleCollapsibleHeaderRow.call(this)
-      )}
+      {SingleCollapsibleHeaderRow.call(this)}
     </div>
   );
 }
@@ -155,6 +140,7 @@ function MultiOrRadioGroupHeader(this: UDExListGroupHeader) {
       size={this.size}
       supportingText={this.supportingText}
       accessible-role={this.nonCollapsibleHeaderAccessibleRole}
+      _useHostAriaRole={this._useHostAriaRole}
       _additional-class-name={this._additionalClassName}
       _tab-index={Number(this._effectiveTabIndex)}
       _aria-pos-in-set={this._ariaPosInSet}
@@ -169,12 +155,13 @@ function MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {
   if (this.isNonActiveHeader) {
     return (
       <header
-        role="button"
+        role={this._useHostAriaRole ? "presentation" : "button"}
         id="group-heading"
         class="udex-list__inactive-header udex-list__group-header-wrap"
-        tabIndex={Number(this._effectiveTabIndex)}
-        aria-expanded={this.expanded}
-        aria-controls={this.ariaControlsId}>
+        tabIndex={this._useHostAriaRole ? undefined : Number(this._effectiveTabIndex)}
+        aria-expanded={this._useHostAriaRole ? undefined : this.expanded}
+        aria-controls={this._useHostAriaRole ? undefined : this.ariaControlsId}
+        onMouseDown={this.handleCollapseIconMouseDown}>
         <div class="udex-list__inactive-header-content">
           <span class="udex-list__header-title" {...({ innerHTML: this.label } as object)}></span>
           {this.supportingText && (
@@ -196,13 +183,13 @@ function MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {
       </header>
     );
   }
+  // Keep this host transparent: aria-expanded/aria-controls would override role="none"
+  // and interrupt the inner treeitem's required context. The inner row exposes expanded.
   return (
     <UDExListItem
       id="group-heading"
       part="group-item"
       role="none"
-      aria-expanded={this.expanded}
-      aria-controls={this.ariaControlsId}
       selected={this.selected}
       indeterminate={this.indeterminate}
       collapsible={this.collapsible}
@@ -217,6 +204,7 @@ function MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {
       size={this.size}
       supportingText={this.supportingText}
       accessible-role={this.collapsibleHeaderAccessibleRole}
+      _useHostAriaRole={this._useHostAriaRole}
       onAccordionIconClick={this.handleCollapseIconClick as EventListener}
       _additional-class-name={this._additionalClassName}
       _tab-index={Number(this._effectiveTabIndex)}
@@ -229,16 +217,12 @@ function MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {
 }
 
 export default function ListGroupHeaderTemplate(this: UDExListGroupHeader) {
-  // Single-select real-focus tree: SingleGroupHeaderCollapsible now emits the
-  // role="group" content region as a CHILD of the treeitem (conformant nesting),
-  // so the template body must not also emit it as a sibling.
-  const singleSelectNested = this.isTreeAccessibleRole && !this.useListItemHeader && !this._useHostAriaRole;
   return (
     <div
       part="item"
       class="udex-list__group"
       role={this.groupWrapperRole as AriaRole}
-      aria-labelledby={(!this.isTreeAccessibleRole && !this.isPerGroupListbox) ? "group-heading" : undefined}>
+      aria-labelledby={(!this._useHostAriaRole && !this.isTreeAccessibleRole && !this.isPerGroupListbox) ? "group-heading" : undefined}>
       {this.collapsible ? (
         <div
           class="udex-list__group-list"
@@ -248,17 +232,15 @@ export default function ListGroupHeaderTemplate(this: UDExListGroupHeader) {
             ? MultiOrRadioGroupHeaderCollapsible.call(this)
             : SingleGroupHeaderCollapsible.call(this)
           }
-          {!singleSelectNested && (
-            <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class="udex-list__group-list__content">
-              {this.isTreeAccessibleRole ? (
+          <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class="udex-list__group-list__content">
+            {this.isTreeAccessibleRole || this.isSingleContentList ? (
+              <slot></slot>
+            ) : (
+              <div role="listbox" aria-label="group">
                 <slot></slot>
-              ) : (
-                <div role="listbox" aria-label="group">
-                  <slot></slot>
-                </div>
-              )}
-            </div>
-          )}
+              </div>
+            )}
+          </div>
         </div>
       ) : (
         <div
@@ -270,8 +252,8 @@ export default function ListGroupHeaderTemplate(this: UDExListGroupHeader) {
             ? MultiOrRadioGroupHeader.call(this)
             : SingleGroupHeader.call(this)
           }
-          {this.isTreeAccessibleRole ? (
-            <div role="group">
+          {this.isTreeAccessibleRole || this.isSingleContentList ? (
+            <div role={this.contentRegionRole as AriaRole}>
               <slot></slot>
             </div>
           ) : this.isPerGroupListbox ? (

package/src/ListItem.ts

@@ -21,7 +21,7 @@ import UDExRadioButton from "./RadioButton.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
-  INDETERMINATE, SELECTED, UNSELECTED, RATING_INDICATOR_TEXT, RATING_COUNT_TITLE, TOTAL,
+  INDETERMINATE, SELECTED, UNSELECTED,
 } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 
@@ -267,7 +267,10 @@ class UDExListItem extends UDExListItemBase {
     document.removeEventListener("mouseup", this.deactivate);
   }
 
-  handleMouseDown() {
+  handleMouseDown(e: MouseEvent) {
+    if (this._useHostAriaRole) {
+      e.preventDefault();
+    }
     this.activate();
   }
 
@@ -276,6 +279,10 @@ class UDExListItem extends UDExListItemBase {
   }
 
   handleKeyUp(e: KeyboardEvent) {
+    // Space activates a native button on keyup; the row must not cancel it.
+    if (this.firstIconElement === e.target || this.secondIconElement === e.target || (e.target as HTMLElement).classList.contains("udex-list__group-heading__icon")) {
+      return;
+    }
     e.preventDefault();
     if (isSpace(e) || isEnter(e)) {
       this.deactivate();
@@ -372,7 +379,8 @@ class UDExListItem extends UDExListItemBase {
     if (this._useHostAriaRole) {
       return "presentation";
     }
-    if (this.accessibleRole.length > 0) {
+    // Removing the reflected attribute can reset the property to null.
+    if (this.accessibleRole) {
       return this.accessibleRole;
     }
     // SingleContent is informational (not a selection widget) — listitem is semantically correct
@@ -380,11 +388,11 @@ class UDExListItem extends UDExListItemBase {
   }
 
   get effectiveRole(): string {
-    return this.accessibleRole.length > 0 ? this.accessibleRole : listItemRole;
+    return this.accessibleRole || listItemRole;
   }
 
   get ariaCheckedValue(): "true" | "false" | "mixed" | undefined {
-    if (this.effectiveRole !== "treeitem") {
+    if (this.roleItem !== "treeitem") {
       return undefined;
     }
     // Only MultiSelect treeitems expose aria-checked; SingleSelect uses aria-selected.
@@ -424,7 +432,7 @@ class UDExListItem extends UDExListItemBase {
     // actually expand/collapse. Non-collapsible group headers must NOT report an
     // expanded/collapsed state (nothing to toggle); the tree hierarchy is conveyed
     // structurally by the nested role="group", not by aria-expanded.
-    if (!this.collapsible) {
+    if (this._useHostAriaRole || !this.collapsible) {
       return undefined;
     }
     return this.expanded ? "true" : "false";
@@ -460,13 +468,6 @@ class UDExListItem extends UDExListItemBase {
     }
     return `${this.selected ? translate(UDExListItem, SELECTED) : translate(UDExListItem, UNSELECTED)} `;
   }
-
-  get ratingAriaLabel(): string {
-    const ratingText = this.ratingCount ? `${translate(UDExListItem, RATING_COUNT_TITLE)} ${this.ratingCount}` : "";
-    const totalText = this.totalCount ? `${translate(UDExListItem, TOTAL)} ${this.totalCount}` : "";
-    const ratingTitleText = translate(UDExListItem, RATING_INDICATOR_TEXT);
-    return [...[ratingText, totalText].filter(Boolean), `${ratingTitleText} ${this.rating} of ${this.ratingMax}`].join(", ");
-  }
 }
 
 UDExListItem.define();

package/src/ListItemBase.ts

@@ -8,7 +8,9 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import translate from "./utils/translate.js";
-import { COLLAPSE, EXPAND } from "./generated/i18n/i18n-defaults.js";
+import {
+  COLLAPSE, EXPAND, RATING_COUNT_TITLE, RATING_INDICATOR_TEXT, TOTAL,
+} from "./generated/i18n/i18n-defaults.js";
 
 export type UDExListItemBaseEvents = {
   "first-icon-click": UDExListItemBaseEventDetail,
@@ -407,6 +409,17 @@ class UDExListItemBase extends UI5Element {
   get hasRating(): boolean {
     return !!this.rating;
   }
+
+  /**
+   * Shared rating description for rendered options and their source items.
+   * @private
+   */
+  get ratingAriaLabel(): string {
+    const ratingText = this.ratingCount ? `${translate(UDExListItemBase, RATING_COUNT_TITLE)} ${this.ratingCount}` : "";
+    const totalText = this.totalCount ? `${translate(UDExListItemBase, TOTAL)} ${this.totalCount}` : "";
+    const ratingTitleText = translate(UDExListItemBase, RATING_INDICATOR_TEXT);
+    return [...[ratingText, totalText].filter(Boolean), `${ratingTitleText} ${this.rating} of ${this.ratingMax}`].join(", ");
+  }
 }
 
 export default UDExListItemBase;

package/src/ListItemTemplate.tsx

@@ -136,8 +136,8 @@ export default function ListItemTemplate(this: UDExListItem) {
       {this.modeSelected && (
         <div
           part="item"
-          tabIndex={Number(this._effectiveTabIndex)}
-          aria-disabled={this._ariaDisabled}
+          tabIndex={this._useHostAriaRole ? undefined : Number(this._effectiveTabIndex)}
+          aria-disabled={this._useHostAriaRole ? undefined : this._ariaDisabled}
           class={this.className}
           role={this.roleItem as AriaRole}
           aria-checked={this.ariaCheckedValue}
@@ -160,7 +160,7 @@ export default function ListItemTemplate(this: UDExListItem) {
               part="checkbox"
               tabindex={-1}
               indeterminate={this.indeterminate}
-              accessible-name={`checkbox ${this.stateAccessibleName}`}
+              accessible-name={this._useHostAriaRole ? undefined : `checkbox ${this.stateAccessibleName}`}
               checked={this.selected}
               disabled={this.disabled}
               aria-hidden="true"
@@ -183,7 +183,7 @@ export default function ListItemTemplate(this: UDExListItem) {
         <div
           part="item"
           role={this.roleItem as AriaRole}
-          aria-selected={this.selected}
+          aria-selected={this.ariaSelectedValue}
           class={this.className}>
           {ContentList.call(this)}
         </div>

package/src/ListSelectAllTemplate.tsx

@@ -6,22 +6,24 @@ export default function ListSelectAllTemplate(this: UDExListSelectAll) {
     <div
       part="item"
       class="udex-list__group"
-      role="group"
-      aria-labelledby="group-select-all">
+      role={this._useHostAriaRole ? "presentation" : "group"}
+      aria-labelledby={this._useHostAriaRole ? undefined : "group-select-all"}>
       <div
-        role="listbox"
-        aria-label="select-all-group"
+        role={this._useHostAriaRole ? "presentation" : "listbox"}
+        aria-label={this._useHostAriaRole ? undefined : "select-all-group"}
         class={this.groupListClassName}
         onui5-item-press={this.handleSelectAllGroupItemsPress}>
         <UDExListItem
-          role="group"
+          role={this._useHostAriaRole ? "none" : "group"}
           part="group-item"
           accessible-role="option"
+          _useHostAriaRole={this._useHostAriaRole}
+          label={this._useHostAriaRole ? this.selectAllLabel : undefined}
           mode={this.multiselectMode}
           onClick={this.handleSelectAllPress}
           class={this.className}
           selected={this.selected}
-          aria-current={this.selected}
+          aria-current={this._useHostAriaRole ? undefined : this.selected}
           indeterminate={this.indeterminate}
           controlled={this.controlled}
           onKeyDown={this.handleKeyDownPress}
@@ -29,9 +31,9 @@ export default function ListSelectAllTemplate(this: UDExListSelectAll) {
           _additional-class-name={this.additionalClassName}
           supportingText={this.supportingText}
           divider>
-          {this.selectAllLabel}
+          {!this._useHostAriaRole && this.selectAllLabel}
         </UDExListItem>
-        <slot></slot>
+        {this._useHostAriaRole ? <div role="group"><slot></slot></div> : <slot></slot>}
       </div>
     </div>
   );

package/src/ListTemplate.tsx

@@ -2,6 +2,8 @@ import type UDExList from "./List.js";
 import type { AriaRole } from "@ui5/webcomponents-base/types.js";
 
 export default function ListTemplate(this: UDExList) {
+  const hasHostAriaRole = this._hasHostAriaRole;
+
   return (
     <>
       {this.modeSelected && (
@@ -13,16 +15,18 @@ export default function ListTemplate(this: UDExList) {
           onui5-header-press={this.handleItemPress}>
           <div class="udex-list__scroll-container">
             {HeaderText.call(this)}
-            <span id={`${this._id}-mode-label`} class="udex-list__hidden-text">
-              {this.ariaLabelModeText}
-            </span>
+            {!hasHostAriaRole && (
+              <span id={this.ariaLabelledBy} class="udex-list__hidden-text">
+                {this.ariaLabelModeText}
+              </span>
+            )}
             <div
               id="udex-list"
               class="udex-list"
-              role={this.effectiveAccessibleRole as AriaRole}
-              aria-labelledby={this.ariaLabelledBy}
-              aria-multiselectable={this._listAriaMultiSelectable as "true" | undefined}
-              aria-busy={(this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
+              role={(hasHostAriaRole ? "none" : this.effectiveAccessibleRole) as AriaRole}
+              aria-labelledby={hasHostAriaRole ? undefined : this.ariaLabelledBy}
+              aria-multiselectable={(hasHostAriaRole ? undefined : this._listAriaMultiSelectable) as "true" | undefined}
+              aria-busy={(hasHostAriaRole ? undefined : this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
               <slot></slot>
             </div>
           </div>
@@ -34,9 +38,9 @@ export default function ListTemplate(this: UDExList) {
           <div
             id="udex-list"
             class="udex-list"
-            role={this.singleContentRole as AriaRole}
-            aria-label={this.singleContentAriaLabel}
-            aria-busy={(this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
+            role={(hasHostAriaRole ? "none" : this.singleContentRole) as AriaRole}
+            aria-label={hasHostAriaRole ? undefined : this.singleContentAriaLabel}
+            aria-busy={(hasHostAriaRole ? undefined : this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
             <slot></slot>
           </div>
         </>