@sapudex/web-components 2.57.0 → 2.58.0

package/dist/generated/themes/TabInOverflow.css.js

@@ -3,6 +3,6 @@ import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/s
 import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme, "host");
-export default `:host{--udex-tab-overflow-button-font-size: var(--sapFontSize, var(--udexTypographyNavigationRegularXLFontSize));--udex-tab-overflow-button-font-weight: var(--udexTypographyFontWeightRegular, 400);--udex-tab-overflow-button-badge-background: var(--sapAccentColor2, var(--udexColorRed7));--udex-tab-overflow-button-font-family: var(--sapFontFamily, sans-serif);--udex-tab-overflow-button-line-height: var(--sapContent_LineHeight, var(--udexTypographyBodyLineHeight))}[ui5-popover]{margin-top:1px;box-shadow:0 2px 8px #2235484d;border:1px solid var(--udexColorGrey6)}[ui5-popover]::part(content){padding:0}.tab-navigation-popover{display:flex;flex-direction:column;min-width:150px}.udex-tab-overflow__button{padding:var(--udexSpacer8) var(--udexSpacer12);display:flex;background:none;border:0;border-radius:0;cursor:pointer;text-align:start;color:var(--udexColorGrey9);font-family:var(--udex-tab-overflow-button-font-family);font-size:var(--udex-tab-overflow-button-font-size);font-weight:var(--udex-tab-overflow-button-font-weight);line-height:var(--udex-tab-overflow-button-line-height);text-decoration:none;text-transform:capitalize}.udex-tab-overflow__button:hover{background-color:var(--udexColorGrey1)}.udex-tab-overflow__button:focus{outline:2px solid var(--udexColorBlue7, #0070F2);outline-offset:-2px}.udex-tab-overflow__button:active{background-color:var(--udexColorGrey2)}.udex-tab-overflow__button-icon{margin-inline-end:var(--udexSpacer8);position:relative;z-index:var(--udexZIndex0, 0)}.udex-tab-overflow__button-badge{margin-block-start:-2px;margin-inline-start:2px;display:inline-flex;width:6px;height:6px;border:1px solid #fff;border-radius:50%;background-color:var(--udex-tab-overflow-button-badge-background)}.udex-tab-overflow__button-icon .udex-tab-overflow__button-badge{margin-block-start:0;margin-inline-start:0;position:absolute;z-index:var(--udexZIndex1, 1);inset-block-start:-4px;inset-inline-end:-6px}
+export default `:host{--udex-tab-overflow-button-font-size: var(--sapFontSize, var(--udexTypographyNavigationRegularXLFontSize));--udex-tab-overflow-button-font-weight: var(--udexTypographyFontWeightRegular, 400);--udex-tab-overflow-button-badge-background: var(--sapAccentColor2, var(--udexColorRed7));--udex-tab-overflow-button-font-family: var(--sapFontFamily, sans-serif);--udex-tab-overflow-button-line-height: var(--sapContent_LineHeight, var(--udexTypographyBodyLineHeight))}[ui5-popover]{margin-top:1px;box-shadow:0 2px 8px #2235484d;border:1px solid var(--udexColorGrey6)}[ui5-popover]::part(content){padding:0}.tab-navigation-popover{display:flex;flex-direction:column;min-width:150px}.udex-tab-overflow__button{padding:var(--udexSpacer8) var(--udexSpacer12);display:flex;background:none;border:0;border-radius:0;cursor:pointer;text-align:start;color:var(--udexColorGrey9);font-family:var(--udex-tab-overflow-button-font-family);font-size:var(--udex-tab-overflow-button-font-size);font-weight:var(--udex-tab-overflow-button-font-weight);line-height:var(--udex-tab-overflow-button-line-height);text-decoration:none;text-transform:capitalize}.udex-tab-overflow__button:not([aria-disabled=true]):hover{background-color:var(--udexColorGrey1)}.udex-tab-overflow__button:not([aria-disabled=true]):focus{outline:var(--udexSpacer2, 2px) solid var(--udexColorBlue7, #0070F2);outline-offset:-2px}.udex-tab-overflow__button:not([aria-disabled=true]):active{background-color:var(--udexColorGrey2)}.udex-tab-overflow__button[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity, .4);cursor:default}.udex-tab-overflow__button-icon{margin-inline-end:var(--udexSpacer8);position:relative;z-index:var(--udexZIndex0, 0)}.udex-tab-overflow__button-badge{margin-block-start:-2px;margin-inline-start:2px;display:inline-flex;width:6px;height:6px;border:1px solid #fff;border-radius:50%;background-color:var(--udex-tab-overflow-button-badge-background)}.udex-tab-overflow__button-icon .udex-tab-overflow__button-badge{margin-block-start:0;margin-inline-start:0;position:absolute;z-index:var(--udexZIndex1, 1);inset-block-start:-4px;inset-inline-end:-6px}
 `;
 //# sourceMappingURL=TabInOverflow.css.js.map

package/dist/generated/themes/TabInOverflow.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabInOverflow.css.js","sourceRoot":"","sources":["../../../src/generated/themes/TabInOverflow.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AACxN,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"s\" + \"a\" + \"p\" + \"u\" + \"d\" + \"e\" + \"x\" + \"/\" + \"w\" + \"e\" + \"b\" + \"-\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `:host{--udex-tab-overflow-button-font-size: var(--sapFontSize, var(--udexTypographyNavigationRegularXLFontSize));--udex-tab-overflow-button-font-weight: var(--udexTypographyFontWeightRegular, 400);--udex-tab-overflow-button-badge-background: var(--sapAccentColor2, var(--udexColorRed7));--udex-tab-overflow-button-font-family: var(--sapFontFamily, sans-serif);--udex-tab-overflow-button-line-height: var(--sapContent_LineHeight, var(--udexTypographyBodyLineHeight))}[ui5-popover]{margin-top:1px;box-shadow:0 2px 8px #2235484d;border:1px solid var(--udexColorGrey6)}[ui5-popover]::part(content){padding:0}.tab-navigation-popover{display:flex;flex-direction:column;min-width:150px}.udex-tab-overflow__button{padding:var(--udexSpacer8) var(--udexSpacer12);display:flex;background:none;border:0;border-radius:0;cursor:pointer;text-align:start;color:var(--udexColorGrey9);font-family:var(--udex-tab-overflow-button-font-family);font-size:var(--udex-tab-overflow-button-font-size);font-weight:var(--udex-tab-overflow-button-font-weight);line-height:var(--udex-tab-overflow-button-line-height);text-decoration:none;text-transform:capitalize}.udex-tab-overflow__button:hover{background-color:var(--udexColorGrey1)}.udex-tab-overflow__button:focus{outline:2px solid var(--udexColorBlue7, #0070F2);outline-offset:-2px}.udex-tab-overflow__button:active{background-color:var(--udexColorGrey2)}.udex-tab-overflow__button-icon{margin-inline-end:var(--udexSpacer8);position:relative;z-index:var(--udexZIndex0, 0)}.udex-tab-overflow__button-badge{margin-block-start:-2px;margin-inline-start:2px;display:inline-flex;width:6px;height:6px;border:1px solid #fff;border-radius:50%;background-color:var(--udex-tab-overflow-button-badge-background)}.udex-tab-overflow__button-icon .udex-tab-overflow__button-badge{margin-block-start:0;margin-inline-start:0;position:absolute;z-index:var(--udexZIndex1, 1);inset-block-start:-4px;inset-inline-end:-6px}\n`"]}
+{"version":3,"file":"TabInOverflow.css.js","sourceRoot":"","sources":["../../../src/generated/themes/TabInOverflow.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AACxN,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"s\" + \"a\" + \"p\" + \"u\" + \"d\" + \"e\" + \"x\" + \"/\" + \"w\" + \"e\" + \"b\" + \"-\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `:host{--udex-tab-overflow-button-font-size: var(--sapFontSize, var(--udexTypographyNavigationRegularXLFontSize));--udex-tab-overflow-button-font-weight: var(--udexTypographyFontWeightRegular, 400);--udex-tab-overflow-button-badge-background: var(--sapAccentColor2, var(--udexColorRed7));--udex-tab-overflow-button-font-family: var(--sapFontFamily, sans-serif);--udex-tab-overflow-button-line-height: var(--sapContent_LineHeight, var(--udexTypographyBodyLineHeight))}[ui5-popover]{margin-top:1px;box-shadow:0 2px 8px #2235484d;border:1px solid var(--udexColorGrey6)}[ui5-popover]::part(content){padding:0}.tab-navigation-popover{display:flex;flex-direction:column;min-width:150px}.udex-tab-overflow__button{padding:var(--udexSpacer8) var(--udexSpacer12);display:flex;background:none;border:0;border-radius:0;cursor:pointer;text-align:start;color:var(--udexColorGrey9);font-family:var(--udex-tab-overflow-button-font-family);font-size:var(--udex-tab-overflow-button-font-size);font-weight:var(--udex-tab-overflow-button-font-weight);line-height:var(--udex-tab-overflow-button-line-height);text-decoration:none;text-transform:capitalize}.udex-tab-overflow__button:not([aria-disabled=true]):hover{background-color:var(--udexColorGrey1)}.udex-tab-overflow__button:not([aria-disabled=true]):focus{outline:var(--udexSpacer2, 2px) solid var(--udexColorBlue7, #0070F2);outline-offset:-2px}.udex-tab-overflow__button:not([aria-disabled=true]):active{background-color:var(--udexColorGrey2)}.udex-tab-overflow__button[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity, .4);cursor:default}.udex-tab-overflow__button-icon{margin-inline-end:var(--udexSpacer8);position:relative;z-index:var(--udexZIndex0, 0)}.udex-tab-overflow__button-badge{margin-block-start:-2px;margin-inline-start:2px;display:inline-flex;width:6px;height:6px;border:1px solid #fff;border-radius:50%;background-color:var(--udex-tab-overflow-button-badge-background)}.udex-tab-overflow__button-icon .udex-tab-overflow__button-badge{margin-block-start:0;margin-inline-start:0;position:absolute;z-index:var(--udexZIndex1, 1);inset-block-start:-4px;inset-inline-end:-6px}\n`"]}

package/dist/messagebundle.properties

@@ -238,6 +238,10 @@ TABLE_NO_DATA_FOUND=No data found
 EXPAND=Expand
 COLLAPSE=Collapse
 
+#Accessible state words announced for collapsible group headers
+EXPANDED=expanded
+COLLAPSED=collapsed
+
 #SecondaryNavigationSubItem Aria label for back button
 BACK_BUTTON_LABEL=return back
 

package/dist/messagebundle_en.properties

@@ -131,3 +131,5 @@ TOAST_CLOSE_ACCESSIBLE_NAME=Close
 DISABLED=Disabled
 EXPAND=Expand
 COLLAPSE=Collapse
+EXPANDED=expanded
+COLLAPSED=collapsed

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.57.0",
+  "version": "2.58.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

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

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>

package/src/ListItem.ts

@@ -398,27 +398,38 @@ class UDExListItem extends UDExListItemBase {
   }
 
   get ariaSelectedValue(): "true" | "false" | undefined {
-    if (this.effectiveRole !== "treeitem") {
+    // RadioGroup conveys its state through the radio control, never aria-selected.
+    if (this.modeRadioGroup) {
+      return undefined;
+    }
+    // MultiSelect treeitems convey state via aria-checked (see ariaCheckedValue).
+    // Every other selectable node — listbox options in both SingleSelect AND
+    // MultiSelect, plus SingleSelect treeitems — announces its state natively
+    // through aria-selected so the screen reader re-reads it when focus is on the
+    // item and when Enter/Space toggles it.
+    if (this.roleItem === "treeitem" && this.modeMultiSelect) {
       return undefined;
     }
-    // Only SingleSelect treeitems expose aria-selected; MultiSelect uses aria-checked.
-    if (this.modeMultiSelect) {
+    // Gated on the actual rendered role of the [part=item] div — never the
+    // presentational inner div used in aria-activedescendant mode (SelectBox sets
+    // aria-selected on the host).
+    if (this.roleItem !== "treeitem" && this.roleItem !== "option") {
       return undefined;
     }
     return this.selected ? "true" : "false";
   }
 
   get ariaExpandedValue(): "true" | "false" | undefined {
+    // aria-expanded is exposed ONLY on collapsible headers — a node the user can
+    // 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) {
       return undefined;
     }
     return this.expanded ? "true" : "false";
   }
 
-  get checkboxAriaHidden(): boolean {
-    return this.effectiveRole === "treeitem";
-  }
-
   get _ariaDisabled(): boolean | undefined {
     return this.disabled ? true : undefined;
   }
@@ -450,14 +461,6 @@ class UDExListItem extends UDExListItemBase {
     return `${this.selected ? translate(UDExListItem, SELECTED) : translate(UDExListItem, UNSELECTED)} `;
   }
 
-  get itemDescribedBy(): string {
-    return `${this._id}-invisibleText-describedby`;
-  }
-
-  get itemState(): string {
-    return this.selected ? "Selected" : "Not selected";
-  }
-
   get ratingAriaLabel(): string {
     const ratingText = this.ratingCount ? `${translate(UDExListItem, RATING_COUNT_TITLE)} ${this.ratingCount}` : "";
     const totalText = this.totalCount ? `${translate(UDExListItem, TOTAL)} ${this.totalCount}` : "";

package/src/ListItemBase.ts

@@ -240,6 +240,27 @@ class UDExListItemBase extends UI5Element {
   @property({ type: Boolean })
     _useHostAriaRole: boolean = false;
 
+  /**
+   * Explicit 1-based position of this treeitem within its own group, for a grouped
+   * tree structure. The sibling-group tree markup makes JAWS/NVDA compute a flattened
+   * posinset/setsize across all groups; setting these explicitly restores the
+   * per-group count so each item announces "N of <items in this group>".
+   * Only rendered on real treeitems (never in aria-activedescendant mode).
+   *
+   * @private
+   */
+  @property({ type: Number })
+    _ariaPosInSet?: number;
+
+  /**
+   * Explicit set size (number of treeitems within this item's own group) — the
+   * companion to {@link _ariaPosInSet}.
+   *
+   * @private
+   */
+  @property({ type: Number })
+    _ariaSetSize?: number;
+
   /**
    * Defines the tab index of the component.
    *
@@ -311,6 +332,15 @@ class UDExListItemBase extends UI5Element {
 
   handleCollapseIconMouseDown(e: MouseEvent) {
     e.stopPropagation();
+    // In aria-activedescendant mode (SelectBox) DOM focus must stay on the search
+    // input. Preventing the mousedown default stops the chevron/header body div from
+    // stealing focus, which would otherwise trigger a focusout→refocus + scroll-into-view
+    // that shifts the chevron out from under the pointer and eats the first click.
+    // Real-focus components (FilterMenu/List) leave _useHostAriaRole false and are
+    // unaffected. The click still fires, so collapse/expand happens on the first click.
+    if (this._useHostAriaRole) {
+      e.preventDefault();
+    }
   }
 
   handleCollapseIconClick(e: MouseEvent | KeyboardEvent) {

package/src/ListItemTemplate.tsx

@@ -126,7 +126,6 @@ function ContentList(this: UDExListItem) {
         )}
       </div>
       <div class="hidden" id={`${this._id}-invisibleText`}>{this.accessibleListItemName}</div>
-      <div class="hidden" id={`${this._id}-invisibleText-describedby`}>{this.itemState}</div>
     </div>
   );
 }
@@ -144,6 +143,8 @@ export default function ListItemTemplate(this: UDExListItem) {
           aria-checked={this.ariaCheckedValue}
           aria-selected={this.ariaSelectedValue}
           aria-expanded={this.ariaExpandedValue}
+          aria-posinset={this._ariaPosInSet || undefined}
+          aria-setsize={this._ariaSetSize || undefined}
           onFocusIn={this.handleFocusIn}
           onFocusOut={this.handleFocusOut}
           onClick={this.handleItemClick}
@@ -152,8 +153,7 @@ export default function ListItemTemplate(this: UDExListItem) {
           onKeyUp={this.handleKeyUp}
           onKeyDown={this.handleKeyDown}
           {...({ divider: this.divider, "_id": this._id } as object)}
-          data-selected={this.selected}
-          aria-describedby={this.itemDescribedBy}>
+          data-selected={this.selected}>
           {this.modeMultiSelect && (
             <UDExCheckbox
               class="udex-list__checkbox"
@@ -163,7 +163,7 @@ export default function ListItemTemplate(this: UDExListItem) {
               accessible-name={`checkbox ${this.stateAccessibleName}`}
               checked={this.selected}
               disabled={this.disabled}
-              aria-hidden={this.checkboxAriaHidden ? "true" : undefined}
+              aria-hidden="true"
             />
           )}
           {this.modeRadioGroup && (

package/src/MastheadCountrySelector.ts

@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -9,8 +9,8 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import UDExMastheadMenuItem from "./MastheadMenuItem.js";
-import UDExSearch, { Mode as UDExSearchMode } from "./Search.js";
-import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCountrySelectorTemplate.lit.js";
+import { Mode as UDExSearchMode } from "./Search.js";
+import MastheadCountrySelectorTemplate from "./MastheadCountrySelectorTemplate.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import type UDExMastheadShell from "./MastheadShell.js";
@@ -77,10 +77,10 @@ type UDExMastheadCountrySelectorSearchEventDetail = {
  */
 @customElement({
   tag: "udex-masthead-country-selector",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: MastheadCountrySelectorCss,
   template: MastheadCountrySelectorTemplate,
-  dependencies: [UI5Icon, UDExMastheadMenuItem, UDExSearch],
+  dependencies: [UI5Icon, UDExMastheadMenuItem],
 })
 
 /**

package/src/MastheadCountrySelectorTemplate.tsx

@@ -0,0 +1,98 @@
+import type UDExMastheadCountrySelector from "./MastheadCountrySelector.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import UDExSearch from "./Search.js";
+
+export default function MastheadCountrySelectorTemplate(this: UDExMastheadCountrySelector) {
+  return (
+    <div class="udex-masthead-country-selector">
+      {this._isActiveRegionOpen ? activeRegionView.call(this) : regionsView.call(this)}
+    </div>
+  );
+}
+
+function activeRegionView(this: UDExMastheadCountrySelector) {
+  return (
+    <>
+      <span class="udex-masthead-country-selector__title">{this.countryTitle}</span>
+      {!this.isSingleMode && (
+        <UDExMastheadMenuItem
+          class="udex-masthead-country-selector__region-back-item"
+          accessible-role="button"
+          onClick={this.backToRegions}
+          label={this._activeRegion?.title}
+          type="Button"
+          part="menu-item"
+          icon-start={true}
+          {...{ "_accessible-name": this.backToRegionListAccessibleName, "is-back": "" }}>
+        </UDExMastheadMenuItem>
+      )}
+      {!this.hideSearch && (
+        <>
+          <UDExSearch
+            class="udex-masthead-country-selector__search"
+            onui5-handle-value-search={this.handleSearch}
+            onui5-handle-value-reset={this.handleSearchReset}
+            onui5-submit-search-value={this.handleSearch}
+            language-voice={this.languageVoice}
+            label={this.searchLabel}
+            mode={this.homeSearchMode}
+            show-voice-button={this.showSearchVoiceButton}
+            non-interactive-submit-button={true}
+            show-submit-button={true}>
+          </UDExSearch>
+          <span aria-live="polite" aria-atomic="true" class="hidden">{this._accSearchResultInfo}</span>
+        </>
+      )}
+      <div class="udex-masthead-country-selector__list-container">
+        <div class="udex-masthead-country-selector__list-wrap" onScroll={this.handleCountryListShadowVisible}>
+          <ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">
+            {this._activeCountries.map((country, index) => (
+              <li role="none" key={index}>
+                <UDExMastheadMenuItem
+                  class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries"
+                  onClick={this.handleCountryClick as any}
+                  url={country.url}
+                  label={country.displayTitle}
+                  index={index}
+                  part="menu-item"
+                  {...{
+                    "_country-code": country.countryCode,
+                    "is-nav-item": "",
+                    ...(country.active ? { "_is-active-country": "" } : {}),
+                  }}>
+                </UDExMastheadMenuItem>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function regionsView(this: UDExMastheadCountrySelector) {
+  return (
+    <>
+      <span class="udex-masthead-country-selector__title">{this.regionTitle}</span>
+      <ul class="udex-masthead-country-selector__list">
+        {this.regionsData.map((region, index) => (
+          <li key={index}>
+            <UDExMastheadMenuItem
+              onClick={this.handleRegionClick as any}
+              index={index}
+              accessible-role="button"
+              class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region"
+              aria-haspopup="true"
+              type="Button"
+              part="menu-item"
+              has-border={true}
+              icon-end={true}
+              label={region.title}
+              {...{ "is-nav-item": "" }}>
+            </UDExMastheadMenuItem>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}