@sapudex/web-components 2.62.0 → 2.63.1

package/cypress/specs/FilterMenuAccessibility.cy.tsx

@@ -0,0 +1,1017 @@
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import {
+  UDExFilterMenu, UDExFilterMenuGroupHeader, UDExFilterMenuItem, UDExFilterMenuSelectAll, UDExListItem,
+} from "../support/component-imports.js";
+import { UDExListMode } from "../../src/types/List.js";
+import type UDExFilterMenuElement from "../../src/FilterMenu.js";
+import type UDExFilterMenuGroupHeaderElement from "../../src/FilterMenuGroupHeader.js";
+import type UDExCheckboxElement from "../../src/Checkbox.js";
+import type { UDExSearchableListBaseSelectionChangeEventDetail } from "../../src/SearchableListBase.js";
+
+const UDExMenu = () => cy.get("[udex-filter-menu]");
+const UDExTrigger = () => UDExMenu().shadow().find("#filterMenuTrigger");
+const UDExPopover = () => UDExMenu().shadow().find("[ui5-popover]");
+const UDExList = () => UDExMenu().shadow().find("[udex-list]");
+const UDExGroup = () => UDExList().find("[udex-list-group-header]");
+const UDExHeaderItem = () => UDExGroup().shadow().find("[udex-list-item]#group-heading");
+const UDExHeaderRow = () => UDExHeaderItem().shadow().find('[part="item"]');
+const UDExLeaf = (UDExIndex: number) => UDExList().find("[udex-list-item]").eq(UDExIndex);
+const UDExLeafRow = (UDExIndex: number) => UDExLeaf(UDExIndex).shadow().find('[part="item"]');
+const UDExNormalize = (UDExText: string | null) => (UDExText || "").replace(/\s+/g, " ").trim();
+const UDExGroupName = "Programming Languages Digital Builders";
+const UDExChildName = "JavaScript Frontend web development";
+type UDExCheckedState = "false" | "true" | "mixed";
+
+function UDExOpenMenu(UDExKey: "Enter" | "Space" = "Enter") {
+  UDExPopover().then($popover => {
+    $popover[0].addEventListener("ui5-open", cy.stub().as("popoverOpened"), { once: true });
+  });
+  // Reach the native trigger through the normal tab order, not a programmatic row focus.
+  cy.get("#before-filter-menu").click();
+  cy.realPress("Tab");
+  UDExTrigger().should("be.focused");
+  cy.realPress(UDExKey);
+  cy.get("@popoverOpened").should("have.been.calledOnce");
+  cy.then(() => renderFinished());
+  UDExTrigger().should("have.attr", "aria-expanded", "true");
+  UDExPopover().should($popover => {
+    expect($popover).to.have.attr("open");
+    expect($popover).not.to.have.class("ui5-popup-opening");
+    expect($popover[0].shadowRoot!.getAnimations().filter(UDExAnimation =>
+      UDExAnimation.pending || UDExAnimation.playState === "running")).to.have.length(0);
+  });
+  UDExList().then($list => {
+    // Flat menus legitimately have no groups; do not make group existence a retry prerequisite.
+    $list.find("[udex-list-group-header][collapsible]").toArray().forEach(UDExGroupElement => {
+      cy.wrap(UDExGroupElement).shadow().find(".udex-list__group-list__content").should($content => {
+        expect($content[0].getAnimations().filter(UDExAnimation =>
+          UDExAnimation.pending || UDExAnimation.playState === "running")).to.have.length(0);
+      });
+    });
+  });
+}
+
+function UDExMountGrouped(UDExState: UDExCheckedState = "false", UDExCollapsible = true, UDExRated = false) {
+  cy.mount(
+    <div id="filter-menu-a11y-fixture">
+      <button id="before-filter-menu">Previous</button>
+      <UDExFilterMenu filterName="Languages" mode={UDExListMode.MultiSelect} hideResultBtn hideResetBtn>
+        <UDExFilterMenuGroupHeader id="source-group" label="<b>Programming</b> Languages"
+          supportingText="Digital Builders" collapsible={UDExCollapsible}
+          selected={UDExState !== "false"} indeterminate={UDExState === "mixed"}>
+          <UDExFilterMenuItem id="source-javascript" label="<b>Java</b>Script"
+            supportingText="Frontend web development" selected={UDExState !== "false"}
+            rating={UDExRated ? "4" : undefined} ratingCount={UDExRated ? "4.0" : undefined}
+            totalCount={UDExRated ? "20" : undefined}></UDExFilterMenuItem>
+          <UDExFilterMenuItem id="source-python" label="Python" supportingText="Data analysis"
+            selected={UDExState === "true"}></UDExFilterMenuItem>
+        </UDExFilterMenuGroupHeader>
+      </UDExFilterMenu>
+      <button id="after-filter-menu">Next</button>
+    </div>
+  );
+  cy.get("#filter-menu-a11y-fixture").then($fixture => {
+    $fixture[0].addEventListener("selection-change", cy.stub().as("selectionChange"));
+  });
+  UDExOpenMenu();
+  UDExHeaderRow().should("be.focused");
+}
+
+function UDExAssertDecorativeCheckbox(UDExItem: Cypress.Chainable<JQuery<HTMLElement>>,
+  UDExSelected: boolean, UDExIndeterminate = false) {
+  UDExItem.shadow().find("[udex-checkbox]").should($checkbox => {
+    expect($checkbox).to.have.attr("aria-hidden", "true");
+    expect($checkbox).to.have.attr("tabindex", "-1");
+    expect($checkbox).not.to.have.attr("accessible-name");
+    expect($checkbox).not.to.have.attr("aria-label");
+    expect($checkbox).not.to.have.attr("aria-labelledby");
+    const UDExCheckbox = $checkbox[0] as UDExCheckboxElement;
+    expect(UDExCheckbox.accessibleName || "").to.equal("");
+    expect(UDExCheckbox.checked).to.equal(UDExSelected);
+    expect(Boolean(UDExCheckbox.indeterminate)).to.equal(UDExIndeterminate);
+  });
+}
+
+function UDExAssertTreeRow(UDExRow: Cypress.Chainable<JQuery<HTMLElement>>, UDExName: string,
+  UDExState: UDExCheckedState) {
+  UDExRow.should($row => {
+    expect($row).to.have.attr("role", "treeitem");
+    expect($row).to.have.attr("aria-label", UDExName);
+    expect($row).to.have.attr("aria-checked", UDExState);
+    expect($row).not.to.have.attr("aria-selected");
+    expect($row).not.to.have.attr("aria-hidden");
+    expect($row.attr("aria-label")).not.to.match(/checkbox|selected|unselected|expand|collapse/i);
+  });
+}
+
+function assertRawRowName(item: Cypress.Chainable<JQuery<HTMLElement>>, expected: string, expectedHolder = expected) {
+  item.shadow().find(".udex-list__content-wrap").should($wrapper => {
+    const wrapper = $wrapper[0];
+    const root = wrapper.getRootNode() as ShadowRoot;
+    const row = root.querySelector('[part="item"]')!;
+    const content = wrapper.querySelector(".udex-list__content")!;
+    const textHolder = content.querySelector(".udex-list__text-holder")!;
+    const normalize = (text: string | null) => (text || "").replace(/\s+/g, " ").trim();
+    // Read the shared containers, not a space-joined reconstruction of their spans.
+    expect(normalize(textHolder.textContent)).to.equal(expectedHolder);
+    expect(normalize(content.textContent)).to.equal(expected);
+    expect(row).to.have.attr("aria-label", normalize(content.textContent));
+    expect(wrapper).to.have.attr("aria-label", expected);
+    const nameId = wrapper.getAttribute("aria-labelledby")!;
+    expect(nameId).to.equal(`${wrapper.getAttribute("_id")}-invisibleText`);
+    const source = root.getElementById(nameId);
+    expect(source, "hidden name source resolves in the row's own shadow root").not.to.equal(null);
+    expect(source!.getRootNode()).to.equal(root);
+    expect(source).to.have.class("hidden");
+    expect(normalize(source!.textContent)).to.equal(expected);
+    expect(normalize(source!.textContent)).to.equal(normalize(content.textContent));
+  });
+}
+
+function UDExAssertSelectionEvent(UDExSourceId: string, UDExSelectedIds: string[], UDExCallCount: number) {
+  UDExMenu().then($menu => {
+    const UDExSource = (UDExId: string) => $menu[0].querySelector(`#${UDExId}`);
+    const UDExExpectedItems = UDExSelectedIds.map(UDExSource);
+    expect(UDExExpectedItems.every(Boolean), "expected source nodes exist").to.equal(true);
+    cy.get("@selectionChange").should("have.callCount", UDExCallCount).its("lastCall.args.0.detail")
+      .should((UDExDetail: UDExSearchableListBaseSelectionChangeEventDetail) => {
+        expect(UDExDetail.item, "event identifies the original source, not its popup clone").to.equal(UDExSource(UDExSourceId));
+        expect(UDExDetail.selectedItems).to.have.length(UDExExpectedItems.length);
+        UDExDetail.selectedItems.forEach((UDExItem, UDExIndex) => {
+          expect(UDExItem).to.equal(UDExExpectedItems[UDExIndex]);
+        });
+      });
+    UDExMenu().should($current => {
+      const UDExSelected = ($current[0] as UDExFilterMenuElement).selectedItems;
+      expect(UDExSelected).to.have.length(UDExExpectedItems.length);
+      UDExSelected.forEach((UDExItem, UDExIndex) => expect(UDExItem).to.equal(UDExExpectedItems[UDExIndex]));
+    });
+  });
+}
+
+function UDExAssertLocalGroupName(UDExElement: Cypress.Chainable<JQuery<HTMLElement>>, UDExExpected: string) {
+  UDExElement.should($element => {
+    const UDExRoot = $element[0].getRootNode() as ShadowRoot;
+    expect($element).to.have.attr("aria-labelledby", "group-heading group-supporting-text");
+    const UDExIds = $element.attr("aria-labelledby")!.split(/\s+/);
+    const UDExName = UDExIds.map(UDExId => {
+      const UDExLabel = UDExRoot.getElementById(UDExId);
+      expect(UDExLabel, `${UDExId} resolves in the row's own shadow root`).not.to.equal(null);
+      expect(UDExLabel!.getRootNode()).to.equal(UDExRoot);
+      return UDExNormalize(UDExLabel!.textContent);
+    }).join(" ");
+    expect(UDExName).to.equal(UDExExpected);
+    expect(UDExNormalize(UDExRoot.querySelector(".udex-list__header")!.textContent)).to.equal(UDExName);
+    expect($element).not.to.have.attr("aria-describedby");
+    expect($element).not.to.have.attr("aria-description");
+    expect(UDExName).not.to.match(/expand|collapse|checkbox/i);
+  });
+}
+
+describe("FilterMenu accessibility regressions", () => {
+  describe("Trigger label in name", () => {
+    const UDExWindow = window as Window & { "udex-config"?: { translations?: Record<string, string> } };
+    let UDExOriginalConfig: typeof UDExWindow["udex-config"];
+
+    beforeEach(() => {
+      UDExOriginalConfig = UDExWindow["udex-config"];
+    });
+
+    afterEach(() => {
+      if (UDExOriginalConfig === undefined) {
+        delete UDExWindow["udex-config"];
+      } else {
+        UDExWindow["udex-config"] = UDExOriginalConfig;
+      }
+    });
+
+    const UDExAssertTriggerName = (UDExExpected: string) => UDExTrigger().should($trigger => {
+      expect($trigger).to.have.attr("role", "button");
+      expect($trigger).to.have.attr("aria-label", UDExExpected);
+      const UDExVisibleText = UDExNormalize($trigger[0].textContent);
+      expect(UDExVisibleText).to.equal(UDExExpected);
+      expect($trigger.attr("aria-label")).to.contain(UDExVisibleText);
+      expect($trigger.attr("aria-label")).not.to.match(/select options/i);
+    });
+
+    [
+      { name: "filter name", prefix: "", label: "Languages", badge: undefined, expected: "Languages" },
+      { name: "prefix, name and numeric badge", prefix: "Filter by:", label: "Languages", badge: 3, expected: "Filter by: Languages 3" },
+      { name: "prefix only without a zero badge", prefix: "Filter by:", label: "", badge: 0, expected: "Filter by:" },
+      { name: "numeric badge only", prefix: "", label: "", badge: 7, expected: "7" },
+    ].forEach(UDExCase => {
+      it(`uses the exact visible ${UDExCase.name}, with literal word boundaries`, () => {
+        cy.mount(<UDExFilterMenu filterNamePrefix={UDExCase.prefix} filterName={UDExCase.label} badgeValue={UDExCase.badge} />);
+        UDExAssertTriggerName(UDExCase.expected);
+      });
+    });
+
+    it("reacts to prefix, name and badge changes, omitting a badge when it becomes zero", () => {
+      cy.mount(<UDExFilterMenu filterNamePrefix="Filter by:" filterName="Languages" badgeValue={2} />);
+      UDExAssertTriggerName("Filter by: Languages 2");
+      UDExMenu().then($menu => {
+        const UDExElement = $menu[0] as UDExFilterMenuElement;
+        UDExElement.filterNamePrefix = "Show:";
+        UDExElement.filterName = "Platforms";
+        UDExElement.badgeValue = 5;
+      });
+      UDExAssertTriggerName("Show: Platforms 5");
+      UDExMenu().invoke("prop", "badgeValue", 0);
+      UDExAssertTriggerName("Show: Platforms");
+      UDExTrigger().find("[udex-badge]").should("not.exist");
+    });
+
+    it("preserves an explicit accessibleName until cleared, then restores the visible name", () => {
+      cy.mount(<UDExFilterMenu filterName="Languages" badgeValue={2} accessibleName="Choose programming languages" />);
+      UDExTrigger().should("have.attr", "aria-label", "Choose programming languages");
+      UDExMenu().invoke("prop", "badgeValue", 4);
+      UDExTrigger().find("[udex-badge]").should("have.text", "4");
+      UDExTrigger().should("have.attr", "aria-label", "Choose programming languages");
+      UDExMenu().invoke("prop", "accessibleName", "");
+      UDExAssertTriggerName("Languages 4");
+    });
+
+    it("forwards accessibleNameRef unchanged to local aria-labelledby targets without replacing the explicit aria-label", () => {
+      cy.mount(
+        <div>
+          <span id="outside-filter-label">Outside label</span>
+          <UDExFilterMenu filterName="Languages" accessibleName="Explicit language menu"
+            accessibleNameRef="local-filter-label local-filter-context" />
+        </div>
+      );
+      UDExMenu().then($menu => {
+        // The API forwards IDREFs; it does not bridge light-DOM labels across the shadow boundary.
+        const UDExRoot = $menu[0].shadowRoot!;
+        [["local-filter-label", "Language filters"], ["local-filter-context", "Available choices"]].forEach(([UDExId, UDExText]) => {
+          const UDExLabel = $menu[0].ownerDocument.createElement("span");
+          UDExLabel.id = UDExId;
+          UDExLabel.textContent = UDExText;
+          UDExRoot.append(UDExLabel);
+        });
+      });
+      UDExTrigger().should($trigger => {
+        expect($trigger).to.have.attr("aria-label", "Explicit language menu");
+        expect($trigger).to.have.attr("aria-labelledby", "local-filter-label local-filter-context");
+        const UDExRoot = $trigger[0].getRootNode() as ShadowRoot;
+        const UDExName = $trigger.attr("aria-labelledby")!.split(" ")
+          .map(UDExId => UDExRoot.getElementById(UDExId)!.textContent).join(" ");
+        expect(UDExName).to.equal("Language filters Available choices");
+        expect(UDExRoot.getElementById("outside-filter-label")).to.equal(null);
+      });
+      UDExMenu().invoke("prop", "accessibleNameRef", "");
+      UDExTrigger().should($trigger => {
+        expect($trigger.attr("aria-labelledby") || "").to.equal("");
+        expect($trigger).to.have.attr("aria-label", "Explicit language menu");
+      });
+    });
+
+    it("uses the localized SELECT_OPTIONS fallback only when no visible label or nonzero badge exists", () => {
+      UDExWindow["udex-config"] = {
+        ...UDExOriginalConfig,
+        translations: { ...UDExOriginalConfig?.translations, SELECT_OPTIONS: "Optionen auswählen" },
+      };
+      cy.mount(<UDExFilterMenu badgeValue={0} />);
+      UDExTrigger().should($trigger => {
+        expect(UDExNormalize($trigger[0].textContent)).to.equal("");
+        expect($trigger).to.have.attr("aria-label", "Optionen auswählen");
+      });
+      UDExMenu().invoke("prop", "filterName", "Languages");
+      UDExAssertTriggerName("Languages");
+    });
+  });
+
+  describe("Real-focus row names and native selection", () => {
+    [false, true].forEach(UDExCollapsible => {
+      // Updated: raw shared-container text must retain the same literal word boundaries as both name sources.
+      it(`names ${UDExCollapsible ? "collapsible" : "noncollapsible"} MultiSelect headers and children completely without decorative state words`, () => {
+        UDExMountGrouped("false", UDExCollapsible);
+        UDExAssertTreeRow(UDExHeaderRow(), UDExGroupName, "false");
+        UDExAssertTreeRow(UDExLeafRow(0), UDExChildName, "false");
+        assertRawRowName(UDExHeaderItem(), UDExGroupName);
+        assertRawRowName(UDExLeaf(0), UDExChildName);
+        UDExAssertDecorativeCheckbox(UDExHeaderItem(), false);
+        UDExAssertDecorativeCheckbox(UDExLeaf(0), false);
+        UDExHeaderItem().shadow().find('[part="title"]').should("have.text", "Programming Languages");
+        UDExHeaderItem().shadow().find('[part="supporting"]').should("have.text", "Digital Builders");
+        UDExLeaf(0).shadow().find('[part="title"]').should("have.text", "JavaScript");
+        cy.realPress("ArrowDown");
+        UDExLeafRow(0).should("be.focused");
+        assertRawRowName(UDExLeaf(0), UDExChildName);
+      });
+    });
+
+    it("keeps literal label/support boundaries in nonInteractive noncollapsible and collapsible headers", () => {
+      [false, true].forEach(collapsible => {
+        cy.mount(
+          <div>
+            <button id="before-filter-menu">Previous</button>
+            <UDExFilterMenu filterName="Languages" mode={UDExListMode.MultiSelect} hideResultBtn hideResetBtn>
+              <UDExFilterMenuGroupHeader nonInteractive collapsible={collapsible}
+                label="<b>Programming</b> Languages" supportingText="Digital Builders">
+                <UDExFilterMenuItem label="JavaScript" supportingText="Frontend web development" />
+              </UDExFilterMenuGroupHeader>
+            </UDExFilterMenu>
+          </div>
+        );
+        UDExOpenMenu();
+        UDExGroup().shadow().find(".udex-list__inactive-header-content").should($content => {
+          const normalize = (text: string | null) => (text || "").replace(/\s+/g, " ").trim();
+          expect(normalize($content[0].textContent)).to.equal(UDExGroupName);
+          expect($content[0].querySelector(".udex-list__header-title")!.textContent)
+            .to.equal("Programming Languages");
+          expect(normalize($content[0].parentElement!.textContent)).to.equal(UDExGroupName);
+        });
+        UDExGroup().shadow().find("[udex-list-item]#group-heading").should("not.exist");
+      });
+    });
+
+    it("includes rating metadata after the grouped child's label and supporting text", () => {
+      UDExMountGrouped("false", true, true);
+      UDExAssertTreeRow(UDExLeafRow(0), `${UDExChildName} Rating 4.0, Total 20, Rating Indicator 4 of 5`, "false");
+      UDExAssertDecorativeCheckbox(UDExLeaf(0), false);
+      UDExLeaf(0).shadow().find("[udex-rating-indicator]")
+        .should("have.attr", "aria-label", "Rating 4.0, Total 20, Rating Indicator 4 of 5");
+    });
+
+    ["pointer", "Enter", "Space"].forEach(UDExActivation => {
+      it(`preserves real-focus row identity and exact source event payloads through false → true → mixed via ${UDExActivation}`, () => {
+        UDExMountGrouped();
+        const UDExIdentities = new Map<string, HTMLElement>();
+        const UDExNodeQueries = [UDExGroup, UDExHeaderItem, UDExHeaderRow, () => UDExLeaf(0), () => UDExLeafRow(0)];
+        UDExNodeQueries.forEach((UDExQuery, UDExIndex) => {
+          UDExQuery().then($node => { UDExIdentities.set(String(UDExIndex), $node[0]); });
+        });
+        const UDExAssertIdentities = () => UDExNodeQueries.forEach((UDExQuery, UDExIndex) => {
+          UDExQuery().should($node => expect($node[0]).to.equal(UDExIdentities.get(String(UDExIndex))));
+        });
+        UDExAssertTreeRow(UDExHeaderRow(), UDExGroupName, "false");
+        if (UDExActivation === "pointer") {
+          UDExHeaderRow().click();
+        } else {
+          cy.realPress(UDExActivation);
+        }
+        UDExHeaderRow().should("be.focused");
+        UDExAssertTreeRow(UDExHeaderRow(), UDExGroupName, "true");
+        UDExAssertTreeRow(UDExLeafRow(0), UDExChildName, "true");
+        UDExAssertDecorativeCheckbox(UDExHeaderItem(), true);
+        UDExAssertDecorativeCheckbox(UDExLeaf(0), true);
+        UDExAssertSelectionEvent("source-group", ["source-group", "source-javascript", "source-python"], 1);
+        UDExAssertIdentities();
+
+        cy.realPress("ArrowDown");
+        UDExLeafRow(0).should("be.focused");
+        if (UDExActivation === "pointer") {
+          UDExLeafRow(0).click();
+        } else {
+          cy.realPress(UDExActivation);
+        }
+        UDExLeafRow(0).should("be.focused");
+        UDExAssertTreeRow(UDExLeafRow(0), UDExChildName, "false");
+        UDExAssertTreeRow(UDExHeaderRow(), UDExGroupName, "mixed");
+        UDExAssertDecorativeCheckbox(UDExHeaderItem(), true, true);
+        UDExAssertDecorativeCheckbox(UDExLeaf(0), false);
+        UDExAssertSelectionEvent("source-javascript", ["source-group", "source-python"], 2);
+        UDExAssertIdentities();
+      });
+    });
+
+    [UDExListMode.SingleSelect, UDExListMode.MultiSelect].forEach(UDExMode => {
+      // Updated: include the raw additional-text boundary and the same-shadow hidden name source.
+      it(`gives flat ${UDExMode} options complete label/support/additional names and native aria-selected`, () => {
+        cy.mount(
+          <div id="filter-menu-a11y-fixture">
+            <button id="before-filter-menu">Previous</button>
+            <UDExFilterMenu filterName="Languages" mode={UDExMode} hideResultBtn hideResetBtn>
+              {/* FilterMenu accepts HTMLElement sources; ListItem exposes additionalText, unlike FilterMenuItem. */}
+              <UDExListItem id="source-flat" label="<b>Java</b>Script" supportingText="Frontend web development"
+                additionalText="Code JS"></UDExListItem>
+            </UDExFilterMenu>
+          </div>
+        );
+        cy.get("#filter-menu-a11y-fixture").then($fixture => {
+          $fixture[0].addEventListener("selection-change", cy.stub().as("selectionChange"));
+        });
+        UDExOpenMenu("Space");
+        const UDExName = `${UDExChildName} Code JS`;
+        assertRawRowName(UDExLeaf(0), UDExName, UDExChildName);
+        UDExLeaf(0).shadow().find('[part="title"]').should("have.text", "JavaScript");
+        UDExLeafRow(0).should($row => {
+          expect($row).to.have.attr("role", "option");
+          expect($row).to.have.attr("aria-label", UDExName);
+          expect($row).to.have.attr("aria-selected", "false");
+          expect($row).not.to.have.attr("aria-checked");
+        });
+        if (UDExMode === UDExListMode.MultiSelect) {
+          UDExLeafRow(0).should("be.focused");
+          UDExAssertDecorativeCheckbox(UDExLeaf(0), false);
+        }
+        UDExLeafRow(0).click();
+        UDExLeafRow(0).should($row => {
+          expect($row).to.have.attr("aria-label", UDExName);
+          expect($row).to.have.attr("aria-selected", "true");
+          expect($row).not.to.have.attr("aria-checked");
+        });
+        UDExAssertSelectionEvent("source-flat", ["source-flat"], 1);
+        if (UDExMode === UDExListMode.MultiSelect) {
+          UDExLeafRow(0).should("be.focused");
+          UDExAssertDecorativeCheckbox(UDExLeaf(0), true);
+        }
+      });
+    });
+  });
+
+  describe("Select All has its own root count in a real-focus tree", () => {
+    const UDExSelectAll = () => UDExList().find("[udex-list-select-all]");
+    const UDExSelectAllItem = () => UDExSelectAll().shadow().find('[udex-list-item][part="group-item"]');
+    const UDExSelectAllRow = () => UDExSelectAllItem().shadow().find('[part="item"]');
+    const UDExChildren = () => UDExSelectAll().children("[udex-list-item]");
+    const UDExChild = (UDExIndex: number) => UDExChildren().eq(UDExIndex);
+    const UDExChildRow = (UDExIndex: number) => UDExChild(UDExIndex).shadow().find('[part="item"]');
+    const UDExSupport = "Available languages";
+    const UDExHeaderName = `Select All ${UDExSupport}`;
+    const UDExChoices = [
+      { id: "source-javascript", label: "JavaScript", support: "Frontend development" },
+      { id: "source-java", label: "Java", support: "Application development" },
+      { id: "source-python", label: "Python", support: "Data analysis" },
+    ];
+
+    function UDExMountSelectAll({ UDExDisabledChild = false, UDExSearch = false, UDExRootLeaf = false } = {}) {
+      cy.mount(
+        <div id="filter-menu-a11y-fixture">
+          <button id="before-filter-menu">Previous</button>
+          <UDExFilterMenu filterName="Languages" mode={UDExListMode.MultiSelect}
+            showSearchInput={UDExSearch} hideResultBtn hideResetBtn>
+            <UDExFilterMenuSelectAll id="source-select-all" supportingText={UDExSupport}>
+              {UDExChoices.map((UDExChoice, UDExIndex) => (
+                <UDExFilterMenuItem id={UDExChoice.id} label={UDExChoice.label} supportingText={UDExChoice.support}
+                  disabled={UDExDisabledChild && UDExIndex === 1}></UDExFilterMenuItem>
+              ))}
+            </UDExFilterMenuSelectAll>
+            {UDExRootLeaf && <UDExFilterMenuItem id="source-root-leaf" label="Other language"></UDExFilterMenuItem>}
+          </UDExFilterMenu>
+          <button id="after-filter-menu">Next</button>
+        </div>
+      );
+      cy.get("#filter-menu-a11y-fixture").then($fixture => {
+        $fixture[0].addEventListener("selection-change", cy.stub().as("selectionChange"));
+        $fixture[0].addEventListener("select-all", cy.stub().as("selectAll"));
+      });
+      UDExOpenMenu();
+      if (UDExSearch) {
+        UDExMenu().shadow().find("[udex-search]").shadow().find("#search-input").should("be.focused");
+      } else {
+        UDExAssertFocusedRow(UDExSelectAllRow());
+      }
+    }
+
+    function UDExAssertFocusedRow(UDExRow: Cypress.Chainable<JQuery<HTMLElement>>) {
+      UDExRow.should("be.focused").should($row => {
+        let UDExActive = $row[0].ownerDocument.activeElement;
+        while (UDExActive?.shadowRoot?.activeElement) {
+          UDExActive = UDExActive.shadowRoot.activeElement;
+        }
+        expect(UDExActive, "deep DOM focus is the native row, not its transparent host").to.equal($row[0]);
+        expect(($row[0].getRootNode() as ShadowRoot).activeElement).to.equal($row[0]);
+      });
+    }
+
+    function UDExAllElements(UDExRoot: Element | ShadowRoot): Element[] {
+      return Array.from(UDExRoot.querySelectorAll("*")).flatMap(UDExElement => [
+        UDExElement, ...(UDExElement.shadowRoot ? UDExAllElements(UDExElement.shadowRoot) : []),
+      ]);
+    }
+
+    function UDExAssertTransparentHosts(UDExHosts: Cypress.Chainable<JQuery<HTMLElement>>) {
+      UDExHosts.should($hosts => {
+        $hosts.toArray().forEach(UDExHost => {
+          expect(UDExHost).to.have.attr("role", "none");
+          ["aria-current", "aria-checked", "aria-selected", "aria-level", "aria-posinset", "aria-setsize"].forEach(UDExAttr => {
+            expect(UDExHost, `transparent host omits ${UDExAttr}`).not.to.have.attr(UDExAttr);
+          });
+        });
+      });
+    }
+
+    function UDExAssertHierarchy(UDExExpectedChildren = UDExChoices, UDExRootCount = 1) {
+      UDExList().should("have.attr", "aria-multiselectable", "true");
+      UDExList().shadow().find("#udex-list").should("have.attr", "role", "tree");
+      [UDExList, UDExSelectAll, UDExSelectAllItem, UDExChildren].forEach(UDExQuery => UDExAssertTransparentHosts(UDExQuery()));
+      UDExSelectAllItem().should("have.attr", "accessible-role", "treeitem");
+      UDExSelectAllRow().should($row => {
+        expect($row).to.have.attr("role", "treeitem");
+        expect($row).to.have.attr("aria-level", "1");
+        expect($row).to.have.attr("aria-posinset", "1");
+        expect($row).to.have.attr("aria-setsize", String(UDExRootCount));
+        expect($row).not.to.have.attr("aria-expanded");
+      });
+      UDExChildren().should("have.length", UDExExpectedChildren.length);
+      UDExExpectedChildren.forEach((UDExChoice, UDExIndex) => {
+        UDExChild(UDExIndex).should("have.attr", "accessible-role", "treeitem");
+        UDExChildRow(UDExIndex).should($row => {
+          expect($row).to.have.attr("role", "treeitem");
+          expect($row).to.have.attr("aria-label", `${UDExChoice.label} ${UDExChoice.support}`);
+          expect($row).to.have.attr("aria-level", "2");
+          expect($row).to.have.attr("aria-posinset", String(UDExIndex + 1));
+          expect($row).to.have.attr("aria-setsize", String(UDExExpectedChildren.length));
+        });
+      });
+      UDExSelectAll().shadow().find(".udex-list__group, .udex-list__group-list").should($wrappers => {
+        expect($wrappers).to.have.length(2);
+        $wrappers.toArray().forEach(UDExWrapper => expect(UDExWrapper).to.have.attr("role", "none"));
+      });
+      // Like GroupHeader, the child group is a same-shadow sibling of the header host.
+      // Explicit native levels/counts are checked; this is not proof of spoken AT hierarchy.
+      UDExSelectAllItem().should($item => {
+        const UDExGroup = $item[0].nextElementSibling!;
+        expect(UDExGroup).to.have.attr("role", "group");
+        expect(UDExGroup.getRootNode()).to.equal($item[0].getRootNode());
+        expect(UDExGroup.querySelector("slot")!.assignedElements()).to.have.length(UDExExpectedChildren.length);
+      });
+      UDExList().should($list => {
+        const UDExElements = UDExAllElements($list[0]);
+        expect(UDExElements.filter(UDExElement => UDExElement.matches('[role="option"], [role="listbox"]')),
+          "no options or nested listboxes across any popup list shadow root").to.have.length(0);
+        expect(UDExElements.filter(UDExElement => UDExElement.matches('[role="treeitem"]')))
+          .to.have.length(UDExExpectedChildren.length + UDExRootCount);
+        expect(UDExElements.filter(UDExElement => UDExElement.matches(
+          '[aria-live], [role="status"], [id$="-treeposition"], [aria-activedescendant], [aria-current]'
+        )), "no scripted navigation speech or current-item surrogate").to.have.length(0);
+        UDExElements.filter(UDExElement => UDExElement.matches('[role="treeitem"]')).forEach(UDExRow => {
+          ["aria-selected", "aria-describedby", "aria-description"].forEach(UDExAttr => {
+            expect(UDExRow).not.to.have.attr(UDExAttr);
+          });
+        });
+      });
+    }
+
+    function UDExTrackSelectAllNodes() {
+      const UDExQueries = [UDExSelectAll, UDExSelectAllItem, UDExSelectAllRow,
+        ...Array.from(UDExChoices.keys()).flatMap(UDExIndex => [() => UDExChild(UDExIndex), () => UDExChildRow(UDExIndex)])];
+      const UDExOriginals: HTMLElement[] = [];
+      UDExQueries.forEach(UDExQuery => UDExQuery().then($node => { UDExOriginals.push($node[0]); }));
+      return () => UDExQueries.forEach((UDExQuery, UDExIndex) => {
+        UDExQuery().should($node => expect($node[0], "rendered node identity survives navigation/selection")
+          .to.equal(UDExOriginals[UDExIndex]));
+      });
+    }
+
+    function UDExAssertSourceSelection(UDExSelectedIds: string[]) {
+      UDExMenu().should($menu => {
+        const UDExExpected = UDExSelectedIds.map(UDExId => $menu[0].querySelector(`#${UDExId}`));
+        expect(UDExExpected.every(Boolean)).to.equal(true);
+        const UDExSelected = ($menu[0] as UDExFilterMenuElement).selectedItems;
+        expect(UDExSelected).to.have.length(UDExExpected.length);
+        UDExSelected.forEach((UDExItem, UDExIndex) => expect(UDExItem).to.equal(UDExExpected[UDExIndex]));
+      });
+    }
+
+    function UDExAssertBulkEvent(UDExCount: number, UDExSelectionCount: number, UDExSelectedIds: string[]) {
+      UDExMenu().then($menu => {
+        cy.get("@selectAll").should("have.callCount", UDExCount).its("lastCall.args.0").should((UDExEvent: CustomEvent) => {
+          expect(UDExEvent.target, "public event comes from FilterMenu, not its internal Select All clone").to.equal($menu[0]);
+          expect(UDExEvent.bubbles).to.equal(true);
+          expect(UDExEvent.detail, "select-all is payloadless, unlike selection-change").to.be.oneOf([null, undefined]);
+        });
+      });
+      cy.get("@selectionChange").should("have.callCount", UDExSelectionCount);
+      UDExAssertSourceSelection(UDExSelectedIds);
+    }
+
+    function UDExAssertSelectAllState(UDExState: UDExCheckedState, UDExStates: UDExCheckedState[]) {
+      UDExAssertHierarchy();
+      UDExAssertTreeRow(UDExSelectAllRow(), UDExHeaderName, UDExState);
+      UDExAssertDecorativeCheckbox(UDExSelectAllItem(), UDExState !== "false", UDExState === "mixed");
+      UDExChoices.forEach((UDExChoice, UDExIndex) => {
+        UDExAssertTreeRow(UDExChildRow(UDExIndex), `${UDExChoice.label} ${UDExChoice.support}`, UDExStates[UDExIndex]);
+        UDExAssertDecorativeCheckbox(UDExChild(UDExIndex), UDExStates[UDExIndex] === "true");
+      });
+      UDExMenu().shadow().find("[aria-live]").should("not.exist");
+    }
+
+    it("separates the default/custom named root (level 1, 1 of 1) from three children and returns native focus to the same header", () => {
+      UDExMountSelectAll();
+      const UDExAssertIdentities = UDExTrackSelectAllNodes();
+      UDExAssertSelectAllState("false", ["false", "false", "false"]);
+      UDExSelectAllItem().shadow().find('[part="title"]').should("have.text", "Select All");
+      UDExSelectAllItem().shadow().find('[part="supporting"]').should("have.text", UDExSupport);
+
+      cy.realPress("ArrowDown");
+      UDExAssertFocusedRow(UDExChildRow(0));
+      cy.realPress("ArrowUp");
+      UDExAssertFocusedRow(UDExSelectAllRow());
+      UDExAssertIdentities();
+      UDExAssertSelectAllState("false", ["false", "false", "false"]);
+
+      cy.get("#source-select-all").invoke("prop", "label", "Choose all languages");
+      UDExAssertTreeRow(UDExSelectAllRow(), `Choose all languages ${UDExSupport}`, "false");
+      UDExSelectAllItem().shadow().find('[part="title"]').should("have.text", "Choose all languages");
+      UDExAssertHierarchy();
+      UDExAssertFocusedRow(UDExSelectAllRow());
+      UDExAssertIdentities();
+      cy.get("@selectAll").should("not.have.been.called");
+      cy.get("@selectionChange").should("not.have.been.called");
+    });
+
+    it("clears and restores Select All tree semantics through MultiSelect → SingleSelect → MultiSelect while open", () => {
+      UDExMountSelectAll();
+      UDExAssertSelectAllState("false", ["false", "false", "false"]);
+      UDExSelectAllRow().realClick();
+      UDExAssertSelectAllState("true", ["true", "true", "true"]);
+      const UDExSelectedIds = ["source-select-all", ...UDExChoices.map(UDExChoice => UDExChoice.id)];
+      UDExAssertBulkEvent(1, 0, UDExSelectedIds);
+
+      UDExMenu().invoke("prop", "mode", UDExListMode.SingleSelect);
+      cy.then(() => renderFinished());
+      UDExPopover().should("have.attr", "open");
+      UDExTrigger().should("have.attr", "aria-expanded", "true");
+      UDExList().should("not.have.attr", "aria-multiselectable");
+      UDExList().shadow().find("#udex-list").should($list => {
+        expect($list).to.have.attr("role", "presentation");
+        expect($list).not.to.have.attr("aria-multiselectable");
+      });
+      [UDExList, UDExSelectAll, UDExSelectAllItem, UDExChildren].forEach(UDExQuery => UDExAssertTransparentHosts(UDExQuery()));
+      UDExSelectAll().should("have.prop", "mode", UDExListMode.SingleSelect);
+      // Select All keeps its decorative checkbox: only its native row role/state changes.
+      UDExSelectAllItem().should("have.prop", "mode", UDExListMode.MultiSelect);
+      UDExSelectAllItem().should("have.attr", "accessible-role", "option");
+      UDExSelectAllRow().should($row => {
+        expect($row).to.have.attr("role", "option");
+        expect($row).to.have.attr("aria-label", UDExHeaderName);
+        expect($row).to.have.attr("aria-selected", "true");
+        ["aria-checked", "aria-level", "aria-posinset", "aria-setsize", "aria-expanded"].forEach(UDExAttr => {
+          expect($row).not.to.have.attr(UDExAttr);
+        });
+      });
+      UDExAssertDecorativeCheckbox(UDExSelectAllItem(), true);
+      UDExSelectAll().shadow().find(".udex-list__group-list").should("have.attr", "role", "listbox");
+      UDExChoices.forEach((UDExChoice, UDExIndex) => {
+        UDExChild(UDExIndex).should("have.prop", "mode", UDExListMode.SingleSelect);
+        UDExChildRow(UDExIndex).should($row => {
+          expect($row).to.have.attr("role", "option");
+          expect($row).to.have.attr("aria-label", `${UDExChoice.label} ${UDExChoice.support}`);
+          expect($row).to.have.attr("aria-selected", "true");
+          ["aria-checked", "aria-level", "aria-expanded"].forEach(UDExAttr => {
+            expect($row).not.to.have.attr(UDExAttr);
+          });
+          // Grouped option positions remain valid outside tree mode; only their level is removed.
+          expect($row).to.have.attr("aria-posinset", String(UDExIndex + 1));
+          expect($row).to.have.attr("aria-setsize", String(UDExChoices.length));
+        });
+        UDExChild(UDExIndex).shadow().find("[udex-checkbox]").should("not.exist");
+      });
+      UDExList().should($list => {
+        expect(UDExAllElements($list[0]).filter(UDExElement => UDExElement.matches('[role="tree"], [role="treeitem"]')))
+          .to.have.length(0);
+      });
+      UDExAssertBulkEvent(1, 0, UDExSelectedIds);
+
+      UDExMenu().invoke("prop", "mode", UDExListMode.MultiSelect);
+      cy.then(() => renderFinished());
+      UDExPopover().should("have.attr", "open");
+      UDExTrigger().should("have.attr", "aria-expanded", "true");
+      UDExSelectAll().should("have.prop", "mode", UDExListMode.MultiSelect);
+      UDExSelectAllItem().should("have.prop", "mode", UDExListMode.MultiSelect);
+      UDExAssertSelectAllState("true", ["true", "true", "true"]);
+      UDExAssertBulkEvent(1, 0, UDExSelectedIds);
+    });
+
+    ["Enter", "Space", "pointer"].forEach(UDExActivation => {
+      it(`keeps counts and native row identity through bulk true/false and partial selection via ${UDExActivation}, preserving distinct public events`, () => {
+        UDExMountSelectAll();
+        const UDExAssertIdentities = UDExTrackSelectAllNodes();
+        const UDExActivate = (UDExRow: Cypress.Chainable<JQuery<HTMLElement>>) => {
+          if (UDExActivation === "pointer") {
+            UDExRow.realClick();
+          } else {
+            UDExAssertFocusedRow(UDExRow);
+            cy.realPress(UDExActivation);
+          }
+        };
+        const UDExAllSourceIds = ["source-select-all", ...UDExChoices.map(UDExChoice => UDExChoice.id)];
+        UDExAssertSelectAllState("false", ["false", "false", "false"]);
+
+        UDExActivate(UDExSelectAllRow());
+        UDExAssertSelectAllState("true", ["true", "true", "true"]);
+        UDExAssertBulkEvent(1, 0, UDExAllSourceIds);
+        UDExAssertFocusedRow(UDExSelectAllRow());
+        UDExAssertIdentities();
+
+        UDExActivate(UDExSelectAllRow());
+        UDExAssertSelectAllState("false", ["false", "false", "false"]);
+        UDExAssertBulkEvent(2, 0, []);
+        UDExAssertFocusedRow(UDExSelectAllRow());
+        UDExAssertIdentities();
+
+        cy.realPress("ArrowDown");
+        UDExAssertFocusedRow(UDExChildRow(0));
+        UDExActivate(UDExChildRow(0));
+        UDExAssertSelectAllState("mixed", ["true", "false", "false"]);
+        UDExAssertSelectionEvent("source-javascript", ["source-select-all", "source-javascript"], 1);
+        cy.get("@selectAll").should("have.callCount", 2);
+        UDExAssertFocusedRow(UDExChildRow(0));
+        UDExAssertIdentities();
+
+        cy.realPress("ArrowUp");
+        UDExAssertFocusedRow(UDExSelectAllRow());
+        UDExActivate(UDExSelectAllRow());
+        UDExAssertSelectAllState("true", ["true", "true", "true"]);
+        UDExAssertBulkEvent(3, 1, UDExAllSourceIds);
+        UDExAssertFocusedRow(UDExSelectAllRow());
+        UDExAssertIdentities();
+      });
+    });
+
+    it("counts the disabled child but skips it in keyboard navigation and keeps bulk selection mixed while it remains unchecked", () => {
+      UDExMountSelectAll({ UDExDisabledChild: true });
+      const UDExAssertIdentities = UDExTrackSelectAllNodes();
+      UDExChildRow(1).should($row => {
+        expect($row).to.have.attr("aria-disabled", "true");
+        expect($row).to.have.attr("tabindex", "-1");
+      });
+      cy.realPress("Space");
+      UDExAssertSelectAllState("mixed", ["true", "false", "true"]);
+      UDExAssertBulkEvent(1, 0, ["source-select-all", "source-javascript", "source-python"]);
+
+      cy.realPress("ArrowDown");
+      UDExAssertFocusedRow(UDExChildRow(0));
+      cy.realPress("ArrowDown");
+      UDExAssertFocusedRow(UDExChildRow(2));
+      cy.realPress("ArrowUp");
+      UDExAssertFocusedRow(UDExChildRow(0));
+      cy.realPress("Enter");
+      UDExAssertSelectAllState("mixed", ["false", "false", "true"]);
+      UDExAssertSelectionEvent("source-javascript", ["source-select-all", "source-python"], 1);
+      cy.get("@selectAll").should("have.callCount", 1);
+
+      cy.realPress("ArrowUp");
+      UDExAssertFocusedRow(UDExSelectAllRow());
+      cy.realPress("Space");
+      UDExAssertSelectAllState("mixed", ["true", "false", "true"]);
+      UDExAssertBulkEvent(2, 1, ["source-select-all", "source-javascript", "source-python"]);
+      cy.realPress("Space");
+      UDExAssertSelectAllState("false", ["false", "false", "false"]);
+      UDExAssertBulkEvent(3, 1, []);
+      cy.get("#source-java").should("have.prop", "selected", false);
+      UDExAssertFocusedRow(UDExSelectAllRow());
+      UDExAssertIdentities();
+    });
+
+    it("recounts filtered children independently of the single root and preserves result-only live text during real-focus navigation", () => {
+      UDExMountSelectAll({ UDExSearch: true });
+      const UDExSearchInput = () => UDExMenu().shadow().find("[udex-search]").shadow().find("#search-input");
+      const UDExSearchReset = () => UDExMenu().shadow().find("[udex-search]").shadow()
+        .find("[udex-control-button]#reset-button").shadow().find("button");
+      const UDExResults = () => UDExMenu().shadow().find('[aria-live="polite"]');
+      UDExAssertHierarchy();
+      // Search owns initial focus; Tab must enter the real header, not a host/active descendant.
+      cy.realPress("Tab");
+      UDExAssertFocusedRow(UDExSelectAllRow());
+      cy.realPress(["Shift", "Tab"]);
+      UDExSearchInput().should("be.focused").type("Java");
+      UDExAssertHierarchy([UDExChoices[0], UDExChoices[1]]);
+
+      const UDExAssertResultOnlyNavigation = () => {
+        UDExResults().should("have.length", 1).should("have.attr", "aria-atomic", "true");
+        UDExResults().invoke("text").then(UDExResultText => {
+          expect(UDExResultText).not.to.equal("");
+          expect(UDExResultText).not.to.match(/Select All|Java|Python|Available languages|level|\d+ of \d+/i);
+          // A nonempty search adds a real reset-button tab stop before the list.
+          cy.realPress("Tab");
+          UDExSearchReset().should("be.focused");
+          cy.realPress("Tab");
+          UDExSelectAllRow().then($row => {
+            const UDExOriginalHeader = $row[0];
+            UDExAssertFocusedRow(UDExSelectAllRow());
+            cy.realPress("ArrowDown");
+            UDExAssertFocusedRow(UDExChildRow(0));
+            cy.realPress("ArrowUp");
+            UDExAssertFocusedRow(UDExSelectAllRow());
+            UDExSelectAllRow().should($current => expect($current[0]).to.equal(UDExOriginalHeader));
+          });
+          UDExResults().should("have.text", UDExResultText);
+          cy.realPress(["Shift", "Tab"]);
+          UDExSearchReset().should("be.focused");
+          cy.realPress(["Shift", "Tab"]);
+          UDExSearchInput().should("be.focused");
+        });
+      };
+      UDExAssertResultOnlyNavigation();
+      UDExSearchInput().clear().type("JavaScript");
+      UDExAssertHierarchy([UDExChoices[0]]);
+      UDExAssertResultOnlyNavigation();
+      UDExSearchInput().clear();
+      UDExAssertHierarchy(UDExChoices);
+      cy.get("@selectionChange").should("not.have.been.called");
+      cy.get("@selectAll").should("not.have.been.called");
+    });
+
+    it("counts Select All as root 1 of 2 beside an ordinary leaf without adding either root to its three-child set", () => {
+      UDExMountSelectAll({ UDExRootLeaf: true });
+      UDExAssertHierarchy(UDExChoices, 2);
+      UDExAssertTreeRow(UDExSelectAllRow(), UDExHeaderName, "false");
+      const UDExRootLeaf = () => UDExList().children("[udex-list-item]");
+      UDExRootLeaf().should("have.length", 1);
+      UDExAssertTransparentHosts(UDExRootLeaf());
+      UDExAssertTreeRow(UDExRootLeaf().shadow().find('[part="item"]'), "Other language", "false");
+      UDExRootLeaf().shadow().find('[part="item"]').should($row => {
+        expect($row).to.have.attr("aria-level", "1");
+        expect($row).to.have.attr("aria-posinset", "2");
+        expect($row).to.have.attr("aria-setsize", "2");
+      });
+      cy.realPress("End");
+      UDExAssertFocusedRow(UDExRootLeaf().shadow().find('[part="item"]'));
+      cy.realPress("Home");
+      UDExAssertFocusedRow(UDExSelectAllRow());
+      cy.realPress("Enter");
+      UDExAssertHierarchy(UDExChoices, 2);
+      UDExAssertTreeRow(UDExSelectAllRow(), UDExHeaderName, "true");
+      UDExChoices.forEach((UDExChoice, UDExIndex) => {
+        UDExAssertTreeRow(UDExChildRow(UDExIndex), `${UDExChoice.label} ${UDExChoice.support}`, "true");
+      });
+      UDExAssertTreeRow(UDExRootLeaf().shadow().find('[part="item"]'), "Other language", "false");
+      UDExAssertBulkEvent(1, 0, ["source-select-all", ...UDExChoices.map(UDExChoice => UDExChoice.id)]);
+      UDExMenu().shadow().find("[aria-live]").should("not.exist");
+    });
+  });
+
+  describe("Expansion changes only expansion, never selection or focus", () => {
+    let UDExObserver: MutationObserver | undefined;
+
+    afterEach(() => {
+      UDExObserver?.disconnect();
+      UDExObserver = undefined;
+    });
+
+    (["false", "true", "mixed"] as const).forEach(UDExState => {
+      it(`keeps ${UDExState === "false" ? "unchecked" : UDExState === "true" ? "fully checked" : "partially checked"} header state and identities stable through Left/Right and source rerender`, () => {
+        UDExMountGrouped(UDExState);
+        const UDExRecords: MutationRecord[] = [];
+        const UDExKeyEvents: { key: string; prevented: boolean }[] = [];
+        const UDExOriginalNodes: HTMLElement[] = [];
+        let UDExSelectedSources: Element[];
+        const UDExNodeQueries = [UDExGroup, UDExHeaderItem, UDExHeaderRow, () => UDExLeaf(0), () => UDExLeafRow(0)];
+        UDExNodeQueries.forEach(UDExQuery => UDExQuery().then($node => { UDExOriginalNodes.push($node[0]); }));
+        UDExMenu().then($menu => {
+          UDExSelectedSources = [...($menu[0] as UDExFilterMenuElement).selectedItems];
+          $menu[0].addEventListener("keydown", UDExEvent => {
+            if (["ArrowLeft", "ArrowRight"].includes(UDExEvent.key)) {
+              UDExKeyEvents.push({ key: UDExEvent.key, prevented: UDExEvent.defaultPrevented });
+            }
+          });
+        });
+        UDExGroup().then($group => {
+          $group[0].addEventListener("header-press", cy.stub().as("headerPress"));
+          $group[0].addEventListener("accordion-icon-click", cy.stub().as("accordionToggle"));
+          $group[0].addEventListener("ui5-accordion-icon-click", cy.stub().as("prefixedAccordionToggle"));
+        });
+        UDExHeaderRow().then($row => {
+          $row[0].addEventListener("blur", cy.stub().as("headerBlur"));
+          cy.spy($row[0], "focus").as("headerRefocus");
+          UDExObserver = new MutationObserver(UDExChanges => UDExRecords.push(...UDExChanges));
+          UDExObserver.observe($row[0], {
+            attributes: true,
+            attributeOldValue: true,
+            attributeFilter: ["aria-expanded", "aria-checked", "aria-selected", "aria-label", "aria-hidden",
+              "aria-labelledby", "aria-description", "aria-describedby", "role", "tabindex"],
+          });
+        });
+
+        const UDExAssertStableState = (UDExCollapsed: boolean, UDExToggleCount: number) => {
+          cy.then(() => renderFinished());
+          UDExAssertTreeRow(UDExHeaderRow(), UDExGroupName, UDExState);
+          UDExAssertTreeRow(UDExLeafRow(0), UDExChildName, UDExState !== "false" ? "true" : "false");
+          UDExAssertTreeRow(UDExLeafRow(1), "Python Data analysis", UDExState === "true" ? "true" : "false");
+          UDExHeaderRow().should("be.focused").should($row => {
+            expect($row).to.have.attr("aria-expanded", String(!UDExCollapsed));
+            expect(($row[0].getRootNode() as ShadowRoot).activeElement).to.equal(UDExOriginalNodes[2]);
+          });
+          UDExNodeQueries.forEach((UDExQuery, UDExIndex) => {
+            UDExQuery().should($node => expect($node[0]).to.equal(UDExOriginalNodes[UDExIndex]));
+          });
+          cy.get("#source-group").should($source => {
+            expect($source[0]).to.have.property("collapsed", UDExCollapsed);
+            expect($source[0]).to.have.property("selected", UDExState !== "false");
+            expect(Boolean(($source[0] as UDExFilterMenuGroupHeaderElement).indeterminate)).to.equal(UDExState === "mixed");
+          });
+          UDExMenu().should($menu => {
+            const UDExSelected = ($menu[0] as UDExFilterMenuElement).selectedItems;
+            expect(UDExSelected).to.have.length(UDExSelectedSources.length);
+            UDExSelected.forEach((UDExItem, UDExIndex) => expect(UDExItem).to.equal(UDExSelectedSources[UDExIndex]));
+          });
+          UDExAssertDecorativeCheckbox(UDExHeaderItem(), UDExState !== "false", UDExState === "mixed");
+          cy.get("@headerBlur").should("not.have.been.called");
+          cy.get("@headerRefocus").should("not.have.been.called");
+          cy.get("@selectionChange").should("not.have.been.called");
+          cy.get("@headerPress").should("not.have.been.called");
+          ["@accordionToggle", "@prefixedAccordionToggle"].forEach(UDExAlias => {
+            cy.get(UDExAlias).should("have.callCount", UDExToggleCount).its("lastCall.args.0.detail")
+              .should("deep.equal", { collapsed: UDExCollapsed });
+          });
+          UDExMenu().shadow().find("[aria-live]").should("not.exist");
+          cy.then(() => {
+            UDExRecords.push(...UDExObserver!.takeRecords());
+            expect(UDExRecords.map(UDExRecord => UDExRecord.attributeName)).to.deep.equal(
+              Array(UDExToggleCount).fill("aria-expanded"));
+            expect(UDExRecords.map(UDExRecord => UDExRecord.oldValue)).to.deep.equal(
+              UDExToggleCount === 1 ? ["true"] : ["true", "false"]);
+          });
+        };
+
+        cy.realPress("ArrowLeft");
+        UDExAssertStableState(true, 1);
+        cy.realPress("ArrowLeft");
+        cy.realPress("ArrowLeft");
+        UDExAssertStableState(true, 1);
+
+        // A parent rerender must use the synchronized source collapsed state, not reopen the group.
+        UDExMenu().invoke("prop", "filterName", "Updated languages");
+        UDExTrigger().should("have.attr", "aria-label", "Updated languages");
+        UDExAssertStableState(true, 1);
+
+        cy.realPress("ArrowRight");
+        UDExAssertStableState(false, 2);
+        cy.realPress("ArrowRight");
+        cy.realPress("ArrowRight");
+        UDExAssertStableState(false, 2);
+        cy.then(() => {
+          expect(UDExKeyEvents).to.deep.equal([
+            { key: "ArrowLeft", prevented: true },
+            { key: "ArrowLeft", prevented: false },
+            { key: "ArrowLeft", prevented: false },
+            { key: "ArrowRight", prevented: true },
+            { key: "ArrowRight", prevented: false },
+            { key: "ArrowRight", prevented: false },
+          ]);
+        });
+      });
+    });
+  });
+
+  describe("SingleSelect group supporting names", () => {
+    [false, true].forEach(UDExPerGroupListbox => {
+      it(`resolves heading and support locally for each noncollapsible ${UDExPerGroupListbox ? "per-group listbox" : "group wrapper"}`, () => {
+        cy.mount(
+          <div>
+            <button id="before-filter-menu">Previous</button>
+            <UDExFilterMenu filterName="Languages" mode={UDExListMode.SingleSelect}>
+              {["Frontend", "Backend"].map(UDExLabel => (
+                <UDExFilterMenuGroupHeader label={`<b>${UDExLabel}</b> languages`} supportingText={`${UDExLabel} support`}>
+                  <UDExFilterMenuItem label={`${UDExLabel} choice`} supportingText="Option support"></UDExFilterMenuItem>
+                </UDExFilterMenuGroupHeader>
+              ))}
+              {!UDExPerGroupListbox && <UDExFilterMenuItem label="Other language"></UDExFilterMenuItem>}
+            </UDExFilterMenu>
+          </div>
+        );
+        UDExOpenMenu();
+        ["Frontend", "Backend"].forEach((UDExLabel, UDExIndex) => {
+          const UDExTarget = UDExGroup().eq(UDExIndex).shadow()
+            .find(UDExPerGroupListbox ? '[role="listbox"]' : '.udex-list__group[role="group"]');
+          UDExAssertLocalGroupName(UDExTarget, `${UDExLabel} languages ${UDExLabel} support`);
+        });
+      });
+    });
+
+    it("names a collapsible SingleSelect heading from label and support exactly once, excluding its chevron and children", () => {
+      cy.mount(
+        <div>
+          <button id="before-filter-menu">Previous</button>
+          <UDExFilterMenu filterName="Languages" mode={UDExListMode.SingleSelect}>
+            <UDExFilterMenuGroupHeader collapsible label="<b>Programming</b> Languages" supportingText="Digital Builders">
+              <UDExFilterMenuItem label="JavaScript" supportingText="Frontend web development"></UDExFilterMenuItem>
+            </UDExFilterMenuGroupHeader>
+          </UDExFilterMenu>
+        </div>
+      );
+      UDExOpenMenu();
+      const UDExHeading = () => UDExGroup().shadow().find('[part="group-item"][role="treeitem"]');
+      UDExAssertLocalGroupName(UDExHeading(), UDExGroupName);
+      UDExHeading().should($heading => {
+        expect($heading).to.have.attr("aria-expanded", "true");
+        expect($heading).not.to.have.attr("aria-checked");
+        expect($heading).not.to.have.attr("aria-selected");
+      });
+      UDExGroup().shadow().find(".udex-list__group-heading__icon").should("have.attr", "tabindex", "-1");
+    });
+  });
+
+  it("returns focus to the same trigger on Escape and permits Tab to leave the closed menu", () => {
+    UDExMountGrouped();
+    UDExMenu().then($menu => {
+      $menu[0].addEventListener("after-close", cy.stub().as("menuClosed"), { once: true });
+    });
+    UDExTrigger().then($trigger => {
+      const UDExOriginalTrigger = $trigger[0];
+      cy.realPress("Escape");
+      cy.get("@menuClosed").should("have.been.calledOnce");
+      UDExPopover().should("not.have.attr", "open");
+      UDExTrigger().should("be.focused").should($current => {
+        expect($current[0]).to.equal(UDExOriginalTrigger);
+        expect($current).to.have.attr("aria-expanded", "false");
+      });
+      cy.realPress("Tab");
+      cy.get("#after-filter-menu").should("be.focused");
+      cy.get("@selectionChange").should("not.have.been.called");
+    });
+  });
+});