@sapudex/web-components 2.56.0 → 2.58.0

package/cypress/specs/List.cy.tsx

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

package/cypress/specs/ListItem.cy.tsx

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

package/cypress/specs/SelectBox.cy.tsx

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