@sapudex/web-components 2.61.0 → 2.62.0

package/cypress/specs/AccordionSpotlight.cy.tsx

@@ -253,6 +253,16 @@ describe("AccordionSpotlight — autoPlay", () => {
   });
 
   it("clicking the play button toggles the icon between pause and play", () => {
+    // Force reduced-motion off so autoPlay starts and the icon begins as "pause".
+    // The Cypress runner otherwise reports prefers-reduced-motion: reduce, which
+    // makes the component start paused.
+    cy.window().then((win) => {
+      cy.stub(win, "matchMedia")
+        .callThrough()
+        .withArgs("(prefers-reduced-motion: reduce)")
+        .returns({ matches: false, addEventListener() {}, removeEventListener() {} });
+    });
+
     cy.mount(
       <UDExAccordionSpotlight id="accordion-spotlight-toggle" autoPlay>
         <UDExAccordionSpotlightItem heading="Item 1" subheading="Sub 1" selected>
@@ -272,7 +282,7 @@ describe("AccordionSpotlight — autoPlay", () => {
     cy.get("[udex-accordion-spotlight]")
       .shadow()
       .find(".udex-accordion-spotlight__play-button")
-      .click();
+      .realClick();
 
     cy.get("[udex-accordion-spotlight]")
       .shadow()
@@ -282,7 +292,7 @@ describe("AccordionSpotlight — autoPlay", () => {
     cy.get("[udex-accordion-spotlight]")
       .shadow()
       .find(".udex-accordion-spotlight__play-button")
-      .click();
+      .realClick();
 
     cy.get("[udex-accordion-spotlight]")
       .shadow()
@@ -399,4 +409,35 @@ describe("AccordionSpotlight — accessibility", () => {
       .eq(0)
       .should("not.have.attr", "aria-hidden");
   });
+
+  it("setting item.selected = true activates that item", () => {
+    cy.mount(defaultAccordionSpotlight);
+
+    cy.get("[udex-accordion-spotlight-item]").eq(1).then(($item) => {
+      ($item[0] as any).selected = true;
+    });
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__button")
+      .eq(1)
+      .should("have.class", "udex-accordion-spotlight-item__button--active")
+      .and("have.attr", "aria-expanded", "true");
+  });
+
+  it("setting item.selected = true deactivates the previously active item", () => {
+    cy.mount(defaultAccordionSpotlight);
+
+    cy.get("[udex-accordion-spotlight-item]").eq(2).then(($item) => {
+      ($item[0] as any).selected = true;
+    });
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__button")
+      .eq(0)
+      .should("not.have.class", "udex-accordion-spotlight-item__button--active")
+      .and("have.attr", "aria-expanded", "false");
+  });
 });
+

package/cypress/specs/Carousel.cy.tsx

@@ -103,6 +103,94 @@ describe("UDExCarousel component", () => {
     cy.get("@next").should("have.attr", "disabled");
   });
 
+  it("keeps focus on the next button after clicking it instead of moving focus to the slide", () => {
+    cy.mount(
+      <UDExCarousel id="carousel" navigation-placement="bottom">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </UDExCarousel>
+    );
+
+    // Wait for the carousel to settle (navigation buttons rendered + enabled) so the
+    // realClick lands on a stable target.
+    cy.get("[udex-carousel]").shadow().find("[data-ui5-arrow-forward]").should("not.have.attr", "disabled");
+
+    // realClick (a genuine browser click) is required to faithfully exercise focus
+    // behaviour; Cypress' synthetic .click() does not manage focus for these custom
+    // elements the same way a real user click does.
+    cy.get("[udex-carousel]").shadow().find("[data-ui5-arrow-forward]").realClick();
+
+    // The next arrow is a udex-button, so focus lands on that host element inside
+    // the carousel's shadow root (not on the newly shown slide). The assertion is
+    // wrapped in a retryable .should() because the carousel re-renders after the
+    // click (disabled-state recalculation) and focus settles on the button.
+    cy.get("[udex-carousel]").should(($carousel) => {
+      const carousel = $carousel[0];
+      const nextButton = carousel.shadowRoot!.querySelector("[data-ui5-arrow-forward]");
+      expect(carousel.shadowRoot!.activeElement).to.eq(nextButton);
+    });
+  });
+
+  it("keeps focus on the previous button after clicking it instead of moving focus to the slide", () => {
+    cy.mount(
+      <UDExCarousel id="carousel" navigation-placement="bottom">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </UDExCarousel>
+    );
+
+    // Navigate forward to the last page first so that, after one click back, the
+    // previous button is still enabled (landing on page 0 would disable it and a
+    // disabled button cannot retain focus).
+    cy.get("[udex-carousel]").shadow().find("[data-ui5-arrow-forward]").should("not.have.attr", "disabled");
+    cy.get("[udex-carousel]").shadow().find("[data-ui5-arrow-forward]").realClick();
+    cy.get("[udex-carousel]").shadow().find("[data-ui5-arrow-forward]").should("not.have.attr", "disabled");
+    cy.get("[udex-carousel]").shadow().find("[data-ui5-arrow-forward]").realClick();
+    cy.get("[udex-carousel]").shadow().find("[data-ui5-arrow-back]").should("not.have.attr", "disabled");
+
+    cy.get("[udex-carousel]").shadow().find("[data-ui5-arrow-back]").realClick();
+
+    cy.get("[udex-carousel]").should(($carousel) => {
+      const carousel = $carousel[0];
+      const prevButton = carousel.shadowRoot!.querySelector("[data-ui5-arrow-back]");
+      expect(carousel.shadowRoot!.activeElement).to.eq(prevButton);
+    });
+  });
+
+  it("advances the current page on next click while retaining focus on the next button", () => {
+    cy.mount(
+      <UDExCarousel id="carousel" navigation-placement="bottom">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </UDExCarousel>
+    );
+
+    // Starts on the first page: next enabled, prev disabled.
+    cy.get("[udex-carousel]").shadow().find("[data-ui5-arrow-forward]").should("not.have.attr", "disabled");
+    cy.get("[udex-carousel]").shadow().find("[data-ui5-arrow-back]").should("have.attr", "disabled");
+
+    cy.get("[udex-carousel]").shadow().find("[data-ui5-arrow-forward]").realClick();
+
+    // Navigation still works: the current page advances (0 -> 1) and, as a
+    // user-observable consequence, the previous button becomes enabled.
+    cy.get("[udex-carousel]").should(($carousel) => {
+      const carousel = $carousel[0];
+      const inner = carousel.shadowRoot!.querySelector("[ui5-carousel]") as unknown as { _currentPageIndex: number };
+      expect(inner._currentPageIndex).to.eq(1);
+    });
+    cy.get("[udex-carousel]").shadow().find("[data-ui5-arrow-back]").should("not.have.attr", "disabled");
+
+    // ...and focus is retained on the triggering button.
+    cy.get("[udex-carousel]").should(($carousel) => {
+      const carousel = $carousel[0];
+      const nextButton = carousel.shadowRoot!.querySelector("[data-ui5-arrow-forward]");
+      expect(carousel.shadowRoot!.activeElement).to.eq(nextButton);
+    });
+  });
+
   it("tests navigation buttons are hidden when all items fit on one page", () => {
     cy.mount(
       <UDExCarousel id="carousel" items-per-page="S3 M3 L3 XL3" navigation-placement="bottom">

package/cypress/specs/CountrySelector.cy.tsx

@@ -1,4 +1,5 @@
 import { UDExCountrySelector } from "../support/component-imports.js";
+import type { UDExSearchableListBaseSelectionChangeEventDetail } from "../../src/SearchableListBase.js";
 
 const defaultCountrySelector = <div style={{ width: "300px" }}><UDExCountrySelector
   id="default"
@@ -20,6 +21,27 @@ const countrySelectorWithSupportingText = <UDExCountrySelector
 </UDExCountrySelector>
 
 describe("CountrySelector component", () => {
+  // Updated: unfiltered first opening includes expanded in the shared template's single status.
+  function UDExAssertFirstCountryActive() {
+    cy.get("@dropdownPopover").should("have.attr", "open");
+    cy.get("@defaultCountrySelector").find("[_active-descendant]").should($active => {
+      expect($active).to.have.length(1);
+      expect($active).to.have.attr("data-token-id", "AF");
+      expect($active).to.have.class("_udex-active-descendant");
+    });
+    cy.get("@defaultCountrySelector").find("._udex-active-descendant").should("have.length", 1);
+    cy.get("@defaultCountrySelector").find('[udex-list-item][data-token-id="AF"]').then($country => {
+      cy.get("@searchInput").should("have.attr", "aria-activedescendant", $country[0].id);
+    });
+    cy.get("@searchInput").should("have.attr", "aria-expanded", "true");
+    cy.get("@searchInput").should("be.focused").should($input => {
+      const UDExRoot = $input[0].getRootNode() as ShadowRoot;
+      expect($input[0].ownerDocument.activeElement).to.equal(UDExRoot.host);
+      expect(UDExRoot.activeElement).to.equal($input[0]);
+    });
+    cy.get("@defaultCountrySelector").find('[aria-live="polite"]').should("have.length", 1).and("have.text", "expanded");
+  }
+
   beforeEach(() => {
     cy.mount(defaultCountrySelector);
     cy.get("#default").shadow().as("defaultCountrySelector");
@@ -115,9 +137,10 @@ describe("CountrySelector component", () => {
     cy.get("@dropdownPopover").find("udex-list-item").first().should("have.attr", "data-token-id", "AF");
   });
 
-  it("opens the dropdown on trigger click", () => {
+  // Updated: pointer first opening must announce expanded as well as establishing the active country.
+  it("opens the dropdown on pointer click with the first country active and exact expanded status", () => {
     cy.get("@searchInput").click();
-    cy.get("@dropdownPopover").should("have.attr", "open");
+    UDExAssertFirstCountryActive();
   });
 
   it("closes the dropdown on trigger click", () => {
@@ -170,19 +193,29 @@ describe("CountrySelector component", () => {
     cy.get("@defaultCountrySelector").find(".udex-text-field__text-holder").should("have.text", "Afghanistan (افغانستان)");
   });
 
+  // Updated: keyboard opening immediately highlights the first country without moving DOM focus.
   it("open dropdown press `ArrowDown` key on search", () => {
-    cy.get("@searchInput").click().realPress("{downarrow}");
-    cy.get("@dropdownPopover").should("have.attr", "open");
+    cy.get("@searchInput").focus().realPress("ArrowDown");
+    UDExAssertFirstCountryActive();
   });
 
+  // Updated: Enter selects the country highlighted by opening, with no extra ArrowDown.
   it("set active country item on `Enter` press", () => {
-    cy.get("@searchInput").click().realPress("{downarrow}").realPress("{enter}");
+    cy.get("@searchInput").focus().realPress("ArrowDown");
+    UDExAssertFirstCountryActive();
+    cy.realPress("Enter");
     cy.get("@defaultCountrySelector").find(".udex-text-field__text-holder").should("have.text", "Afghanistan (افغانستان)");
   });
 
+  // Updated: Escape closes a genuinely keyboard-opened popup with an immediately active country.
   it("close dropdown press `Escape` key on search", () => {
-    cy.get("@searchInput").click().realPress("{downarrow}").realPress("Escape");
+    cy.get("@searchInput").focus().realPress("ArrowDown");
+    UDExAssertFirstCountryActive();
+    cy.realPress("Escape");
     cy.get("@dropdownPopover").should("not.have.attr", "open");
+    cy.get("@searchInput").should("be.focused").and("have.attr", "aria-expanded", "false");
+    cy.get("@searchInput").should("not.have.attr", "aria-activedescendant");
+    cy.get("@defaultCountrySelector").find("[_active-descendant], ._udex-active-descendant").should("not.exist");
   });
 
   it("emits before-open event when dropdown is about to open", () => {
@@ -257,3 +290,197 @@ describe("CountrySelector component", () => {
     });
   });
 });
+
+describe("CountrySelector keyboard accessibility regressions", () => {
+  const UDExCombobox = () => cy.get("[udex-country-selector]").shadow().find('input[role="combobox"]');
+  const UDExPopover = () => cy.get("[udex-country-selector]").shadow().find("[ui5-popover]");
+  const UDExList = () => cy.get("[udex-country-selector]").shadow().find("[udex-list]");
+  const UDExCountryOption = (UDExCode: string) => UDExList().find(`[udex-list-item][data-token-id="${UDExCode}"]`);
+  const UDExStatus = () => cy.get("[udex-country-selector]").shadow().find('[aria-live="polite"]');
+
+  function UDExAssertNativeInputFocus() {
+    UDExCombobox().should("be.focused").should($input => {
+      const UDExRoot = $input[0].getRootNode() as ShadowRoot;
+      expect($input[0].ownerDocument.activeElement).to.equal(UDExRoot.host);
+      expect(UDExRoot.activeElement).to.equal($input[0]);
+    });
+  }
+
+  function UDExAssertDescription(UDExExpected: string) {
+    UDExCombobox().should($input => {
+      const UDExIds = $input.attr("aria-describedby")!.split(/\s+/);
+      const UDExRoot = $input[0].getRootNode() as ShadowRoot;
+      expect(UDExIds).to.have.length(1);
+      const UDExDescription = UDExRoot.getElementById(UDExIds[0]);
+      expect(UDExDescription, "description resolves in the input's own shadow root").not.to.equal(null);
+      expect(UDExDescription!.textContent).to.equal(UDExExpected);
+    });
+  }
+
+  function UDExMountKeyboardCountrySelector(UDExPreselectedCountry?: string) {
+    // Observe errors without returning false: Cypress must still fail on any uncaught TypeError.
+    cy.on("uncaught:exception", cy.stub().as("countryUncaughtException"));
+    cy.mount(
+      <div id="country-selector-keyboard-fixture">
+        <button id="before-country-selector">Previous</button>
+        <UDExCountrySelector accessibleName="Country" supportingText="Choose a country" height="400px"
+          preselectedCountry={UDExPreselectedCountry}>
+        </UDExCountrySelector>
+      </div>
+    );
+    cy.get("#country-selector-keyboard-fixture").then($fixture => {
+      $fixture[0].addEventListener("selection-change", cy.stub().as("countrySelectionChange"));
+    });
+    cy.get("[udex-country-selector]").then($host => {
+      $host[0].addEventListener("close", cy.stub().as("countryDropdownClosed"));
+    });
+    UDExPopover().then($popover => {
+      $popover[0].addEventListener("ui5-open", cy.stub().as("countryPopoverOpened"));
+    });
+    UDExCombobox().then($input => {
+      $input[0].addEventListener("blur", cy.stub().as("countryComboboxBlur"));
+    });
+    cy.get("#before-country-selector").realClick();
+    cy.realPress("Tab");
+    UDExAssertNativeInputFocus();
+    UDExPopover().should("not.have.attr", "open");
+    UDExCombobox().should("have.attr", "aria-expanded", "false");
+  }
+
+  function UDExAssertActiveCountry(UDExCode: string) {
+    UDExCountryOption(UDExCode).should($country => {
+      expect($country).to.have.length(1);
+      expect($country).to.have.attr("_active-descendant");
+      expect($country).to.have.class("_udex-active-descendant");
+    }).then($country => {
+      UDExList().find("[_active-descendant]").should("have.length", 1).and($active => {
+        expect($active[0]).to.equal($country[0]);
+      });
+      UDExList().find("._udex-active-descendant").should("have.length", 1).and($highlight => {
+        expect($highlight[0]).to.equal($country[0]);
+      });
+      UDExCombobox().should("have.attr", "aria-activedescendant", $country[0].id);
+    });
+    UDExCountryOption(UDExCode).should("not.be.focused");
+    UDExAssertNativeInputFocus();
+  }
+
+  function UDExOpenWithActiveCountry(UDExOpenCount: number, UDExCode = "AF") {
+    cy.realPress("ArrowDown");
+    cy.get("@countryPopoverOpened").should("have.callCount", UDExOpenCount);
+    UDExPopover().should("have.attr", "open");
+    UDExCombobox().should("have.attr", "aria-expanded", "true");
+    UDExAssertActiveCountry(UDExCode);
+    // Updated: opening announces expanded; flat country navigation remains silent.
+    UDExStatus().should("have.length", 1).and("have.text", "expanded");
+    UDExAssertNativeInputFocus();
+  }
+
+  // Updated: opening announces expanded with the first country active; the next ArrowDown moves silently to the second.
+  it("opens with the first country active, advances on ArrowDown and selects a plain-data country with persistent close feedback and no blur or TypeError", () => {
+    const UDExName = "Afghanistan (افغانستان)";
+    UDExMountKeyboardCountrySelector();
+    cy.get("[udex-country-selector]").shadow().find('label[for="search-input"]').should("not.exist");
+    UDExCombobox().should("have.attr", "aria-label", "Country");
+    UDExCombobox().should("have.attr", "aria-haspopup", "listbox");
+    UDExList().should("have.attr", "role", "listbox");
+    UDExList().then($list => {
+      UDExCombobox().should("have.attr", "aria-controls", $list[0].id);
+    });
+    UDExAssertDescription("Choose a country");
+
+    UDExOpenWithActiveCountry(1);
+    cy.get("@countrySelectionChange").should("not.have.been.called");
+    UDExList().find("[_active-descendant]").should("have.length", 1);
+    UDExList().find("[udex-list-item]").first().should("have.attr", "data-token-id", "AF");
+    UDExCountryOption("AF").should("have.attr", "_active-descendant");
+    UDExCountryOption("AF").should("have.attr", "role", "option");
+    UDExCountryOption("AF").should("have.attr", "aria-label", UDExName);
+    UDExCountryOption("AF").should("have.attr", "aria-selected", "false");
+    UDExCountryOption("AF").then($country => {
+      UDExCombobox().should("have.attr", "aria-activedescendant", $country[0].id);
+    });
+    UDExAssertNativeInputFocus();
+    UDExAssertDescription("Choose a country");
+    UDExStatus().should("have.text", "expanded");
+    cy.get("@countrySelectionChange").should("not.have.been.called");
+    cy.get("@countryComboboxBlur").should("not.have.been.called");
+
+    cy.realPress("ArrowDown");
+    UDExAssertActiveCountry("AL");
+    UDExCountryOption("AF").should("not.have.attr", "_active-descendant");
+    UDExCountryOption("AL").should("have.attr", "aria-selected", "false");
+    UDExStatus().should("have.text", "");
+    cy.get("@countrySelectionChange").should("not.have.been.called");
+    cy.get("@countryComboboxBlur").should("not.have.been.called");
+    cy.realPress("ArrowUp");
+    UDExAssertActiveCountry("AF");
+
+    cy.realPress("Enter");
+    cy.get("@countrySelectionChange").should("have.been.calledOnce")
+      .its("lastCall.args.0").should((UDExEvent: CustomEvent<UDExSearchableListBaseSelectionChangeEventDetail>) => {
+        expect(UDExEvent.bubbles).to.equal(true);
+        expect(UDExEvent.detail.item).to.include({ _id: "AF", label: UDExName, selected: true });
+        expect(UDExEvent.detail.item).not.to.have.property("getAttribute");
+        expect(UDExEvent.detail.selectedItems).to.deep.equal([UDExEvent.detail.item]);
+      });
+    cy.get("@countryDropdownClosed").should("have.been.calledOnce");
+    UDExPopover().should("not.have.attr", "open");
+    UDExCombobox().should("have.attr", "aria-expanded", "false");
+    UDExCombobox().should("not.have.attr", "aria-activedescendant");
+    UDExList().find("[_active-descendant]").should("not.exist");
+    cy.get("[udex-country-selector]").should("have.prop", "selectedCountryName", UDExName);
+    cy.get("[udex-country-selector]").shadow().find(".udex-text-field__text-holder").should("have.text", UDExName);
+    UDExCountryOption("AF").should("have.attr", "aria-selected", "true");
+    UDExAssertDescription(`Choose a country ${UDExName}`);
+    UDExAssertNativeInputFocus();
+    // Assert after the complete close lifecycle, not just the selection handler.
+    UDExStatus().should("have.attr", "aria-atomic", "true");
+    UDExStatus().should("have.text", `${UDExName}, Selected`);
+    cy.get("@countryComboboxBlur").should("not.have.been.called");
+    cy.get("@countryUncaughtException").should("not.have.been.called");
+  });
+
+  // Updated: initial opening and Escape reopening announce expanded and immediately restore the selected country.
+  it("restores the preselected country immediately on initial opening and Escape reopening, then advances on ArrowDown", () => {
+    const UDExName = "Poland (Polska)";
+    UDExMountKeyboardCountrySelector("PL");
+    cy.get("[udex-country-selector]").should("have.prop", "selectedCountryName", UDExName);
+
+    [1, 2].forEach(UDExCycle => {
+      UDExOpenWithActiveCountry(UDExCycle, "PL");
+      UDExList().find("[_active-descendant]").should("have.length", 1);
+      UDExCountryOption("PL").should("have.attr", "_active-descendant");
+      UDExCountryOption("PL").should("have.attr", "aria-selected", "true");
+      UDExCountryOption("PL").should("have.attr", "aria-label", UDExName);
+      UDExCountryOption("AF").should("not.have.attr", "_active-descendant");
+      UDExCountryOption("PL").then($country => {
+        UDExCombobox().should("have.attr", "aria-activedescendant", $country[0].id);
+      });
+      UDExAssertNativeInputFocus();
+      UDExAssertDescription("Choose a country");
+      UDExStatus().should("have.text", "expanded");
+
+      cy.realPress("ArrowDown");
+      UDExAssertActiveCountry("PT");
+      UDExCountryOption("PL").should("not.have.attr", "_active-descendant");
+      UDExCountryOption("PL").should("have.attr", "aria-selected", "true");
+      UDExCountryOption("PT").should("have.attr", "aria-selected", "false");
+      UDExAssertDescription("Choose a country");
+      UDExStatus().should("have.text", "");
+
+      cy.realPress("Escape");
+      cy.get("@countryDropdownClosed").should("have.callCount", UDExCycle);
+      UDExPopover().should("not.have.attr", "open");
+      UDExCombobox().should("have.attr", "aria-expanded", "false");
+      UDExCombobox().should("not.have.attr", "aria-activedescendant");
+      UDExList().find("[_active-descendant]").should("not.exist");
+      UDExStatus().should("have.text", "");
+      UDExAssertNativeInputFocus();
+      cy.get("[udex-country-selector]").should("have.prop", "selectedCountryName", UDExName);
+      cy.get("@countrySelectionChange").should("not.have.been.called");
+      cy.get("@countryComboboxBlur").should("not.have.been.called");
+      cy.get("@countryUncaughtException").should("not.have.been.called");
+    });
+  });
+});

package/cypress/specs/FilterMenu.cy.tsx

@@ -1837,8 +1837,8 @@ describe("Filter Menu component", () => {
     //   - the list host still activates tree/treeitem semantics
     //   - aria-multiselectable is NOT set (SingleSelect distinction)
     //   - leaf items expose aria-selected (not aria-checked)
-    //   - header renders via the udex-list-item partial (useListItemHeader === true)
-    //     and exposes aria-expanded on [part=item]
+    //   - header renders as a header-only div treeitem (useListItemHeader === false)
+    //     with aria-expanded and ownership of a same-shadow sibling group
     describe("SingleSelect + collapsible groups", () => {
       beforeEach(() => {
         cy.mount(filterMenuSingleSelectGroupCollapsible);
@@ -1891,33 +1891,32 @@ 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.
+      // Updated: the header owns a same-shadow sibling group without nesting its leaves.
+      it("owns the sibling content group without nesting its slot inside the header treeitem", () => {
         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");
+          .find("[udex-list-group-header]").shadow()
+          .find(".udex-list__group-list > .udex-list__group-content.udex-list__group-header-wrap[role='treeitem']")
+          .should(UDExHeader => {
+            expect(UDExHeader).to.have.length(1);
+            const UDExRow = UDExHeader[0];
+            const UDExShadow = UDExRow.getRootNode() as ShadowRoot;
+            const UDExOwnedId = UDExRow.getAttribute("aria-owns");
+            expect(UDExOwnedId).to.match(/^\S+$/);
+            expect(UDExRow.getAttribute("aria-controls")).to.equal(UDExOwnedId);
+            const UDExGroups = UDExShadow.querySelectorAll(`[id="${UDExOwnedId}"]`);
+            expect(UDExGroups).to.have.length(1);
+            const UDExGroup = UDExGroups[0];
+            expect(UDExGroup.matches(".udex-list__group-list__content[role=group]")).to.equal(true);
+            expect(UDExGroup.getRootNode()).to.equal(UDExShadow);
+            expect(UDExGroup.parentElement).to.equal(UDExRow.parentElement);
+            expect(UDExRow.nextElementSibling).to.equal(UDExGroup);
+            expect(UDExRow.querySelector("slot, [role=group], [udex-list-item]")).to.equal(null);
+            expect(UDExGroup.querySelector("slot")!.assignedElements()).to.have.length(3);
+          });
       });
 
       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.
+        // Explicit per-group positions preserve child counts with the owned sibling group.
         cy.get("#filter-menu-single-tree-collapsible").shadow()
           .find("udex-list-group-header")
           .find("udex-list-item").eq(0).shadow()
@@ -2073,12 +2072,12 @@ describe("Filter Menu component", () => {
 
       // Updated: the header is now a plain <div>. Clicking its body does nothing at all
       // (no @click handler is wired on the div). This asserts no child gets selected.
-      // Full click/Enter/Space + collapse coverage is in the dedicated
-      // "activation collapses only, never selects" describe below.
+      // Additional activation/collapse coverage is in the dedicated
+      // "never selectable, collapses via arrows/arrow-button only" describe below.
       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-header-row").click();
+          .find("[udex-list-group-header]").shadow()
+          .find(".udex-list__group-content.udex-list__group-header-wrap").realClick();
 
         cy.get("#filter-menu-single-tree-collapsible").shadow()
           .find("udex-list-group-header")
@@ -2150,20 +2149,12 @@ describe("Filter Menu component", () => {
         openMenu("filter-menu-single-tree-collapsible");
       });
 
+      // The treeitem is header-only; its children live in the owned sibling group.
+      // Native clicks at its centre therefore target the header body, not a child item.
       const headerDiv = () =>
         cy.get("#filter-menu-single-tree-collapsible").shadow()
-          .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");
+          .find("[udex-list-group-header]").shadow()
+          .find(".udex-list__group-content.udex-list__group-header-wrap");
 
       const arrowButton = () =>
         cy.get("#filter-menu-single-tree-collapsible").shadow()
@@ -2185,14 +2176,15 @@ describe("Filter Menu component", () => {
         headerDiv().should("not.have.attr", "aria-selected");
         headerDiv().should("not.have.attr", "aria-checked");
 
-        headerRow().click();
+        headerDiv().realClick();
 
         headerDiv().should("not.have.attr", "aria-selected");
         headerDiv().should("not.have.attr", "aria-checked");
       });
 
+      // Updated: click the current header-only treeitem with native pointer events.
       it("clicking the header body does NOT set the selected property on the host group header", () => {
-        headerRow().click();
+        headerDiv().realClick();
 
         cy.get("#filter-menu-single-tree-collapsible").shadow()
           .find("udex-list-group-header").then($gh => {
@@ -2200,8 +2192,9 @@ describe("Filter Menu component", () => {
           });
       });
 
+      // Updated: click the current header-only treeitem with native pointer events.
       it("clicking the header body does NOT select any child item", () => {
-        headerRow().click();
+        headerDiv().realClick();
 
         childItems().each($item => {
           cy.wrap($item).shadow()
@@ -2211,10 +2204,11 @@ describe("Filter Menu component", () => {
 
       // 2) Clicking the header body must NOT collapse the group either — there is no
       //    @click handler on the div in the new implementation.
+      // Updated: click the current header-only treeitem with native pointer events.
       it("clicking the header body does NOT collapse the group", () => {
         headerDiv().should("have.attr", "aria-expanded", "true");
 
-        headerRow().click();
+        headerDiv().realClick();
 
         headerDiv().should("have.attr", "aria-expanded", "true");
         cy.get("#filter-menu-single-tree-collapsible").shadow()