@sapudex/web-components 2.56.0 → 2.58.0

package/dist/messagebundle_zh_CN.properties

@@ -5,14 +5,11 @@ OVERVIEW=概览
 LOGOUT=退出
 MAIN_LINKS=主要链接
 BACK_TO_TOP=返回顶部
-COUNT=计数
 OF=/
 PAGINATION_PAGE=页码
 SELECTED=已选定
 UNSELECTED=未选择
 INDETERMINATE=不确定
-EDIT_BUTTON=编辑
-DELETE_BUTTON=删除
 BACK_TO_REGION_LIST=返回到地区列表
 BUTTON_ARIA_TYPE_PRIMARY=一级
 BUTTON_ARIA_TYPE_SECONDARY=二级
@@ -26,8 +23,6 @@ BUTTON_ARIA_TRANSPARENT=透明
 BUTTON_ARIA_ATTENTION=注意
 DATEPICKER_DATE_DESCRIPTION=数据输入
 TOGGLED=切换
-FIRST_PAGE=第一页
-LAST_PAGE=最后一页
 PREVIOUS_PAGE=上一页
 NEXT_PAGE=下一页
 CURRENT_PAGE=当前页面
@@ -70,7 +65,6 @@ TEXTAREA_CHARACTERS_LEFT=剩余 {0} 个字符
 VALUE_STATE_TYPE_ERROR=字段状态"错误"
 VALUE_STATE_TYPE_WARNING=字段状态"警告"
 VALUE_STATE_TYPE_SUCCESS=字段状态"成功"
-VALUE_STATE_TYPE_STANDARD=字段状态"标准"
 CAROUSEL_PREVIOUS_ARROW_TEXT=上一页
 CAROUSEL_NEXT_ARROW_TEXT=下一页
 NO_MATCHES_FOUND=没有找到匹配项。
@@ -101,8 +95,6 @@ ABOUT_SAP=关于 SAP
 SITE_INFORMATION=网站信息
 AVATAR_TEXT=头像
 CALENDAR_ICON=打开日历图标
-LIST_ITEM_EDIT_ICON=编辑列表项记录
-LIST_ITEM_DELETE_ICON=删除列表项记录
 BACK_BUTTON_LABEL=返回按钮
 STATUS_BADGE_TEXT=状态标记
 STATUS_BADGE_EDIT_TITLE=点击编辑个人资料

package/dist/messagebundle_zh_TW.properties

@@ -3,14 +3,11 @@ OVERVIEW=概覽
 LOGOUT=登出
 MAIN_LINKS=主要連結
 BACK_TO_TOP=返回頂部
-COUNT=數量
 OF=/
 PAGINATION_PAGE=頁面
 SELECTED=已選取
 UNSELECTED=未選取
 INDETERMINATE=不確定
-EDIT_BUTTON=編輯
-DELETE_BUTTON=刪除
 BACK_TO_REGION_LIST=返回地區清單
 BUTTON_ARIA_TYPE_PRIMARY=主要
 BUTTON_ARIA_TYPE_SECONDARY=次要
@@ -24,8 +21,6 @@ BUTTON_ARIA_TRANSPARENT=透明化
 BUTTON_ARIA_ATTENTION=注意
 DATEPICKER_DATE_DESCRIPTION=資料輸入
 TOGGLED=已切換
-FIRST_PAGE=第一頁
-LAST_PAGE=最後一頁
 PREVIOUS_PAGE=上一頁
 NEXT_PAGE=下一頁
 CURRENT_PAGE=目前頁面
@@ -68,7 +63,6 @@ TEXTAREA_CHARACTERS_LEFT=剩餘 {0} 個字元
 VALUE_STATE_TYPE_ERROR=欄位狀態錯誤
 VALUE_STATE_TYPE_WARNING=欄位狀態警告
 VALUE_STATE_TYPE_SUCCESS=欄位狀態成功
