@sapudex/web-components 2.62.0 → 2.63.1

package/cypress/specs/FilterMenu.cy.tsx

@@ -748,10 +748,12 @@ describe("Filter Menu component", () => {
       cy.get("@triggerBtn").click();
     });
 
+    // Updated: Select All supplies the native ListItem label, not slotted text on its host.
     it("render the correct label for the header", () => {
       cy.get("[udex-filter-menu]")
         .shadow().find("udex-list-select-all")
-        .shadow().find("udex-list-item").should("have.text", "Select All");
+        .shadow().find("udex-list-item")
+        .shadow().find('[part="title"]').should("have.text", "Select All");
     });
 
     it("select all header focus on pressed letter", () => {
@@ -2404,48 +2406,67 @@ describe("Filter Menu component", () => {
       });
     });
 
-    // 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", () => {
+    // Updated: Select All is a parent with its own root count, not a same-level option
+    // counted among its controlled children. MultiSelect now includes it in tree mode.
+    describe("Regression: MultiSelect + Select All header gets a hierarchical real-focus tree", () => {
       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\"", () => {
+      // Updated: the native tree replaces the obsolete flat listbox expectation.
+      it("inner list div has role=\"tree\", not \"listbox\"", () => {
         cy.get("#filter-menu-select-all").shadow()
           .find("[udex-list]").shadow()
-          .find("#udex-list").should("have.attr", "role", "listbox");
+          .find("#udex-list").should("have.attr", "role", "tree");
       });
 
-      it("host [udex-list] has NO aria-multiselectable attribute", () => {
+      // Updated: MultiSelect tree semantics retain a transparent real-focus list host.
+      it("host [udex-list] has aria-multiselectable=\"true\" and role=\"none\"", () => {
         cy.get("#filter-menu-select-all").shadow()
-          .find("[udex-list]").should("not.have.attr", "aria-multiselectable");
+          .find("[udex-list]").should($list => {
+            expect($list).to.have.attr("aria-multiselectable", "true");
+            expect($list).to.have.attr("role", "none");
+          });
       });
 
-      it("a leaf item's inner [part=item] has role=\"option\", not \"treeitem\"", () => {
+      // Updated: children are level-2 treeitems with their own two-item sibling count.
+      it("a leaf item's inner [part=item] is a level-2 treeitem, 1 of 2 children", () => {
         // 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");
+          .find("[udex-list-item]").eq(0).shadow()
+          .find("[part=item]").should($row => {
+            expect($row).to.have.attr("role", "treeitem");
+            expect($row).to.have.attr("aria-level", "2");
+            expect($row).to.have.attr("aria-posinset", "1");
+            expect($row).to.have.attr("aria-setsize", "2");
+          });
       });
 
-      it("a leaf item's inner [part=item] has NO aria-checked (not a treeitem)", () => {
+      // Updated: native rows alone own checked state; Select All has a separate root count.
+      it("a leaf exposes native aria-checked and its parent becomes mixed without sharing its child count", () => {
+        const UDExLeafRow = () => cy.get("#filter-menu-select-all").shadow()
+          .find(".udex-filter-menu__list").find("[udex-list-item]").eq(0).shadow().find("[part=item]");
+        UDExLeafRow().should($row => {
+          expect($row).to.have.attr("aria-checked", "false");
+          expect($row).not.to.have.attr("aria-selected");
+        });
+        UDExLeafRow().click();
+        UDExLeafRow().should("have.attr", "aria-checked", "true");
         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");
+          .find("[udex-list-select-all]").shadow().find('[udex-list-item][part="group-item"]')
+          .shadow().find("[part=item]").should($row => {
+            expect($row).to.have.attr("role", "treeitem");
+            expect($row).to.have.attr("aria-checked", "mixed");
+            expect($row).to.have.attr("aria-level", "1");
+            expect($row).to.have.attr("aria-posinset", "1");
+            expect($row).to.have.attr("aria-setsize", "1");
+            expect($row).not.to.have.attr("aria-selected");
+          });
       });
     });
   });