@sapudex/web-components 2.47.0 → 2.49.0

package/cypress/specs/FilterMenu.cy.tsx

@@ -215,6 +215,89 @@ describe("Filter Menu component", () => {
       cy.get("@triggerBtn").should("have.attr", "aria-expanded", "false");
     });
 
+    // Added: regression for the JAWS arrow-key announcement fix.
+    // The trigger used to expose role="combobox" + aria-haspopup="true", which made
+    // JAWS announce arrow-key navigation (comboboxes imply arrow-driven popups). But
+    // FilterMenu opens ONLY on click / Enter / Space (handleTriggerKeydown handles just
+    // Space/Enter, never arrows). It is really a button that opens a dialog-style filter
+    // panel, so the trigger now exposes role="button" + aria-haspopup="dialog", and the
+    // popover exposes accessible-role="Dialog" to match the haspopup promise.
+    describe("Trigger ARIA — button role with dialog popup", () => {
+      const trigger = () =>
+        cy.get("[udex-filter-menu]").shadow().find("#filterMenuTrigger");
+
+      it('trigger has role="button" (not "combobox")', () => {
+        trigger().should("have.attr", "role", "button");
+      });
+
+      it('trigger does NOT have role="combobox"', () => {
+        trigger().should("not.have.attr", "role", "combobox");
+      });
+
+      it('trigger has aria-haspopup="dialog" (not "true")', () => {
+        trigger().should("have.attr", "aria-haspopup", "dialog");
+      });
+
+      it('trigger aria-expanded reflects state: "false" closed, "true" after click', () => {
+        trigger().should("have.attr", "aria-expanded", "false");
+        trigger().click();
+        trigger().should("have.attr", "aria-expanded", "true");
+      });
+
+      it("ArrowDown on the focused trigger does NOT open the dropdown", () => {
+        trigger().should("have.attr", "aria-expanded", "false");
+
+        trigger().focus().should("be.focused");
+        cy.realPress("ArrowDown");
+
+        // Dropdown must stay closed — arrow keys are not an activation path.
+        trigger().should("have.attr", "aria-expanded", "false");
+        cy.get("[udex-filter-menu]").shadow()
+          .find("ui5-popover").should("not.have.attr", "open");
+      });
+
+      it("ArrowUp on the focused trigger does NOT open the dropdown", () => {
+        trigger().should("have.attr", "aria-expanded", "false");
+
+        trigger().focus().should("be.focused");
+        cy.realPress("ArrowUp");
+
+        trigger().should("have.attr", "aria-expanded", "false");
+        cy.get("[udex-filter-menu]").shadow()
+          .find("ui5-popover").should("not.have.attr", "open");
+      });
+
+      // Enter and Space share the same handleTriggerKeydown branch
+      // (isSpace(e) || isEnter(e)); Enter exercises that activation path and proves
+      // the contrast with the ignored arrow keys above.
+      it("Enter DOES open the dropdown (contrast with arrow keys)", () => {
+        trigger().should("have.attr", "aria-expanded", "false");
+
+        trigger().focus().should("be.focused");
+        cy.realPress("Enter");
+
+        trigger().should("have.attr", "aria-expanded", "true");
+      });
+
+      it('popover exposes accessible-role="Dialog" when opened', () => {
+        trigger().click();
+        trigger().should("have.attr", "aria-expanded", "true");
+
+        cy.get("[udex-filter-menu]").shadow()
+          .find("ui5-popover").should("have.attr", "accessible-role", "Dialog");
+      });
+
+      it("trigger aria-controls points at the popover id", () => {
+        cy.get("[udex-filter-menu]").then(($el) => {
+          const id = ($el[0] as UDExFilterMenu)._id;
+          const popoverId = `${id}_udex-filter-menu-dropdown`;
+          trigger().should("have.attr", "aria-controls", popoverId);
+          cy.get("[udex-filter-menu]").shadow()
+            .find("ui5-popover").should("have.attr", "id", popoverId);
+        });
+      });
+    });
+
     it("checks label and supporting text for the item", () => {
       cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").click();
       cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list")
@@ -641,30 +724,55 @@ describe("Filter Menu component", () => {
       cy.get("@triggerBtn").should("be.focused");
     });
 
+    // Updated: removed the click-to-select + re-query + cy.focus() sequence. This test's
+    // intent is footer tab-order (list -> Result -> Reset), and the footer buttons render
+    // for MultiSelect regardless of selection. On open, the component focuses the first
+    // navigable element itself (focusFirstItem), so we Tab straight from there. We assert
+    // focus only at each footer stop — those have Cypress retry and verify the real intent;
+    // the exact opened-focus element (two shadow levels deep in the Select All header) is
+    // not asserted to avoid a brittle, ambiguous oracle.
     it("focus goes to Reset button when pressing Tab on a list item and Result button", () => {
       cy.mount(filterMenuSelectAll);
       cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
       cy.get("@triggerBtn").click();
 
-      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").as("list");
-      cy.get("@list").find("udex-list-item").eq(0).shadow().find(".udex-list__item").as("listItem");
-      cy.get("@listItem").click();
-
-      cy.realPress("Tab");
+      // Dropdown open establishes real focus on the first navigable element (component-driven).
+      // Assert focus at each footer stop so every Tab fires from a settled source.
       cy.realPress("Tab");
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__result-btn").shadow().find("button")
+        .should("have.focus");
 
+      cy.realPress("Tab");
       cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__reset-btn").shadow().find("button")
         .should("have.focus");
     });
 
+    // Updated: this test verifies footer tab-order WITH a selected item, so the selection
+    // is now established via property BEFORE opening the dropdown instead of clicking an
+    // item inside the open dropdown. Setting item.selected pre-open means the list renders
+    // already-selected (captured by _getInitialState on before-open), so there is no
+    // in-dropdown re-render to race the Tab. On open, focus lands on the Select All header
+    // wrapper (component-driven via focusHeader()), and we Tab from there to the Result btn.
     it("focus goes to Results button when pressing Tab on a list item and at least one item is selected", () => {
       cy.mount(filterMenuSelectAll);
+
+      // Select the first item via its public property before the dropdown opens.
+      cy.get("[udex-filter-menu]").find("udex-filter-menu-item").eq(0).then(($item) => {
+        ($item[0] as unknown as UDExFilterMenuItem).selected = true;
+      });
+
       cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
       cy.get("@triggerBtn").click();
 
-      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").find("udex-list-item").eq(0).shadow().find(".udex-list__item").as("listItem");
-      cy.get("@listItem").click();
+      // Confirm the item rendered selected (separate query — chaining a second have.attr
+      // asserts against the first attribute's string value, not the element).
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list")
+        .find("udex-list-item").eq(0).should("have.attr", "selected");
 
+      // Dropdown open establishes real focus on the first navigable element (component-driven).
+      // Tab to the Result button; the footer-stop assertion (with Cypress retry) verifies the
+      // tab-order intent. The exact opened-focus element is not asserted (ambiguous, two
+      // shadow levels deep in the Select All header).
       cy.realPress("Tab");
 
       cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__result-btn").shadow().find("button")
@@ -687,16 +795,29 @@ describe("Filter Menu component", () => {
       cy.get("#next-focus").should("have.focus");
     });
 
+    // Updated: removed the click-to-select + re-query + cy.focus() sequence. This test's
+    // intent is the full footer tab chain (first interactive element -> Result -> Reset ->
+    // #next-focus), and the footer buttons render for MultiSelect regardless of selection.
+    // On open, the component focuses the first navigable element itself (focusFirstItem), so
+    // we Tab straight from there. We assert focus only at each footer stop — those have
+    // Cypress retry and verify the real intent; the exact opened-focus element (the group
+    // header wrapper, in shadow DOM) is not asserted to avoid a brittle, ambiguous oracle.
     it("focus goes to next interactive element on the page when pressing Tab on Reset button", () => {
       cy.mount(filterMenuGroup);
       cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
       cy.get("@triggerBtn").click();
 
-      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").find("udex-list-item").eq(0).shadow().find(".udex-list__item").as("listItem");
-      cy.get("@listItem").click();
-
+      // Dropdown open establishes real focus on the first navigable element (component-driven).
+      // Assert focus at each footer stop so every Tab fires from a settled source; the final
+      // Tab from the Reset button closes the dropdown and moves focus to #next-focus.
       cy.realPress("Tab");
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__result-btn").shadow().find("button")
+        .should("have.focus");
+
       cy.realPress("Tab");
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__reset-btn").shadow().find("button")
+        .should("have.focus");
+
       cy.realPress("Tab");
 
       cy.get("#next-focus").should("have.focus");
@@ -1241,4 +1362,841 @@ describe("Filter Menu component", () => {
         .should("equal", 0);
     });
   });
+
+  // Added: WCAG 4.1.2 Treeview Checkbox pattern for MultiSelect + grouped items.
+  // Reference: WAI-ARIA Authoring Practices "Treeview Checkbox".
+  describe("Tree accessibility pattern (MultiSelect + groups)", () => {
+    const filterMenuMultiSelectGroupCollapsible = <UDExFilterMenu
+      id="filter-menu-tree-collapsible"
+      mode={UDExListMode.MultiSelect}
+      filter-name="Filter Name">
+      <UDExFilterMenuGroupHeader collapsible label="Programming Languages">
+        <UDExFilterMenuItem label="JavaScript"></UDExFilterMenuItem>
+        <UDExFilterMenuItem label="Python"></UDExFilterMenuItem>
+        <UDExFilterMenuItem label="Java"></UDExFilterMenuItem>
+      </UDExFilterMenuGroupHeader>
+    </UDExFilterMenu>;
+
+    const filterMenuMultiSelectGroupNonCollapsible = <UDExFilterMenu
+      id="filter-menu-tree-non-collapsible"
+      mode={UDExListMode.MultiSelect}
+      filter-name="Filter Name">
+      <UDExFilterMenuGroupHeader label="Programming Languages">
+        <UDExFilterMenuItem label="JavaScript"></UDExFilterMenuItem>
+        <UDExFilterMenuItem label="Python"></UDExFilterMenuItem>
+        <UDExFilterMenuItem label="Java"></UDExFilterMenuItem>
+      </UDExFilterMenuGroupHeader>
+    </UDExFilterMenu>;
+
+    const filterMenuMultiSelectGroupNonInteractive = <UDExFilterMenu
+      id="filter-menu-tree-non-interactive"
+      mode={UDExListMode.MultiSelect}
+      filter-name="Filter Name">
+      <UDExFilterMenuGroupHeader non-interactive label="Programming Languages">
+        <UDExFilterMenuItem label="JavaScript"></UDExFilterMenuItem>
+        <UDExFilterMenuItem label="Python"></UDExFilterMenuItem>
+      </UDExFilterMenuGroupHeader>
+    </UDExFilterMenu>;
+
+    // Updated: this regression fixture used to have `collapsible` on the group header.
+    // Since SingleSelect + at least one collapsible group now activates the tree pattern
+    // too, the non-tree regression must be exercised via a NON-collapsible group.
+    const filterMenuSingleSelectGroup = <UDExFilterMenu
+      id="filter-menu-single-group"
+      mode={UDExListMode.SingleSelect}
+      filter-name="Filter Name">
+      <UDExFilterMenuGroupHeader label="Programming Languages">
+        <UDExFilterMenuItem label="JavaScript"></UDExFilterMenuItem>
+        <UDExFilterMenuItem label="Python"></UDExFilterMenuItem>
+      </UDExFilterMenuGroupHeader>
+    </UDExFilterMenu>;
+
+    // Added: SingleSelect + at least one collapsible group DOES activate the tree pattern
+    // (headers become treeitems with aria-expanded, items become treeitems with aria-selected).
+    const filterMenuSingleSelectGroupCollapsible = <UDExFilterMenu
+      id="filter-menu-single-tree-collapsible"
+      mode={UDExListMode.SingleSelect}
+      filter-name="Filter Name">
+      <UDExFilterMenuGroupHeader collapsible label="Programming Languages">
+        <UDExFilterMenuItem label="JavaScript"></UDExFilterMenuItem>
+        <UDExFilterMenuItem label="Python"></UDExFilterMenuItem>
+        <UDExFilterMenuItem label="Java"></UDExFilterMenuItem>
+      </UDExFilterMenuGroupHeader>
+    </UDExFilterMenu>;
+
+    const filterMenuMultiSelectFlat = <UDExFilterMenu
+      id="filter-menu-multi-flat"
+      mode={UDExListMode.MultiSelect}
+      filter-name="Filter Name">
+      <UDExFilterMenuItem label="JavaScript"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Python"></UDExFilterMenuItem>
+    </UDExFilterMenu>;
+
+    const openMenu = (id: string) => {
+      cy.get(`#${id}`).shadow().find(".udex-filter-menu__trigger").click();
+    };
+
+    describe("MultiSelect + collapsible groups", () => {
+      beforeEach(() => {
+        cy.mount(filterMenuMultiSelectGroupCollapsible);
+        openMenu("filter-menu-tree-collapsible");
+      });
+
+      it("host [udex-list] has aria-multiselectable=\"true\"", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("[udex-list]").should("have.attr", "aria-multiselectable", "true");
+      });
+
+      it("inner list div has role=\"tree\"", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("[udex-list]").shadow()
+          .find("#udex-list").should("have.attr", "role", "tree");
+      });
+
+      it("group header host [udex-list-group-header] has role=\"none\"", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header").should("have.attr", "role", "none");
+      });
+
+      // Updated: `accessibleRole` string property on udex-list-group-header was replaced
+      // by a `_treeMode` boolean, reflected as the `_tree-mode` attribute (present when
+      // true). role="tree" now lives on the udex-list host + its shadow #udex-list, not
+      // on the group header host. The host role stays "none" (tested above) so that its
+      // treeitem child passes through to the tree parent.
+      it("group header host [udex-list-group-header] has _tree-mode attribute in tree mode", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header").should("have.attr", "_tree-mode");
+      });
+
+      it("udex-list host has role=\"none\" (transparent host; tree role lives on shadow #udex-list)", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("[udex-list]").should("have.attr", "role", "none");
+      });
+
+      it("group header inner wrapper has role=\"none\" and no aria-labelledby", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find("[part=item]")
+          .should("have.attr", "role", "none")
+          .and("not.have.attr", "aria-labelledby");
+      });
+
+      // Updated: aria-expanded now lives on the shadow [part=item] div (same element as
+      // role/aria-checked), not on the host. The host still exposes accessible-role which
+      // feeds the shadow role.
+      it("group header's inner udex-list-item has accessible-role=\"treeitem\"", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find("udex-list-item")
+          .should("have.attr", "accessible-role", "treeitem");
+      });
+
+      it("group header's inner rendered role is \"treeitem\" on [part=item]", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find("udex-list-item").shadow()
+          .find("[part=item]").should("have.attr", "role", "treeitem");
+      });
+
+      // Added: aria-expanded is on the shadow [part=item] div (was previously only on the
+      // host, which has role="none" and is invisible to AT).
+      it("group header's [part=item] has aria-expanded=\"true\" when expanded (default)", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find("udex-list-item").shadow()
+          .find("[part=item]").should("have.attr", "aria-expanded", "true");
+      });
+
+      it("group header's [part=item] has aria-expanded=\"false\" after collapsing", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header").then($gh => {
+            ($gh[0] as HTMLElement & { collapsed: boolean }).collapsed = true;
+          });
+
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find("udex-list-item").shadow()
+          .find("[part=item]").should("have.attr", "aria-expanded", "false");
+      });
+
+      it("content region has role=\"group\" (not \"region\") in tree mode", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-list__content").should("have.attr", "role", "group");
+      });
+
+      it("content region does NOT wrap slot in an inner role=\"listbox\" div", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-list__content [role=listbox]").should("not.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", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").each($item => {
+            cy.wrap($item).should("have.attr", "accessible-role", "treeitem");
+          });
+      });
+
+      it("child items get role=\"treeitem\" on their inner [part=item]", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0).shadow()
+          .find("[part=item]").should("have.attr", "role", "treeitem");
+      });
+
+      it("child items' inner checkbox is aria-hidden to avoid double-announce", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0).shadow()
+          .find("udex-checkbox").should("have.attr", "aria-hidden");
+      });
+
+      it("child item aria-checked=\"false\" when unselected", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0).shadow()
+          .find("[part=item]").should("have.attr", "aria-checked", "false");
+      });
+
+      it("child item aria-checked=\"true\" after selection", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0).shadow()
+          .find(".udex-list__item").click();
+
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0).shadow()
+          .find("[part=item]").should("have.attr", "aria-checked", "true");
+      });
+
+      it("group header aria-checked=\"mixed\" when some (not all) children selected", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0).shadow()
+          .find(".udex-list__item").click();
+
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find("udex-list-item").shadow()
+          .find("[part=item]").should("have.attr", "aria-checked", "mixed");
+      });
+
+      it("group header aria-checked=\"true\" when all children selected", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header").as("group");
+
+        cy.get("@group").find("udex-list-item").each($item => {
+          cy.wrap($item).shadow().find(".udex-list__item").click();
+        });
+
+        cy.get("@group").shadow()
+          .find("udex-list-item").shadow()
+          .find("[part=item]").should("have.attr", "aria-checked", "true");
+      });
+
+      it("group header aria-checked=\"false\" when no children selected (initial)", () => {
+        cy.get("#filter-menu-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find("udex-list-item").shadow()
+          .find("[part=item]").should("have.attr", "aria-checked", "false");
+      });
+    });
+
+    describe("MultiSelect + non-collapsible groups", () => {
+      beforeEach(() => {
+        cy.mount(filterMenuMultiSelectGroupNonCollapsible);
+        openMenu("filter-menu-tree-non-collapsible");
+      });
+
+      it("still activates the tree pattern on the list", () => {
+        cy.get("#filter-menu-tree-non-collapsible").shadow()
+          .find("[udex-list]").should("have.attr", "aria-multiselectable", "true");
+        cy.get("#filter-menu-tree-non-collapsible").shadow()
+          .find("[udex-list]").shadow()
+          .find("#udex-list").should("have.attr", "role", "tree");
+      });
+
+      it("non-collapsible group's list container has role=\"group\" (not \"listbox\") in tree mode", () => {
+        cy.get("#filter-menu-tree-non-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-list").should("have.attr", "role", "group");
+      });
+
+      it("non-collapsible active header's inner udex-list-item has accessible-role=\"treeitem\"", () => {
+        cy.get("#filter-menu-tree-non-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find("udex-list-item").should("have.attr", "accessible-role", "treeitem");
+      });
+
+      it("children have role=\"treeitem\" and aria-checked wired up", () => {
+        cy.get("#filter-menu-tree-non-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0).shadow()
+          .find("[part=item]")
+          .should("have.attr", "role", "treeitem")
+          .and("have.attr", "aria-checked", "false");
+      });
+    });
+
+    describe("Non-interactive group header in tree mode", () => {
+      beforeEach(() => {
+        cy.mount(filterMenuMultiSelectGroupNonInteractive);
+        openMenu("filter-menu-tree-non-interactive");
+      });
+
+      it("non-interactive header still renders as <header> (no treeitem role on the header itself)", () => {
+        cy.get("#filter-menu-tree-non-interactive").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__inactive-header").should("exist");
+      });
+
+      // Updated: check accessible-role on the host and role on the shadow [part=item]
+      // (host role is "none"; the treeitem role is applied inside the shadow template).
+      it("but its children still become treeitems", () => {
+        cy.get("#filter-menu-tree-non-interactive").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "accessible-role", "treeitem");
+
+        cy.get("#filter-menu-tree-non-interactive").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0).shadow()
+          .find("[part=item]").should("have.attr", "role", "treeitem");
+      });
+    });
+
+    // Updated: SingleSelect + grouped is only guaranteed non-tree when NO group is
+    // collapsible. SingleSelect + collapsible groups now activates the tree pattern
+    // (covered by the "SingleSelect + collapsible groups" describe below).
+    // Added: covers the broadened isTreeStructure branch (FilterMenu.isTreeStructure):
+    //   grouped && modeSingleSelect && hasCollapsibleGroup
+    // In this mode:
+    //   - 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]
+    describe("SingleSelect + collapsible groups", () => {
+      beforeEach(() => {
+        cy.mount(filterMenuSingleSelectGroupCollapsible);
+        openMenu("filter-menu-single-tree-collapsible");
+      });
+
+      it("inner list div has role=\"tree\" (SingleSelect + collapsible activates tree)", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("[udex-list]").shadow()
+          .find("#udex-list").should("have.attr", "role", "tree");
+      });
+
+      it("host [udex-list] has NO aria-multiselectable attribute (SingleSelect distinction)", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("[udex-list]").should("not.have.attr", "aria-multiselectable");
+      });
+
+      it("group header host has role=\"none\" and _tree-mode attribute present", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .should("have.attr", "role", "none")
+          .and("have.attr", "_tree-mode");
+      });
+
+      it("group header shadow .udex-list__group has role=\"none\"", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group").should("have.attr", "role", "none");
+      });
+
+      // Updated: useListItemHeader is now `modeMultiSelectOrRadioGroup` only, so a
+      // collapsible SingleSelect header (even in tree mode) renders the plain
+      // `single-group-header-collapsible` <div> partial — NOT a <udex-list-item>. The
+      // div carries the treeitem semantics directly: role, aria-expanded, aria-controls.
+      // This is the fix for the bug where the header was incorrectly selectable via
+      // click/Enter (the udex-list-item partial fired its own selection handlers).
+      it("group header renders as a plain div (.udex-list__group-content), not a udex-list-item", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content").should("exist");
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find("udex-list-item").should("not.exist");
+      });
+
+      it("group header div has role=\"treeitem\" (tree mode via singleCollapsibleHeaderRole)", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content")
+          .should("have.attr", "role", "treeitem");
+      });
+
+      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()
+          .find(".udex-list__group-content").should("have.attr", "aria-expanded", "true");
+      });
+
+      it("group header div has aria-expanded=\"false\" after collapsing", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").then($gh => {
+            ($gh[0] as HTMLElement & { collapsed: boolean }).collapsed = true;
+          });
+
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content").should("have.attr", "aria-expanded", "false");
+      });
+
+      // The header div is not a selectable widget in this mode — it must NOT expose any
+      // selection-state attribute (neither aria-checked nor aria-selected). Selection is
+      // reserved for the leaf treeitems.
+      // Updated: split the chained `.should(...).and(...)` into two separately-queried
+      // assertions. The chained `.and("not.have.attr", ...)` was re-yielding the subject
+      // as undefined (chai-jQuery "attr on undefined"); a fresh `.find()` per assertion is
+      // reliable.
+      it("group header div does NOT have aria-checked or aria-selected (not selectable)", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content")
+          .should("not.have.attr", "aria-checked");
+
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content")
+          .should("not.have.attr", "aria-selected");
+      });
+
+      it("child items get accessible-role=\"treeitem\" on their host element", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").each($item => {
+            cy.wrap($item).should("have.attr", "accessible-role", "treeitem");
+          });
+      });
+
+      it("child items get role=\"treeitem\" on their inner [part=item]", () => {
+        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", "role", "treeitem");
+      });
+
+      it("child items have aria-selected=\"false\" when unselected (initial)", () => {
+        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-selected", "false");
+      });
+
+      it("child items do NOT have aria-checked in SingleSelect tree mode", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0).shadow()
+          .find("[part=item]").should("not.have.attr", "aria-checked");
+      });
+
+      it("clicking a child sets its aria-selected=\"true\"", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0).shadow()
+          .find(".udex-list__item").click();
+
+        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-selected", "true");
+      });
+
+      // SingleSelect semantics: only one item can be selected at a time. Selecting a
+      // second item must set the first item's aria-selected back to "false".
+      // Updated: FilterMenu in SingleSelect mode auto-closes the dropdown when an item is
+      // selected (the popover gets display:none), so the two clicks cannot happen in one
+      // open session — the original test's second click failed on a hidden popover. Re-open
+      // the menu between selections. This also verifies the first selection persists across
+      // reopen and is correctly cleared when the second item is chosen.
+      it("selecting a second child reverts the first child's aria-selected to \"false\"", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0).shadow()
+          .find(".udex-list__item").click();
+
+        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-selected", "true");
+
+        // Dropdown auto-closed after the first selection — reopen it to select the second.
+        openMenu("filter-menu-single-tree-collapsible");
+
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(1).shadow()
+          .find(".udex-list__item").click();
+
+        // Reopen once more to inspect the resulting selection state.
+        openMenu("filter-menu-single-tree-collapsible");
+
+        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-selected", "false");
+
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(1).shadow()
+          .find("[part=item]").should("have.attr", "aria-selected", "true");
+      });
+
+      // 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.
+      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();
+
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").each($item => {
+            cy.wrap($item).shadow()
+              .find("[part=item]").should("have.attr", "aria-selected", "false");
+          });
+      });
+
+      it("ArrowRight on a collapsed header expands it (same as MultiSelect tree)", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").then($gh => {
+            ($gh[0] as HTMLElement & { collapsed: boolean }).collapsed = true;
+          });
+
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content").should("have.attr", "aria-expanded", "false");
+
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content").focus();
+        cy.realPress("ArrowRight");
+
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content").should("have.attr", "aria-expanded", "true");
+      });
+
+      it("ArrowLeft on an expanded header collapses it (same as MultiSelect tree)", () => {
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content").should("have.attr", "aria-expanded", "true");
+
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content").focus();
+        cy.realPress("ArrowLeft");
+
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content").should("have.attr", "aria-expanded", "false");
+      });
+    });
+
+    // Updated: covers the bug fix for a collapsible SingleSelect group header being
+    // incorrectly selectable. The fix renders the header as a plain <div>
+    // (useListItemHeader === modeMultiSelectOrRadioGroup, so SingleSelect no longer
+    // uses the <udex-list-item> partial). Consequences:
+    //   - The header <div> has NO @click handler, so clicking its body does NOTHING
+    //     (no select, and — unlike the old fix — no collapse either).
+    //   - The <div> wires @keydown=handleKeyDown, which ONLY handles Left/Right arrows.
+    //     There is no Enter/Space selection path.
+    //   - Collapse/expand happens via ArrowLeft/ArrowRight or the arrow <udex-button>.
+    //
+    // Oracle notes:
+    //   - "is the header selectable?" → the <div> exposes neither aria-selected nor
+    //     aria-checked, and clicking never sets `selected` on the host. It must stay
+    //     unselected.
+    //   - "did the toggle work?" → aria-expanded on the same <div> (driven by collapse
+    //     state) and the `collapsed` attribute on the host + slotted children.
+    describe("SingleSelect collapsible header — never selectable, collapses via arrows/arrow-button only", () => {
+      // Updated: this describe block was missing the mount + open setup, so every test
+      // failed with "#filter-menu-single-tree-collapsible never found". Mirror the sibling
+      // "SingleSelect + collapsible groups" block's beforeEach. The fixture and openMenu
+      // helper are defined in the parent describe scope.
+      beforeEach(() => {
+        cy.mount(filterMenuSingleSelectGroupCollapsible);
+        openMenu("filter-menu-single-tree-collapsible");
+      });
+
+      const headerDiv = () =>
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-content");
+
+      const arrowButton = () =>
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").shadow()
+          .find(".udex-list__group-heading__icon");
+
+      const childItems = () =>
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item");
+
+      // 1) Clicking the header body does NOT select it (no aria-selected/aria-checked,
+      //    no `selected` on the host) and does NOT select any child.
+      // Updated: split chained `.should(...).and(...)` into separate assertions on freshly
+      // queried elements — the chained `.and("not.have.attr", ...)` re-yields the subject
+      // as undefined through the double-shadow `.find()` chain (chai-jQuery "attr on
+      // undefined").
+      it("clicking the header body does NOT expose a selected state on the header", () => {
+        headerDiv().should("not.have.attr", "aria-selected");
+        headerDiv().should("not.have.attr", "aria-checked");
+
+        headerDiv().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();
+
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").then($gh => {
+            expect(($gh[0] as HTMLElement & { selected: boolean }).selected).to.not.equal(true);
+          });
+      });
+
+      it("clicking the header body does NOT select any child item", () => {
+        headerDiv().click();
+
+        childItems().each($item => {
+          cy.wrap($item).shadow()
+            .find("[part=item]").should("have.attr", "aria-selected", "false");
+        });
+      });
+
+      // 2) Clicking the header body must NOT collapse the group either — there is no
+      //    @click handler on the div in the new implementation.
+      it("clicking the header body does NOT collapse the group", () => {
+        headerDiv().should("have.attr", "aria-expanded", "true");
+
+        headerDiv().click();
+
+        headerDiv().should("have.attr", "aria-expanded", "true");
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").should("not.have.attr", "collapsed");
+      });
+
+      // 3) Pressing Enter on the focused header does NOT select it (no Enter selection
+      //    path on the div) and does NOT select any child.
+      it("pressing Enter on the focused header does NOT expose a selected state", () => {
+        headerDiv().focus();
+        cy.realPress("Enter");
+
+        headerDiv().should("not.have.attr", "aria-selected");
+        headerDiv().should("not.have.attr", "aria-checked");
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").then($gh => {
+            expect(($gh[0] as HTMLElement & { selected: boolean }).selected).to.not.equal(true);
+          });
+      });
+
+      it("pressing Enter on the focused header does NOT select any child item", () => {
+        headerDiv().focus();
+        cy.realPress("Enter");
+
+        childItems().each($item => {
+          cy.wrap($item).shadow()
+            .find("[part=item]").should("have.attr", "aria-selected", "false");
+        });
+      });
+
+      // 4) Left/Right arrows still collapse/expand. handleKeyDown collapses on ArrowLeft
+      //    when expanded and expands on ArrowRight when collapsed.
+      it("ArrowLeft collapses the expanded group and propagates `collapsed` to children", () => {
+        headerDiv().should("have.attr", "aria-expanded", "true");
+        childItems().each($item => {
+          cy.wrap($item).should("not.have.attr", "collapsed");
+        });
+
+        headerDiv().focus();
+        cy.realPress("ArrowLeft");
+
+        headerDiv().should("have.attr", "aria-expanded", "false");
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").should("have.attr", "collapsed");
+        childItems().each($item => {
+          cy.wrap($item).should("have.attr", "collapsed");
+        });
+      });
+
+      it("ArrowRight expands the collapsed group again", () => {
+        headerDiv().focus();
+        cy.realPress("ArrowLeft");
+        headerDiv().should("have.attr", "aria-expanded", "false");
+
+        headerDiv().focus();
+        cy.realPress("ArrowRight");
+        headerDiv().should("have.attr", "aria-expanded", "true");
+      });
+
+      // 5) Clicking the arrow <udex-button> still collapses/expands and never selects.
+      it("clicking the arrow button collapses the group without selecting it", () => {
+        headerDiv().should("have.attr", "aria-expanded", "true");
+
+        arrowButton().click();
+
+        headerDiv().should("have.attr", "aria-expanded", "false");
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").should("have.attr", "collapsed");
+        headerDiv().should("not.have.attr", "aria-selected");
+      });
+
+      it("clicking the arrow button a second time expands the group again", () => {
+        arrowButton().click();
+        headerDiv().should("have.attr", "aria-expanded", "false");
+
+        arrowButton().click();
+        headerDiv().should("have.attr", "aria-expanded", "true");
+        cy.get("#filter-menu-single-tree-collapsible").shadow()
+          .find("udex-list-group-header").should("not.have.attr", "collapsed");
+      });
+    });
+
+    describe("Regression: SingleSelect + non-collapsible groups does NOT get tree pattern", () => {
+      beforeEach(() => {
+        cy.mount(filterMenuSingleSelectGroup);
+        openMenu("filter-menu-single-group");
+      });
+
+      it("host [udex-list] has NO aria-multiselectable attribute", () => {
+        cy.get("#filter-menu-single-group").shadow()
+          .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\"", () => {
+        cy.get("#filter-menu-single-group").shadow()
+          .find("[udex-list]").shadow()
+          .find("#udex-list").should("have.attr", "role", "listbox");
+      });
+
+      // 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", () => {
+        cy.get("#filter-menu-single-group").shadow()
+          .find("udex-list-group-header")
+          .should("have.attr", "role", "group")
+          .and("not.have.attr", "_tree-mode");
+      });
+
+      // Updated: since the host is always role="none" and accessible-role drives the
+      // shadow role, the meaningful regression check is against both the host's
+      // accessible-role AND the shadow [part=item]'s rendered role.
+      it("child items do NOT have accessible-role=\"treeitem\" nor shadow role=\"treeitem\"", () => {
+        cy.get("#filter-menu-single-group").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").each($item => {
+            cy.wrap($item).should("not.have.attr", "accessible-role", "treeitem");
+            cy.wrap($item).shadow()
+              .find("[part=item]").should("not.have.attr", "role", "treeitem");
+          });
+      });
+
+      it("child items have NO aria-checked (property returns undefined)", () => {
+        cy.get("#filter-menu-single-group").shadow()
+          .find("udex-list-group-header")
+          .find("udex-list-item").eq(0).shadow()
+          .find("[part=item]").should("not.have.attr", "aria-checked");
+      });
+    });
+
+    describe("Regression: MultiSelect WITHOUT groups does NOT get tree pattern", () => {
+      beforeEach(() => {
+        cy.mount(filterMenuMultiSelectFlat);
+        openMenu("filter-menu-multi-flat");
+      });
+
+      it("host [udex-list] has NO aria-multiselectable attribute", () => {
+        cy.get("#filter-menu-multi-flat").shadow()
+          .find("[udex-list]").should("not.have.attr", "aria-multiselectable");
+      });
+
+      it("inner list div does NOT have role=\"tree\"", () => {
+        cy.get("#filter-menu-multi-flat").shadow()
+          .find("[udex-list]").shadow()
+          .find("#udex-list").should("not.have.attr", "role", "tree");
+      });
+
+      // Updated: check the meaningful shadow role in addition to the host attribute,
+      // since the host role is always "none".
+      it("flat items do NOT have accessible-role=\"treeitem\" nor shadow role=\"treeitem\"", () => {
+        cy.get("#filter-menu-multi-flat").shadow()
+          .find("udex-list-item").each($item => {
+            cy.wrap($item).should("not.have.attr", "accessible-role", "treeitem");
+            cy.wrap($item).shadow()
+              .find("[part=item]").should("not.have.attr", "role", "treeitem");
+          });
+      });
+
+      it("flat items have no aria-checked (roleItem !== treeitem)", () => {
+        cy.get("#filter-menu-multi-flat").shadow()
+          .find("udex-list-item").eq(0).shadow()
+          .find("[part=item]").should("not.have.attr", "aria-checked");
+      });
+    });
+
+    // Added: regression for FilterMenu.isTreeStructure Select-All exclusion.
+    // A "Select All" header (UDExFilterMenuSelectAll) extends UDExListGroupHeaderBase
+    // whose `isGroup` getter is true, so a MultiSelect FilterMenu with ONLY a Select All
+    // header (and no real UDExFilterMenuGroupHeader) previously entered tree mode by
+    // mistake — rendering role="tree"/role="treeitem"/aria-multiselectable. That is
+    // semantically wrong (a Select All affordance is a bulk-select control over a flat
+    // list, not a hierarchical group) and it broke the footer Tab-order focus tests.
+    // isTreeStructure now excludes Select All headers (isSelectAllHeader === true) when
+    // detecting groups, so this configuration stays a flat listbox.
+    describe("Regression: MultiSelect + Select All header (no real group) does NOT get tree pattern", () => {
+      beforeEach(() => {
+        cy.mount(filterMenuSelectAll);
+        cy.get("#filter-menu-select-all").shadow()
+          .find(".udex-filter-menu__trigger").click();
+      });
+
+      it("inner list div has role=\"listbox\", not \"tree\"", () => {
+        cy.get("#filter-menu-select-all").shadow()
+          .find("[udex-list]").shadow()
+          .find("#udex-list").should("have.attr", "role", "listbox");
+      });
+
+      it("host [udex-list] has NO aria-multiselectable attribute", () => {
+        cy.get("#filter-menu-select-all").shadow()
+          .find("[udex-list]").should("not.have.attr", "aria-multiselectable");
+      });
+
+      it("a leaf item's inner [part=item] has role=\"option\", not \"treeitem\"", () => {
+        // The leaf items are slotted light-DOM children of udex-list-select-all;
+        // eq(0) is the first leaf (the Select All header's own inner item lives inside
+        // the udex-list-select-all shadow, so it is not matched by this light-DOM find).
+        cy.get("#filter-menu-select-all").shadow()
+          .find(".udex-filter-menu__list")
+          .find("udex-list-item").eq(0).shadow()
+          .find("[part=item]").should("have.attr", "role", "option");
+      });
+
+      it("a leaf item's inner [part=item] has NO aria-checked (not a treeitem)", () => {
+        cy.get("#filter-menu-select-all").shadow()
+          .find(".udex-filter-menu__list")
+          .find("udex-list-item").eq(0).shadow()
+          .find("[part=item]").should("not.have.attr", "aria-checked");
+      });
+    });
+  });
 });