-VALUE_STATE_TYPE_STANDARD=欄位狀態標準
 CAROUSEL_PREVIOUS_ARROW_TEXT=上一頁
 CAROUSEL_NEXT_ARROW_TEXT=下一頁
 NO_MATCHES_FOUND=找不到符合項目。
@@ -99,8 +93,6 @@ ABOUT_SAP=關於 SAP
 SITE_INFORMATION=網站資訊
 AVATAR_TEXT=頭像
 CALENDAR_ICON=開啟行事曆圖示
-LIST_ITEM_EDIT_ICON=編輯清單項目輸入項
-LIST_ITEM_DELETE_ICON=刪除清單項目輸入項
 BACK_BUTTON_LABEL=返回按鈕
 STATUS_BADGE_TEXT=狀態徽章
 STATUS_BADGE_EDIT_TITLE=按一下以編輯個人資料

package/dist/vscode.html-custom-data.json

@@ -383,7 +383,11 @@
         {
           "name": "page-indicator-type",
           "description": "Defines the style of the page indicator.\nAvailable options are:\n\n- `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n- `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)",
-          "values": [{ "name": "Default" }, { "name": "Numeric" }]
+          "values": [
+            { "name": "Default" },
+            { "name": "None" },
+            { "name": "Numeric" }
+          ]
         }
       ],
       "references": []
@@ -4637,7 +4641,11 @@
         {
           "name": "size-more-button",
           "description": "Defines the size of the \"More\" button.",
-          "values": [{ "name": "Medium" }, { "name": "Small" }]
+          "values": [
+            { "name": "Medium" },
+            { "name": "Small" },
+            { "name": "Large" }
+          ]
         },
         {
           "name": "vertical-alignment",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.56.0",
+  "version": "2.58.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -789,7 +789,7 @@
               "name": "page-indicator-type",
               "description": "Defines the style of the page indicator.\nAvailable options are:\n\n- `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n- `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)",
               "value": {
-                "type": "\"Default\" | \"Numeric\"",
+                "type": "\"Default\" | \"None\" | \"Numeric\"",
                 "default": "\"Default\""
               }
             }
