@sapudex/web-components 2.57.0 → 2.58.0

package/cypress/specs/FilterMenu.cy.tsx

@@ -104,6 +104,23 @@ filter-name="Filter Name">
 </UDExFilterMenuGroupHeader>
 </UDExFilterMenu>
 
+const filterMenuTwoGroups = <UDExFilterMenu
+  id="filter-menu-two-groups"
+  mode={UDExListMode.MultiSelect}
+  filter-name="Filter Name">
+  <UDExFilterMenuGroupHeader collapsible label="Backend Languages">
+    <UDExFilterMenuItem label="Python"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Ruby"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Node.js"></UDExFilterMenuItem>
+  </UDExFilterMenuGroupHeader>
+  <UDExFilterMenuGroupHeader collapsible label="Frontend Languages">
+    <UDExFilterMenuItem label="JavaScript"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Swift"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="HTML"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="CSS"></UDExFilterMenuItem>
+  </UDExFilterMenuGroupHeader>
+</UDExFilterMenu>
+
 const filterMenuRadioGroup = <UDExFilterMenu
   id="filter-menu-radio-group"
   disable-target-overlap="true"
@@ -576,6 +593,51 @@ describe("Filter Menu component", () => {
     });
   });
 
+  describe("Filter Menu grouped tree — per-group position", () => {
+    beforeEach(() => {
+      cy.mount(filterMenuTwoGroups);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").click();
+    });
+
+    // Regression: the sibling-group tree markup makes JAWS/NVDA compute a flattened
+    // posinset/setsize across every group's children (e.g. "5 of 7" instead of
+    // "1 of 4"). Explicit per-group aria-posinset/aria-setsize on each child treeitem
+    // restores the within-group count. Two groups of different sizes (Backend x3,
+    // Frontend x4) prove the count restarts per group rather than spanning all 7.
+    it('exposes per-group aria-posinset/aria-setsize on child treeitems so screen readers count within each group', () => {
+      // Backend Languages children: 1..3 within their own group of 3.
+      cy.get("[udex-filter-menu]").shadow().find("udex-list-group-header").eq(0)
+        .find("udex-list-item").then($items => {
+          expect($items).to.have.length(3);
+        });
+      cy.get("[udex-filter-menu]").shadow().find("udex-list-group-header").eq(0)
+        .find("udex-list-item").eq(0).shadow().find("[part=item]")
+        .should("have.attr", "aria-posinset", "1").and("have.attr", "aria-setsize", "3");
+      cy.get("[udex-filter-menu]").shadow().find("udex-list-group-header").eq(0)
+        .find("udex-list-item").eq(2).shadow().find("[part=item]")
+        .should("have.attr", "aria-posinset", "3").and("have.attr", "aria-setsize", "3");
+
+      // Frontend Languages children: count restarts at 1 with its own setsize (4),
+      // NOT continued as "4 of 7" across both groups.
+      cy.get("[udex-filter-menu]").shadow().find("udex-list-group-header").eq(1)
+        .find("udex-list-item").eq(0).shadow().find("[part=item]")
+        .should("have.attr", "aria-posinset", "1").and("have.attr", "aria-setsize", "4");
+      cy.get("[udex-filter-menu]").shadow().find("udex-list-group-header").eq(1)
+        .find("udex-list-item").eq(3).shadow().find("[part=item]")
+        .should("have.attr", "aria-posinset", "4").and("have.attr", "aria-setsize", "4");
+    });
+
+    it('positions each group header among the groups (N of group count)', () => {
+      // The collapsible MultiSelect header treeitem is the inner list-item's [part=item].
+      cy.get("[udex-filter-menu]").shadow().find("udex-list-group-header").eq(0)
+        .shadow().find("udex-list-item").shadow().find("[part=item]")
+        .should("have.attr", "aria-posinset", "1").and("have.attr", "aria-setsize", "2");
+      cy.get("[udex-filter-menu]").shadow().find("udex-list-group-header").eq(1)
+        .shadow().find("udex-list-item").shadow().find("[part=item]")
+        .should("have.attr", "aria-posinset", "2").and("have.attr", "aria-setsize", "2");
+    });
+  });
+
   describe("Filter Menu Single with search", () => {
     beforeEach(() => {
       cy.mount(filterMenuSingleWithSearch);
@@ -1597,6 +1659,16 @@ describe("Filter Menu component", () => {
           .find(".udex-list__group-list__content [role=listbox]").should("not.exist");
       });
 
+      it("content region (role=\"group\") is a sibling of the header list-item, not nested in its subtree slot", () => {
+        // Sibling-group structure: the content region is emitted alongside the
+        // header list-item inside .udex-list__group-list, and the header item
+        // carries no _subtree marker (no nested composition).
+
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-list > .udex-list__group-list__content[role='group']").should("exist");
+      });
+
       // Updated: host udex-list-item has role="none"; the treeitem role is set via
       // accessible-role on the host (which the template renders onto [part=item]).
       it("child items get accessible-role=\"treeitem\" on their host element", () => {
@@ -1687,10 +1759,28 @@ describe("Filter Menu component", () => {
           .find("#udex-list").should("have.attr", "role", "tree");
       });
 
-      it("non-collapsible group's list container has role=\"group\" (not \"listbox\") in tree mode", () => {
+      it("non-collapsible group's list container is transparent (role=\"none\") in tree mode so the header sits at the top level", () => {
         cy.get("#filter-menu-tree-non-collapsible").shadow()
           .find("udex-list-group-header").shadow()
-          .find(".udex-list__group-list").should("have.attr", "role", "group");
+          .find(".udex-list__group-list").should("have.attr", "role", "none");
+      });
+
+      it("children are wrapped in a nested role=\"group\" that sits as a sibling of the header treeitem", () => {
+        // Sibling-group structure: the role="group" container is emitted alongside
+        // the header inside .udex-list__group-list; the header item is not composed
+        // into a subtree slot.
+        cy.get("#filter-menu-tree-non-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-list > [role='group']").should("exist");
+
+        cy.get("#filter-menu-tree-non-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find("udex-list-item").should("not.have.attr", "_subtree");
+
+        cy.get("#filter-menu-tree-non-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find("udex-list-item").shadow()
+          .find("[part=item] slot[name='subtree']").should("not.exist");
       });
 
       it("non-collapsible active header's inner udex-list-item has accessible-role=\"treeitem\"", () => {
@@ -1707,6 +1797,8 @@ describe("Filter Menu component", () => {
           .should("have.attr", "role", "treeitem")
           .and("have.attr", "aria-checked", "false");
       });
+
+
     });
 
     describe("Non-interactive group header in tree mode", () => {
@@ -1799,6 +1891,69 @@ describe("Filter Menu component", () => {
           .should("have.attr", "role", "treeitem");
       });
 
+      it("nests the content region (role=\"group\") inside the treeitem div (conformant tree)", () => {
+        // Conformant nesting: the role="group" content region is a DESCENDANT of the
+        // .udex-list__group-content treeitem, so screen readers count children per group
+        // natively (no author aria-posinset needed — matches the List component). This is
+        // what restores JAWS per-item counting under arrow navigation.
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-list > .udex-list__group-content--nested[role='treeitem']").should("exist");
+
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content--nested[role='treeitem'] .udex-list__group-list__content[role='group']").should("exist");
+
+        // The content region is no longer emitted as a sibling of the treeitem.
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-list > .udex-list__group-list__content[role='group']").should("not.exist");
+
+        // The visible header row wrapper now sits inside the treeitem (ring/layout target).
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content--nested[role='treeitem'] > .udex-list__group-header-row").should("exist");
+      });
+
+      it("emits explicit aria-posinset/aria-setsize on single-select child treeitems (forces JAWS re-announcement)", () => {
+        // Conformant nesting makes the structural count match the explicit values, so
+        // JAWS trusts and re-announces on every arrow step — not just on group entry.
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0).shadow()
+          .find("[part=item]").should("have.attr", "aria-posinset", "1");
+
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0).shadow()
+          .find("[part=item]").should("have.attr", "aria-setsize");
+      });
+
+
+      it("group header div does NOT render a -treeposition describedby node", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find("[id$=-treeposition]").should("not.exist");
+
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content")
+          .should("not.have.attr", "aria-describedby");
+      });
+
+      // The chevron button inside the collapsible header carries an "Expand"/"Collapse"
+      // accessible-name (a mouse affordance). Without an explicit aria-labelledby, that
+      // label folds into the treeitem's computed name, so VoiceOver announces the state
+      // twice ("… Collapse … expanded"). Pinning the name to the heading (+ supporting
+      // text) keeps the chevron's label out; aria-expanded still conveys the state.
+      it("group header div pins its accessible name to the heading (excludes the chevron's label)", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content")
+          .should("have.attr", "aria-labelledby")
+          .and("match", /^group-heading/);
+      });
+
       it("group header div has aria-expanded=\"true\" when expanded (default)", () => {
         cy.get("#filter-menu-single-tree-collapsible").shadow()
           .find("udex-list-group-header").shadow()
@@ -1923,7 +2078,7 @@ describe("Filter Menu component", () => {
       it("clicking the header body does NOT select any child", () => {
         cy.get("#filter-menu-single-tree-collapsible").shadow()
           .find("udex-list-group-header").shadow()
-          .find(".udex-list__group-content").click();
+          .find(".udex-list__group-header-row").click();
 
         cy.get("#filter-menu-single-tree-collapsible").shadow()
           .find("udex-list-group-header")
@@ -2000,6 +2155,16 @@ describe("Filter Menu component", () => {
           .find("udex-list-group-header").shadow()
           .find(".udex-list__group-content");
 
+      // The visible header body. In the conformant nested tree the treeitem div
+      // (.udex-list__group-content) wraps the whole subtree, so its geometric centre is
+      // over a child item — clicking it is "covered". The header row is the actual body
+      // (it sits above the children), so clicks target it while attribute assertions stay
+      // on the treeitem div above.
+      const headerRow = () =>
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-header-row");
+
       const arrowButton = () =>
         cy.get("#filter-menu-single-tree-collapsible").shadow()
           .find("udex-list-group-header").shadow()
@@ -2020,14 +2185,14 @@ describe("Filter Menu component", () => {
         headerDiv().should("not.have.attr", "aria-selected");
         headerDiv().should("not.have.attr", "aria-checked");
 
-        headerDiv().click();
+        headerRow().click();
 
         headerDiv().should("not.have.attr", "aria-selected");
         headerDiv().should("not.have.attr", "aria-checked");
       });
 
       it("clicking the header body does NOT set the selected property on the host group header", () => {
-        headerDiv().click();
+        headerRow().click();
 
         cy.get("#filter-menu-single-tree-collapsible").shadow()
           .find("udex-list-group-header").then($gh => {
@@ -2036,7 +2201,7 @@ describe("Filter Menu component", () => {
       });
 
       it("clicking the header body does NOT select any child item", () => {
-        headerDiv().click();
+        headerRow().click();
 
         childItems().each($item => {
           cy.wrap($item).shadow()
@@ -2049,7 +2214,7 @@ describe("Filter Menu component", () => {
       it("clicking the header body does NOT collapse the group", () => {
         headerDiv().should("have.attr", "aria-expanded", "true");
 
-        headerDiv().click();
+        headerRow().click();
 
         headerDiv().should("have.attr", "aria-expanded", "true");
         cy.get("#filter-menu-single-tree-collapsible").shadow()
@@ -2143,24 +2308,49 @@ describe("Filter Menu component", () => {
           .find("[udex-list]").should("not.have.attr", "aria-multiselectable");
       });
 
-      // Updated: `accessibleRoleForList` no longer collapses to `"group"` for grouped
-      // non-tree mode — it now returns `defaultAccessibleRole` (`"listbox"`) in every
-      // non-tree case. JAWS enters forms mode on `role="listbox"` but stays in virtual
-      // buffer mode on `role="group"`, so the fix is to keep the widget role stable.
-      it("inner list div has role=\"listbox\", not \"tree\"", () => {
+      // Per-group-listbox pattern: JAWS ignores role="group" boundaries and author
+      // aria-posinset within a single listbox (it read the flat total "1 of 8" instead of
+      // "1 of 4"), but counts options natively within a flat listbox. So each group becomes
+      // its own role="listbox" and the outer #udex-list drops its listbox role (it would
+      // otherwise be an invalid nested listbox). Not a tree.
+      it("inner list div is presentational (role=\"presentation\"), not listbox or tree", () => {
         cy.get("#filter-menu-single-group").shadow()
           .find("[udex-list]").shadow()
-          .find("#udex-list").should("have.attr", "role", "listbox");
+          .find("#udex-list")
+          .should("have.attr", "role", "presentation");
+      });
+
+      it("each group renders its own role=\"listbox\" labelled by its heading", () => {
+        cy.get("#filter-menu-single-group").shadow()
+          .find("udex-list-group-header").shadow()
+          .find("[role=listbox]")
+          .should("have.attr", "aria-labelledby", "group-heading");
       });
 
-      // Updated: `accessible-role="tree"` on the group header host was replaced by the
-      // `_tree-mode` boolean attribute. SingleSelect must not activate tree mode, so the
-      // attribute must be absent (and the host role stays "group" for non-tree grouped
-      // mode).
-      it("group header host has role=\"group\" and no _tree-mode attribute", () => {
+      it("the outer group wrapper is transparent (role=\"none\") so the label is not announced twice", () => {
+        cy.get("#filter-menu-single-group").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group")
+          .should("have.attr", "role", "none")
+          .and("not.have.attr", "aria-labelledby");
+      });
+
+      it("group child items have role=\"option\" (inside the per-group listbox), not treeitem", () => {
+        cy.get("#filter-menu-single-group").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0).shadow()
+          .find("[part=item]")
+          .should("have.attr", "role", "option")
+          .and("not.have.attr", "role", "treeitem");
+      });
+
+      // The group header host stays role="none" (transparent). The widget role now lives on
+      // the inner per-group role="listbox" (asserted above), not on the host or the outer
+      // div.udex-list__group, so the heading is announced once.
+      it("group header host has role=\"none\" and no _tree-mode attribute", () => {
         cy.get("#filter-menu-single-group").shadow()
           .find("udex-list-group-header")
-          .should("have.attr", "role", "group")
+          .should("have.attr", "role", "none")
           .and("not.have.attr", "_tree-mode");
       });
 

package/cypress/specs/List.cy.tsx

@@ -45,8 +45,10 @@ const collapsibleListRadioGroup = <UDExList id="list-group-header-collapsible" m
 </UDExList>;
 
 // Regression fixture: grouped MultiSelect list WITHOUT any collapsible group header.
-// This must stay on the listbox pattern (role="listbox", no aria-multiselectable, items
-// role="option") because _hasCollapsibleGroups is false.
+// This stays on the listbox pattern (role="listbox", items role="option") because
+// _hasCollapsibleGroups is false — it does NOT enter the tree pattern. As a
+// MultiSelect listbox it still exposes aria-multiselectable="true" so each option's
+// aria-selected state is announced.
 const nonCollapsibleList = <UDExList id="list-group-header-non-collapsible" mode="MultiSelect">
 <UDExListGroupHeader id="group-header-non-collapsible" supporting-text="Supporting text" label="Group Header">
   <UDExListItem>List Item1</UDExListItem>
@@ -344,6 +346,14 @@ describe("List - collapsible group header uses tree pattern", () => {
       .and("have.attr", "aria-expanded", "true");
   });
 
+  it("MultiSelect collapsible header: renders the role=\"group\" content region as a sibling of the header (not nested in the item)", () => {
+    cy.mount(collapsibleList);
+    cy.get("#group-header-collapsible").shadow()
+      .find("udex-list-item").should("not.have.attr", "_subtree");
+    cy.get("#group-header-collapsible").shadow()
+      .find(".udex-list__group-list > .udex-list__group-list__content[role='group']").should("exist");
+  });
+
   it("SingleSelect collapsible header: plain div gets role=\"treeitem\"", () => {
     cy.mount(collapsibleListSingleSelect);
     // SingleSelect => useListItemHeader=false => plain .udex-list__group-content <div>,
@@ -352,6 +362,20 @@ describe("List - collapsible group header uses tree pattern", () => {
       .find(".udex-list__group-content").should("have.attr", "role", "treeitem");
   });
 
+  it("SingleSelect collapsible header: nests the role=\"group\" content region inside the treeitem (conformant tree)", () => {
+    cy.mount(collapsibleListSingleSelect);
+    cy.get("#group-header-collapsible").shadow()
+      .find(".udex-list__group-list > .udex-list__group-content--nested[role='treeitem']").should("exist");
+    // The content region is a descendant of the treeitem, not a sibling.
+    cy.get("#group-header-collapsible").shadow()
+      .find(".udex-list__group-content--nested[role='treeitem'] .udex-list__group-list__content[role='group']").should("exist");
+    cy.get("#group-header-collapsible").shadow()
+      .find(".udex-list__group-list > .udex-list__group-list__content[role='group']").should("not.exist");
+    // The visible header row wrapper now sits inside the treeitem.
+    cy.get("#group-header-collapsible").shadow()
+      .find(".udex-list__group-content--nested[role='treeitem'] > .udex-list__group-header-row").should("exist");
+  });
+
   it("child items expose accessible-role=\"treeitem\" on the host", () => {
     cy.mount(collapsibleList);
     cy.get("#group-header-collapsible").find("udex-list-item")
@@ -372,9 +396,9 @@ describe("List - collapsible group header uses tree pattern", () => {
     innerList().should("have.attr", "role", "listbox");
   });
 
-  it("non-collapsible grouped list has no aria-multiselectable and no _tree-mode", () => {
+  it("non-collapsible MultiSelect list exposes aria-multiselectable=\"true\" but stays out of tree mode", () => {
     cy.mount(nonCollapsibleList);
-    innerList().should("not.have.attr", "aria-multiselectable");
+    innerList().should("have.attr", "aria-multiselectable", "true");
     cy.get("#group-header-non-collapsible").should("not.have.attr", "_tree-mode");
   });
 
@@ -385,6 +409,45 @@ describe("List - collapsible group header uses tree pattern", () => {
   });
 });
 
+// Added: flat MultiSelect list follows the WAI-ARIA multi-select listbox pattern —
+// the listbox is aria-multiselectable and each option carries aria-selected (instead
+// of relying on the decorative checkbox for state). This makes the screen reader
+// announce the selected/not-selected state ONCE (no duplicate from the checkbox) and,
+// crucially, re-announce it when Enter/Space toggles the focused option.
+describe("List - flat MultiSelect selection announcement", () => {
+  const flatMultiSelect = (
+    <UDExList id="flat-multi" mode="MultiSelect">
+      <UDExListItem id="flat-multi-item-1">List Item1</UDExListItem>
+      <UDExListItem id="flat-multi-item-2">List Item2</UDExListItem>
+    </UDExList>
+  );
+
+  it("options expose aria-selected and the checkbox is aria-hidden (no double state announcement)", () => {
+    cy.mount(flatMultiSelect);
+
+    cy.get("#flat-multi-item-1").shadow().find("[part=item]")
+      .should("have.attr", "role", "option")
+      .and("have.attr", "aria-selected", "false");
+    cy.get("#flat-multi-item-1").shadow().find("udex-checkbox")
+      .should("have.attr", "aria-hidden");
+  });
+
+  it("Enter on a focused option flips its aria-selected (state change is announced)", () => {
+    cy.mount(flatMultiSelect);
+
+    cy.get("#flat-multi-item-1").shadow().find("[part=item]").focus();
+    cy.realPress("Enter");
+
+    cy.get("#flat-multi-item-1").shadow().find("[part=item]")
+      .should("have.attr", "aria-selected", "true");
+
+    cy.realPress("Enter");
+
+    cy.get("#flat-multi-item-1").shadow().find("[part=item]")
+      .should("have.attr", "aria-selected", "false");
+  });
+});
+
 describe("List component - SingleContent accessible name", () => {
   it("uses accessible-name as aria-label when only accessible-name is set", () => {
     cy.mount(

package/cypress/specs/ListItem.cy.tsx

@@ -222,9 +222,11 @@ describe("ListItem", () => {
       });
     });
 
-    // Added: unit-level coverage for the WCAG 4.1.2 Treeview Checkbox pattern getters
-    // (ariaCheckedValue / checkboxAriaHidden). These only activate when the item's
-    // accessible-role === "treeitem" (set by SearchableListBase in the tree pattern).
+    // Added: unit-level coverage for the WCAG 4.1.2 Treeview Checkbox pattern getter
+    // (ariaCheckedValue). It only activates when the item's accessible-role ===
+    // "treeitem" (set by SearchableListBase in the tree pattern). The inner checkbox
+    // is always aria-hidden in MultiSelect (a visual affordance only) — state is
+    // announced by the item's own aria-checked (tree) / aria-selected (flat option).
     describe("Tree accessibility pattern (accessible-role=\"treeitem\")", () => {
       it("[part=item] has role=\"treeitem\" and aria-checked=\"false\" when unselected", () => {
         cy.mount(<UDExListItem
@@ -439,9 +441,11 @@ describe("ListItem", () => {
             .find("[part=item]").should("have.attr", "aria-selected", "true");
         });
 
-        // Regression: aria-selected must be absent when the item is NOT a treeitem
-        // (default listbox/option role). ariaSelectedValue guards on roleItem === "treeitem".
-        it("no aria-selected when accessible-role is not \"treeitem\" (SingleSelect default option)", () => {
+        // Updated: a SingleSelect option (default listbox role) now also exposes
+        // aria-selected so the screen reader announces its selected state natively.
+        // Previously options relied on a describedby state string, which made
+        // VoiceOver announce a phantom "selected" for every focused option.
+        it("SingleSelect default option exposes aria-selected", () => {
           cy.mount(<UDExListItem
             id="single-opt-item"
             mode={UDExListMode.SingleSelect}
@@ -450,7 +454,9 @@ describe("ListItem", () => {
           </UDExListItem>);
 
           cy.get("#single-opt-item").shadow()
-            .find("[part=item]").should("not.have.attr", "aria-selected");
+            .find("[part=item]")
+            .should("have.attr", "role", "option")
+            .and("have.attr", "aria-selected", "true");
         });
       });
 
@@ -485,7 +491,7 @@ describe("ListItem", () => {
           .find("[part=item]").should("not.have.attr", "aria-checked");
       });
 
-      it("inner udex-checkbox is NOT aria-hidden when not in tree mode", () => {
+      it("inner udex-checkbox is aria-hidden in flat MultiSelect (state announced via the option's aria-selected)", () => {
         cy.mount(<UDExListItem
           id="opt-item-checkbox"
           mode={UDExListMode.MultiSelect}
@@ -493,7 +499,27 @@ describe("ListItem", () => {
         </UDExListItem>);
 
         cy.get("#opt-item-checkbox").shadow()
-          .find("udex-checkbox").should("not.have.attr", "aria-hidden");
+          .find("udex-checkbox").should("have.attr", "aria-hidden");
+      });
+
+      it("MultiSelect option exposes aria-selected reflecting selection (unselected -> selected)", () => {
+        cy.mount(<UDExListItem
+          id="opt-item-selected"
+          mode={UDExListMode.MultiSelect}
+          label="JavaScript">
+        </UDExListItem>);
+
+        cy.get("#opt-item-selected").shadow()
+          .find("[part=item]")
+          .should("have.attr", "role", "option")
+          .and("have.attr", "aria-selected", "false");
+
+        cy.get("#opt-item-selected").then($el => {
+          ($el[0] as UDExListItem).selected = true;
+        });
+
+        cy.get("#opt-item-selected").shadow()
+          .find("[part=item]").should("have.attr", "aria-selected", "true");
       });
 
       it("explicit non-tree accessible-role (e.g. \"option\") still suppresses aria-checked", () => {

package/cypress/specs/SelectBox.cy.tsx

@@ -768,6 +768,25 @@ describe("SelectBox", () => {
         .should("have.attr", "_active-descendant");
     });
 
+    it("MultiSelect collapsible group keeps the host-aria sibling layout (no structural nesting)", () => {
+      cy.mount(groupHeaderCollapsible);
+
+      cy.get("#select-box").shadow().find(".udex-text-field__search").click();
+
+      // Fix 18 regression guard: SelectBox uses the aria-activedescendant model, so a
+      // collapsible group header must NOT structurally nest its items (fix 16 nesting is
+      // for the real-DOM-focus tree components only). Nesting would reflow the header
+      // container to wrap its items and spread the header focus ring over the whole group.
+      // The header's inner list-item must not own a subtree, and the items must remain in
+      // the sibling content region.
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").first()
+        .shadow()
+        .find(".udex-list__group-list__content")
+        .should("exist");
+    });
+
     it("MultiSelect mode - Left arrow collapses a collapsible group header, Right arrow expands it", () => {
       cy.mount(groupHeaderCollapsible);
 
@@ -2530,6 +2549,23 @@ describe("SelectBox", () => {
         .should("be.greaterThan", 0);
     });
 
+    it("SingleSelect collapsible group keeps the host-aria sibling layout (no structural nesting)", () => {
+      cy.mount(groupHeaderCollapsibleSingleSelect);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").first()
+        .shadow()
+        .find(".udex-list__group-list__content")
+        .should("exist");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").first()
+        .shadow()
+        .find(".udex-list__group-content")
+        .should("not.have.class", "udex-list__group-content--nested");
+    });
+
     const collapsedGroupWithSelectionFixture = <div style="width: 350px; position:relative;">
       <UDExSelectBox id="select-box" height="200px" label="Languages">
         <UDExSelectBoxGroupHeader label="Backend Languages" collapsible collapsed>
@@ -2595,6 +2631,70 @@ describe("SelectBox", () => {
     });
   });
 
+  describe("SingleSelect collapsible group headers", () => {
+    // Two collapsible groups; the second sits below the fold so its chevron is a
+    // "lower" header (the failing case in the original bug). No pre-selection needed.
+    const twoCollapsibleGroupsFixture = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box" height="200px" label="Languages">
+        <UDExSelectBoxGroupHeader label="Backend Languages" collapsible>
+          <UDExSelectBoxItem label="Java"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Python"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Go"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Ruby"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Rust"></UDExSelectBoxItem>
+        </UDExSelectBoxGroupHeader>
+        <UDExSelectBoxGroupHeader label="Frontend Languages" collapsible>
+          <UDExSelectBoxItem label="JavaScript"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="TypeScript"></UDExSelectBoxItem>
+        </UDExSelectBoxGroupHeader>
+      </UDExSelectBox>
+    </div>;
+
+    it("collapses a lower group header on a single chevron click (no focus-steal double click)", () => {
+      cy.mount(twoCollapsibleGroupsFixture);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+      cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+
+      // The second (lower) group starts expanded.
+      cy.get("#select-box").shadow()
+        .find("[udex-list-group-header]").eq(1)
+        .should("not.have.attr", "collapsed");
+
+      // A single click on its chevron must collapse it. Previously DOM focus jumped to
+      // the header body div, triggering a focusout→refocus + scroll-into-view that shifted
+      // the chevron and ate the first click, so the group only collapsed on the second.
+      cy.get("#select-box").shadow()
+        .find("[udex-list-group-header]").eq(1).shadow()
+        .find(".udex-list__group-heading__icon").click();
+
+      cy.get("#select-box").shadow()
+        .find("[udex-list-group-header]").eq(1)
+        .should("have.attr", "collapsed");
+    });
+
+    it("Enter on a group header does not select its items", () => {
+      cy.mount(groupHeaderCollapsibleSingleSelect);
+      cy.get("#select-box").shadow().find(".udex-text-field__search").click();
+      cy.realPress("ArrowDown");
+
+      // The collapsible group header is the active descendant (DOM focus stays on input).
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .should("have.attr", "_active-descendant");
+
+      cy.realPress("Enter");
+
+      // A SingleSelect group header is not a selectable option: Enter must select nothing.
+      cy.get("[udex-select-box-item]").each($item => {
+        cy.wrap($item).should("not.have.attr", "selected");
+      });
+
+      // The dropdown stays open (Enter did not commit a selection or close it).
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown").should("have.attr", "open");
+    });
+  });
+
   // Tree accessibility pattern: SelectBox uses tree pattern when group headers are present.
   describe("Tree accessibility pattern with group headers", () => {
     const selectBoxMultiSelectGroup = <div style="width: 350px; position:relative;">