@@ -845,7 +845,7 @@
               {
                 "name": "page-indicator-type",
                 "description": "Defines the style of the page indicator.\nAvailable options are:\n\n- `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n- `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)",
-                "value": { "type": "\"Default\" | \"Numeric\"" }
+                "value": { "type": "\"Default\" | \"None\" | \"Numeric\"" }
               }
             ],
             "events": [
@@ -9846,8 +9846,8 @@
               "name": "size-more-button",
               "description": "Defines the size of the \"More\" button.",
               "value": {
-                "type": "\"Medium\" | \"Small\"",
-                "default": "\"Small\""
+                "type": "\"Medium\" | \"Small\" | \"Large\"",
+                "default": "\"Medium\""
               }
             },
             {
@@ -9916,7 +9916,7 @@
               {
                 "name": "size-more-button",
                 "description": "Defines the size of the \"More\" button.",
-                "value": { "type": "\"Medium\" | \"Small\"" }
+                "value": { "type": "\"Medium\" | \"Small\" | \"Large\"" }
               },
               {
                 "name": "vertical-alignment",

package/package.json

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

package/src/Carousel.ts

@@ -21,6 +21,7 @@ import {
 import redirectAttributes from "./utils/redirectAttributes.js";
 import type UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
 import type { CarouselNavigateEventDetail } from "@ui5/webcomponents/dist/Carousel.js";
+import type CarouselPageIndicatorType from "@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js";
 import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import translate from "./utils/translate.js";
 
@@ -28,13 +29,18 @@ import CarouselTemplate from "./CarouselTemplate.js";
 
 // Styles
 import CarouselCss from "./generated/themes/Carousel.css.js";
-import type CarouselPageIndicatorType from "@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js";
 
 export enum UDExCarouselNavigationPosition {
   top = "top",
   bottom = "bottom",
 }
 
+export enum UDExCarouselPageIndicatorType {
+    Default = "Default",
+    Numeric = "Numeric",
+    None = "None"
+}
+
 export enum UDExCarouselButtonDesign {
   Secondary = "Secondary",
   Tertiary = "Tertiary",
@@ -167,7 +173,7 @@ class UDExCarousel extends UI5Element {
    * @public
    */
   @property()
-    pageIndicatorType: `${CarouselPageIndicatorType}` = "Default";
+    pageIndicatorType: `${UDExCarouselPageIndicatorType}` = "Default";
 
   /**
    * Defines the prev button is disabled
@@ -347,7 +353,7 @@ class UDExCarousel extends UI5Element {
       return;
     }
 
-    this._carousel.navigateLeft();
+    this._carousel.navigateArrowLeft();
     this._calculateDisabledButtonsState();
   }
 
@@ -356,7 +362,7 @@ class UDExCarousel extends UI5Element {
       return;
     }
 
-    this._carousel.navigateRight();
+    this._carousel.navigateArrowRight();
     this._calculateDisabledButtonsState();
   }
 
@@ -381,9 +387,18 @@ class UDExCarousel extends UI5Element {
   }
 
   get carouselClass(): string {
-    const classes = "udex-carousel";
+    let classes = "udex-carousel";
 
-    return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;
+    classes += ` udex-carousel__navigation--${this.navigationPlacement}`;
+
+    if (
+      this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+      && this.pageIndicatorType === UDExCarouselPageIndicatorType.None
+    ) {
+      classes += " udex-carousel__navigation--bottom-buttons-only";
+    }
+
+    return classes;
   }
 
   get navigationWrapperClass(): string {
@@ -407,6 +422,13 @@ class UDExCarousel extends UI5Element {
   }
 
   get buttonDesign(): UDExCarouselButtonDesign {
+    if (
+      this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+      && this.pageIndicatorType === UDExCarouselPageIndicatorType.None
+    ) {
+      return UDExCarouselButtonDesign.Secondary;
+    }
+
     return this.navigationPlacement === UDExCarouselNavigationPosition.top
       ? UDExCarouselButtonDesign.Secondary
       : UDExCarouselButtonDesign.Tertiary;
@@ -420,6 +442,13 @@ class UDExCarousel extends UI5Element {
   }
 
   get _hidePageIndicator(): boolean {
+    if (
+      this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+      && this.pageIndicatorType === UDExCarouselPageIndicatorType.None
+    ) {
+      return true;
+    }
+
     return this.navigationPlacement === UDExCarouselNavigationPosition.top;
   }
 
@@ -427,8 +456,14 @@ class UDExCarousel extends UI5Element {
     return this.shadowRoot!.querySelector<UI5Carousel>("[ui5-carousel]");
   }
 
-  get _isBottomNavigation(): boolean {
-    return this.navigationPlacement === UDExCarouselNavigationPosition.bottom;
+  get _isBottomDotNavigation(): boolean {
+    if (
+      this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+      && this.pageIndicatorType !== UDExCarouselPageIndicatorType.None
+    ) {
+      return true;
+    }
+    return false;
   }
 
   get autoplayToggleButtonTooltipText(): string {
@@ -436,6 +471,14 @@ class UDExCarousel extends UI5Element {
       ? translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_START)
       : translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_STOP);
   }
+
+  get sanitizedPageIndicatorType(): `${CarouselPageIndicatorType}` {
+    if (this.pageIndicatorType === UDExCarouselPageIndicatorType.None) {
+      return UDExCarouselPageIndicatorType.Default;
+    }
+
+    return this.pageIndicatorType;
+  }
 }
 
 UDExCarousel.define();

package/src/CarouselTemplate.tsx

@@ -17,7 +17,7 @@ export default function CarouselTemplate(this: Carousel) {
 
       <UI5Carousel
         itemsPerPage={this.itemsPerPage}
-        pageIndicatorType={this.pageIndicatorType}
+        pageIndicatorType={this.sanitizedPageIndicatorType}
         id="carousel"
         hideNavigationArrows
         arrowsPlacement={CarouselArrowsPlacement.Navigation}
@@ -70,11 +70,11 @@ function navigation(this: Carousel) {
           design={this.buttonDesign}
           tooltip={this.previousPageText}
           onClick={this._prevButtonClick}
-          part="prev-button">
-        </UDExButton>
+          part="prev-button"
+        ></UDExButton>
 
         {
-          this._isBottomNavigation &&
+          this._isBottomDotNavigation &&
           <div className="udex-carousel__navigation-page-indicator-spacer" />
         }
 
@@ -87,12 +87,12 @@ function navigation(this: Carousel) {
           design={this.buttonDesign}
           tooltip={this.nextPageText}
           onClick={this._nextButtonClick}
-          part="next-button">
-        </UDExButton>
+          part="next-button"
+        ></UDExButton>
       </div>
 
       {
-        this.autoplay && this._isBottomNavigation &&
+        this.autoplay && this._isBottomDotNavigation &&
         <div className="udex-carousel__navigation-spacer"></div>
       }
     </div>

package/src/List.ts

@@ -215,6 +215,7 @@ class UDExList extends UI5Element {
     if (target.isGroup && target.hasAttribute("collapsible") && target.collapsed) {
       target.collapsed = false;
       this.setCollapsedItems(false, target);
+      this.fireAccordionToggle(target);
     }
   }
 
@@ -223,9 +224,25 @@ class UDExList extends UI5Element {
     if (target.isGroup && target.hasAttribute("collapsible") && !target.collapsed) {
       target.collapsed = true;
       this.setCollapsedItems(true, target);
+      this.fireAccordionToggle(target);
     }
   }
 
+  /**
+   * Arrow-key expand/collapse toggles `collapsed` directly here (multi-select
+   * headers deliver Left/Right to the List, not to the header's own key handler),
+   * so the `accordion-icon-click` event that drives the collapse/expand live-region
+   * announcement is never fired on this path. Re-emit it from the header so
+   * SearchableListBase announces the new state to screen readers, matching the
+   * chevron/pointer and single-select paths.
+   */
+  fireAccordionToggle(target: UDExListItemBase): void {
+    target.dispatchEvent(new CustomEvent("accordion-icon-click", {
+      bubbles: true,
+      detail: { collapsed: target.collapsed },
+    }));
+  }
+
   handleUpArrow(e: KeyboardEvent): void {
     e.preventDefault();
     const items = this.getKeyboardNavigationItems();
@@ -606,9 +623,14 @@ class UDExList extends UI5Element {
     return this.accessibleRole !== "listbox" ? this.accessibleRole : "list";
   }
 
-  /** aria-multiselectable exposed only for MultiSelect tree (collapsible groups). */
+  /**
+   * aria-multiselectable is exposed for every MultiSelect list — the flat listbox
+   * and the collapsible tree alike. It is required so the screen reader announces
+   * each option's selected / not-selected state (from aria-selected) instead of
+   * treating the container as single-select and announcing only the active option.
+   */
   get _listAriaMultiSelectable(): string | undefined {
-    return (this._hasCollapsibleGroups && this.modeMultiSelect) ? "true" : undefined;
+    return this.modeMultiSelect ? "true" : undefined;
   }
 }
 

package/src/ListGroupHeaderBase.ts

@@ -46,6 +46,19 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
   @property({ type: Boolean })
     _treeMode: boolean = false;
 
+  /**
+   * Marks the group as a self-contained role="listbox" (FilterMenu real-focus
+   * SingleSelect, non-collapsible groups). When true, this group's options are
+   * wrapped in their own listbox so JAWS counts them natively per group. Set by
+   * the parent (SearchableListBase.isPerGroupListbox) only when the whole list is
+   * grouped; the outer #udex-list drops its listbox role in that case.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _groupAsListbox: boolean = false;
+
   /**
    * Slot for group header list items.
    *
@@ -210,10 +223,29 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
     return this._treeMode;
   }
 
+  // FilterMenu real-focus SingleSelect non-collapsible group: its options are
+  // rendered inside their own role="listbox" so JAWS counts them natively per
+  // group ("1 of 4"). JAWS ignores role="group" boundaries and author
+  // aria-posinset within a single listbox, but counts reliably within a flat
+  // listbox. Excludes SelectBox (_useHostAriaRole) and tree mode.
+  get isPerGroupListbox(): boolean {
+    return this._groupAsListbox && !this._useHostAriaRole && !this._treeMode;
+  }
+
   get singleCollapsibleHeaderRole(): string {
     return this._treeMode ? "treeitem" : "button";
   }
 
+  // Pins the collapsible header's accessible name to its heading (+ supporting text)
+  // so the decorative expand/collapse chevron button — a child of the header — does
+  // not fold its "Expand"/"Collapse" label into the header's name. The chevron is a
+  // mouse affordance only (tabindex=-1); its state is already conveyed by
+  // aria-expanded, so excluding its name avoids announcing "Collapse" alongside the
+  // spoken "expanded"/"collapsed" state.
+  get collapsibleHeaderLabelledBy(): string {
+    return this.supportingText ? "group-heading group-supporting-text" : "group-heading";
+  }
+
   get collapsibleHeaderAccessibleRole(): string {
     return this._treeMode ? "treeitem" : "button";
   }
@@ -222,7 +254,13 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
     if (this._useHostAriaRole) {
       return "presentation";
     }
-    return this._treeMode ? "none" : "group";
+    // 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.
+    if (this._treeMode || this.isPerGroupListbox) {
+      return "none";
+    }
+    return "group";
   }
 
   get contentRegionRole(): string {
@@ -230,7 +268,11 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
   }
 
   get nonCollapsibleContainerRole(): string {
-    return "group";
+    // The single role="group" for non-collapsible headers lives on the outer
+    // div.udex-list__group wrapper (groupWrapperRole = "group" in non-tree mode,
+    // labelled by aria-labelledby="group-heading"). This container div must be
+    // transparent so that extra "group group" announcements are avoided.
+    return "none";
   }
 
   get nonCollapsibleHeaderAccessibleRole(): string | undefined {

package/src/ListGroupHeaderTemplate.tsx

@@ -35,18 +35,11 @@ function SingleGroupHeader(this: UDExListGroupHeader) {
   );
 }
 
-function SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {
+// The visible header row of the single-select collapsible group: number/icon,
+// heading + supporting text, and the expand/collapse chevron.
+function SingleCollapsibleHeaderRow(this: UDExListGroupHeader) {
   return (
-    <div
-      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}
-      onKeyDown={this.handleKeyDown}
-      aria-expanded={this.expanded}
-      aria-controls={this.ariaControlsId}
-      _tab-index={Number(this._effectiveTabIndex)}>
+    <>
       {this.typeNumber && <span class="udex-list__number">{this.numberOfItem}.</span>}
       {this.typeCircle && <span class="udex-list__circle">&#x2022;</span>}
       {this.typeIcon && (
@@ -65,7 +58,7 @@ function SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {
           {...({ innerHTML: this.label } as object)}>
         </span>
         {this.supportingText && (
-          <span class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>
+          <span id="group-supporting-text" class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>
         )}
       </div>
       <div class="udex-list__group-heading__icon-wrapper">
@@ -74,12 +67,48 @@ function SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {
           design="Tertiary"
           class="udex-list__group-heading__icon"
           onClick={this.handleCollapseIconClick as unknown as EventListener}
+          onMouseDown={this.handleCollapseIconMouseDown}
           tabindex={-1}
           accessible-name={this.expandButtonAccessibleName}
           icon={slimArrowRight}
           {...({ "mode": "Interactive" } as object)}
         />
       </div>
+    </>
+  );
+}
+
+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;
+  return (
+    <div
+      class={`udex-list__group-content ${nested ? "udex-list__group-content--nested " : ""}udex-list__group-header-wrap ${this.sizeClass}`}
+      part="group-item"
+      id={`${this._id}_group-content__focusable`}
+      role={this.singleCollapsibleHeaderRole as AriaRole}
+      tabIndex={0}
+      onKeyDown={this.handleKeyDown}
+      aria-expanded={this.expanded}
+      aria-controls={this.ariaControlsId}
+      aria-labelledby={this.collapsibleHeaderLabelledBy}
+      _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)
+      )}
     </div>
   );
 }
@@ -116,6 +145,8 @@ function MultiOrRadioGroupHeader(this: UDExListGroupHeader) {
       accessible-role={this.nonCollapsibleHeaderAccessibleRole}
       _additional-class-name={this._additionalClassName}
       _tab-index={Number(this._effectiveTabIndex)}
+      _aria-pos-in-set={this._ariaPosInSet}
+      _aria-set-size={this._ariaSetSize}
       _icon={this._icon}
       _filtered={this._filtered}
     />
@@ -177,6 +208,8 @@ function MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {
       onAccordionIconClick={this.handleCollapseIconClick as EventListener}
       _additional-class-name={this._additionalClassName}
       _tab-index={Number(this._effectiveTabIndex)}
+      _aria-pos-in-set={this._ariaPosInSet}
+      _aria-set-size={this._ariaSetSize}
       _icon={this._icon}
       _filtered={this._filtered}
     />
@@ -184,12 +217,16 @@ 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 ? "group-heading" : undefined}>
+      aria-labelledby={(!this.isTreeAccessibleRole && !this.isPerGroupListbox) ? "group-heading" : undefined}>
       {this.collapsible ? (
         <div
           class="udex-list__group-list"
@@ -199,28 +236,42 @@ export default function ListGroupHeaderTemplate(this: UDExListGroupHeader) {
             ? MultiOrRadioGroupHeaderCollapsible.call(this)
             : SingleGroupHeaderCollapsible.call(this)
           }
-          <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class="udex-list__group-list__content">
-            {this.isTreeAccessibleRole ? (
-              <slot></slot>
-            ) : (
-              <div role="listbox" aria-label="group">
+          {!singleSelectNested && (
+            <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class="udex-list__group-list__content">
+              {this.isTreeAccessibleRole ? (
                 <slot></slot>
-              </div>
-            )}
-          </div>
+              ) : (
+                <div role="listbox" aria-label="group">
+                  <slot></slot>
+                </div>
+              )}
+            </div>
+          )}
         </div>
       ) : (
         <div
           role={this.nonCollapsibleContainerRole as AriaRole}
           class="udex-list__group-list"
-          aria-label="group"
           onui5-item-press={this.getHandleGroupItemsClick}
           {...({ name: "group" } as object)}>
           {this.modeMultiSelectOrRadioGroup
             ? MultiOrRadioGroupHeader.call(this)
             : SingleGroupHeader.call(this)
           }
-          <slot></slot>
+          {this.isTreeAccessibleRole ? (
+            <div role="group">
+              <slot></slot>
+            </div>
+          ) : this.isPerGroupListbox ? (
+            // Each group is its own labelled listbox: JAWS counts the options natively
+            // per group ("Python, 1 of 4"). The outer #udex-list is presentational
+            // (SearchableListBase.isPerGroupListbox) so this is not a nested listbox.
+            <div role="listbox" aria-labelledby="group-heading">
+              <slot></slot>
+            </div>
+          ) : (
+            <slot></slot>
+          )}
         </div>
       )}
     </div>