@sapudex/web-components 2.60.0 → 2.62.0

package/cypress/specs/SelectBox.cy.tsx

@@ -2,6 +2,29 @@ import { UDExSelectBox, UDExSelectBoxSelectAll, UDExSelectBoxGroupHeader, UDExSe
 import { UDExListItemSize, UDExListMode, UDExListStyleType } from "../../src/types/List.js";
 import { UDExAvatarShape, UDExAvatarSize } from "../../src/Avatar.js";
 import UDExStatusBadgeValueState from "../../src/types/StatusBadgeValueState.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+
+function UDExAssertActiveItem(UDExIndex: number) {
+  cy.get("#select-box").shadow().find("[udex-list-item]").eq(UDExIndex).should($item => {
+    expect($item).to.have.attr("_active-descendant");
+    expect($item).to.have.class("_udex-active-descendant");
+  }).then($item => {
+    cy.get("#select-box").shadow().find("[_active-descendant]").should("have.length", 1).and($active => {
+      expect($active[0]).to.equal($item[0]);
+    });
+    cy.get("#select-box").shadow().find("._udex-active-descendant").should("have.length", 1).and($highlight => {
+      expect($highlight[0]).to.equal($item[0]);
+    });
+    cy.get("#select-box").shadow().find('input[role="combobox"]')
+      .should("have.attr", "aria-activedescendant", $item[0].id);
+  });
+  cy.get("#select-box").shadow().find("[udex-list-item]").eq(UDExIndex).should("not.be.focused");
+  cy.get("#select-box").shadow().find('input[role="combobox"]').should("be.focused").should($input => {
+    const UDExRoot = $input[0].getRootNode() as ShadowRoot;
+    expect($input[0].ownerDocument.activeElement).to.equal(UDExRoot.host);
+    expect(UDExRoot.activeElement).to.equal($input[0]);
+  });
+}
 
 const selectBoxWithRating = <div style="width: 350px; position:relative;"><UDExSelectBox
   id="select-box"
@@ -373,25 +396,38 @@ describe("SelectBox", () => {
       .should("have.attr", "open");
   });
 
+  // Updated: closed ArrowDown announces expanded and highlights the first item; the next press advances silently.
   it("dropdown opens on pressing the `ArrowDown` key on the search", () => {
     cy.mount(fullComponent);
     cy.get("#select-box").shadow()
       .find(".udex-text-field__search")
-      .click()
+      .focus()
       .realPress("ArrowDown");
 
     cy.get("#select-box").shadow()
       .find(".udex-select-box__dropdown")
       .should("have.attr","open");
+    cy.get("#select-box").shadow().find('input[role="combobox"]')
+      .should("be.focused").and("have.attr", "aria-expanded", "true");
+    UDExAssertActiveItem(0);
+    cy.get("#select-box").shadow().find('[aria-live="polite"]').should("have.length", 1).and("have.text", "expanded");
+
+    cy.realPress("ArrowDown");
+    UDExAssertActiveItem(1);
+    cy.get("#select-box").shadow().find('[aria-live="polite"]').should("have.text", "");
   });
 
+  // Updated: Escape clears the immediately active item and status; reopening re-announces expanded before navigation.
   it("dropdown closes on pressing the `Escape`", () => {
     cy.mount(fullComponent);
     cy.get("#select-box").shadow()
       .find(".udex-text-field__search")
-      .click()
+      .focus()
       .realPress("ArrowDown");
 
+    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+    UDExAssertActiveItem(0);
+
     cy.get("#select-box").shadow()
       .find(".udex-text-field__search")
       .realPress("Escape");
@@ -399,6 +435,19 @@ describe("SelectBox", () => {
     cy.get("#select-box").shadow()
       .find(".udex-select-box__dropdown")
       .should("not.have.attr","open");
+    cy.get("#select-box").shadow().find('input[role="combobox"]')
+      .should("be.focused").and("have.attr", "aria-expanded", "false");
+    cy.get("#select-box").shadow().find('input[role="combobox"]').should("not.have.attr", "aria-activedescendant");
+    cy.get("#select-box").shadow().find("[_active-descendant], ._udex-active-descendant").should("not.exist");
+    cy.get("#select-box").shadow().find('[aria-live="polite"]').should("have.text", "");
+
+    cy.realPress("ArrowDown");
+    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+    cy.get("#select-box").shadow().find('input[role="combobox"]').should("have.attr", "aria-expanded", "true");
+    UDExAssertActiveItem(0);
+    cy.get("#select-box").shadow().find('[aria-live="polite"]').should("have.length", 1).and("have.text", "expanded");
+    cy.realPress("ArrowDown");
+    UDExAssertActiveItem(1);
   });
 
   it("sets option label when Arrow Down key press on the list items", () => {
@@ -547,14 +596,31 @@ describe("SelectBox", () => {
       .should("have.attr", "_active-descendant");
   });
 
-  it("SingleSelect mode - opening the dropdown with ArrowDown focuses the selected item", () => {
+  // Updated: plain preselected options remain a listbox; opening announces expanded before silent ArrowDown navigation.
+  it("SingleSelect mode - ArrowDown opens with the selected item active and the next ArrowDown activates the next item", () => {
     cy.mount(singleSelectPreselected);
     cy.get("#select-box").shadow().find(".udex-text-field__search").focus();
     cy.realPress("ArrowDown");
 
+    cy.get("#select-box").shadow().find('input[role="combobox"]').should("have.attr", "aria-haspopup", "listbox");
+    cy.get("#select-box").shadow().find("[udex-list]").should("have.attr", "role", "listbox");
     cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+    cy.get("#select-box").shadow().find('input[role="combobox"]')
+      .should("be.focused").and("have.attr", "aria-expanded", "true");
+    UDExAssertActiveItem(2);
+    cy.get("#select-box").shadow().find('[aria-live="polite"]').should("have.length", 1).and("have.text", "expanded");
     cy.get("#select-box").shadow().find("[udex-list-item]").eq(2)
       .should("have.attr", "_active-descendant");
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(0)
+      .should("not.have.attr", "_active-descendant");
+
+    cy.realPress("ArrowDown");
+    UDExAssertActiveItem(3);
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(2)
+      .should("not.have.attr", "_active-descendant");
+    cy.get("#select-box").find("[udex-select-box-item][selected]").should("have.length", 1).and("have.attr", "label", "Java");
+    cy.get("#select-box").shadow().find('[aria-live="polite"]').should("have.text", "");
+    cy.get("#select-box").shadow().find('input[role="combobox"]').should("be.focused");
   });
 
   it("SingleSelect mode - reopening restores focus to the previously selected item", () => {
@@ -571,12 +637,17 @@ describe("SelectBox", () => {
 
   it("MultiSelect mode - navigation label is cleared from input after Tab closes the dropdown", () => {
     cy.mount(multiSelect);
-    cy.get("#select-box").shadow()
-      .find(".udex-text-field__search")
-      .click()
-      .realPress("ArrowDown");
+    cy.get("#select-box").shadow().find(".udex-text-field__search").click();
+
+    // Wait for the dropdown to finish opening with the first item (JavaScript) focused before
+    // navigating, otherwise ArrowDown races the open and is consumed by it instead of advancing.
+    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(0)
+      .should("have.attr", "_active-descendant");
+
+    // The first item (JavaScript) is focused, so this ArrowDown advances to Python.
+    cy.realPress("ArrowDown");
 
-    // Opening focuses the first item (JavaScript), so the first ArrowDown advances to Python.
     cy.get("#select-box").shadow()
       .find(".udex-text-field__single-label")
       .should("have.text", "Python");
@@ -588,6 +659,33 @@ describe("SelectBox", () => {
       .should("not.exist");
   });
 
+  it("SingleSelect mode - Tab without opening dropdown shows no label in input", () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow().find(".udex-text-field__search").focus();
+    cy.realPress("Tab");
+    cy.get("#select-box").shadow()
+      .find(".udex-text-field__single-label")
+      .should("not.exist");
+  });
+
+  it("SingleSelect mode - Tab without opening dropdown preserves previously selected item in input", () => {
+    cy.mount(singleSelectPreselected);
+    cy.get("#select-box").shadow().find(".udex-text-field__search").focus();
+    cy.realPress("Tab");
+    cy.get("#select-box").shadow()
+      .find(".udex-text-field__single-label")
+      .should("have.text", "Java");
+  });
+
+  it("MultiSelect mode - Tab without opening dropdown shows no label in input", () => {
+    cy.mount(multiSelect);
+    cy.get("#select-box").shadow().find(".udex-text-field__search").focus();
+    cy.realPress("Tab");
+    cy.get("#select-box").shadow()
+      .find(".udex-text-field__single-label")
+      .should("not.exist");
+  });
+
   it("MultiSelect mode - opening the dropdown with a mouse click focuses the first item", () => {
     cy.mount(multiSelect);
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
@@ -597,14 +695,27 @@ describe("SelectBox", () => {
       .should("have.attr", "_active-descendant");
   });
 
-  it("MultiSelect mode - opening the dropdown with ArrowDown focuses the first item", () => {
+  // Updated: keyboard opening announces expanded with the first item active; ArrowDown advances silently to the second.
+  it("MultiSelect mode - ArrowDown opens with the first item active and the next ArrowDown activates the next item", () => {
     cy.mount(multiSelect);
     cy.get("#select-box").shadow().find(".udex-text-field__search").focus();
     cy.realPress("ArrowDown");
 
     cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+    cy.get("#select-box").shadow().find('input[role="combobox"]')
+      .should("be.focused").and("have.attr", "aria-expanded", "true");
+    UDExAssertActiveItem(0);
+    cy.get("#select-box").shadow().find('[aria-live="polite"]').should("have.length", 1).and("have.text", "expanded");
     cy.get("#select-box").shadow().find("[udex-list-item]").eq(0)
       .should("have.attr", "_active-descendant");
+
+    cy.realPress("ArrowDown");
+    UDExAssertActiveItem(1);
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(0)
+      .should("not.have.attr", "_active-descendant");
+    cy.get("#select-box").find("[udex-select-box-item][selected]").should("not.exist");
+    cy.get("#select-box").shadow().find('[aria-live="polite"]').should("have.text", "");
+    cy.get("#select-box").shadow().find('input[role="combobox"]').should("be.focused");
   });
 
   it("MultiSelect mode - selected items do not steal focus from the first item on open", () => {
@@ -1158,9 +1269,10 @@ describe("SelectBox", () => {
       cy.get("@select").shadow().find(".udex-text-field__trigger").as("trigger")
 
       cy.get("@select").shadow()
-        .find("udex-list")
-        .find("udex-list-select-all").shadow()
-        .find(".udex-list__group-header")
+        .find("[udex-list]")
+        .find("[udex-list-select-all]").shadow()
+        .find('[udex-list-item][part="group-item"]').shadow()
+        .find('[part="title"]')
         .should("have.text", "Select All");
     });
 
@@ -2829,10 +2941,13 @@ describe("SelectBox", () => {
         .find("[udex-list]").should("have.attr", "aria-multiselectable", "true");
     });
 
-    it("inner list div has role=\"tree\"", () => {
+    // Updated: the host owns the tree; its shadow container must not create a second tree.
+    it("inner list div is transparent when the host owns the tree role", () => {
+      cy.get("#select-box-tree-regression").shadow()
+        .find("[udex-list]").should("have.attr", "role", "tree");
       cy.get("#select-box-tree-regression").shadow()
         .find("[udex-list]").shadow()
-        .find("#udex-list").should("have.attr", "role", "tree");
+        .find("#udex-list").should("have.attr", "role", "none");
     });
 
     it("group header host has _tree-mode attribute", () => {
@@ -2848,11 +2963,13 @@ describe("SelectBox", () => {
         .should("have.attr", "role", "treeitem");
     });
 
-    it("child items have aria-checked on the host (MultiSelect tree)", () => {
+    // Updated: selectable popup treeitems expose only Boolean aria-selected on the host.
+    it("child items have Boolean aria-selected and no aria-checked on the host (MultiSelect tree)", () => {
       cy.get("#select-box-tree-regression").shadow()
-        .find("udex-list-group-header")
-        .find("udex-list-item").eq(0)
-        .should("have.attr", "aria-checked", "false");
+        .find("[udex-list-group-header]")
+        .find("[udex-list-item]").eq(0)
+        .should("have.attr", "aria-selected", "false")
+        .and("not.have.attr", "aria-checked");
     });
 
     it("child items' inner [part=item] div is role=\"presentation\" (host carries the role)", () => {
@@ -2862,7 +2979,8 @@ describe("SelectBox", () => {
         .find("[part=item]").should("have.attr", "role", "presentation");
     });
 
-    it("child items' checkbox is aria-hidden (tree mode, JAWS uses host aria-checked)", () => {
+    // Updated: decorative checkboxes remain hidden; native selection is owned by the treeitem host.
+    it("child items' checkbox is aria-hidden (tree mode uses host aria-selected)", () => {
       cy.get("#select-box-tree-regression").shadow()
         .find("udex-list-group-header")
         .find("udex-list-item").eq(0).shadow()
@@ -2870,91 +2988,121 @@ describe("SelectBox", () => {
     });
   });
 
-  // Covers the aria-live="polite" region that announces the active item
-  // during keyboard navigation. _setActiveDescendant(item) sets _liveRegionText to
-  // "Label, X of Y"; _setActiveDescendant(null) (on close/Escape) resets it to "".
-  describe("Select Box live region announcements", () => {
-    it("populates the live region with 'Label, X of Y' when ArrowDown activates an item", () => {
-      cy.mount(shortComponent);
-      cy.get("#select-box").shadow()
-        .find(".udex-text-field__search")
-        .click();
+  // Updated: expanded active groups open silently; other hosts keep the popup fallback, never live item metadata.
+  describe("Select Box supplemental announcements without label echo", () => {
+    const UDExCombobox = () => cy.get("#select-box").shadow().find('input[role="combobox"]');
+    const UDExStatus = () => cy.get("#select-box").shadow().find('[aria-live="polite"]');
+    const UDExActiveHost = () => cy.get("#select-box").shadow().find("[_active-descendant]");
+
+    function UDExAssertActiveHost(UDExRole: string, UDExLabel: string, UDExPosition: number, UDExSize: number, UDExExpectedStatus: "" | "expanded", UDExLevel?: number, UDExAccessibleName = UDExLabel) {
+      UDExActiveHost().should($host => {
+        expect($host).to.have.length(1);
+        expect($host).to.have.attr("role", UDExRole);
+        expect($host).to.have.attr("aria-posinset", String(UDExPosition));
+        expect($host).to.have.attr("aria-setsize", String(UDExSize));
+        expect($host).to.have.attr("aria-label", UDExAccessibleName);
+        if (UDExLevel !== undefined) {
+          expect($host).to.have.attr("aria-level", String(UDExLevel));
+        } else {
+          expect($host).not.to.have.attr("aria-level");
+        }
+        if ($host.is("[udex-list-group-header]")) {
+          expect($host).to.have.attr("aria-label", UDExLabel);
+        } else {
+          expect($host).to.have.attr("label", UDExLabel);
+        }
+      }).then($host => {
+        UDExCombobox().should($input => {
+          const UDExRoot = $input[0].getRootNode() as ShadowRoot;
+          expect($input).to.have.attr("aria-activedescendant", $host[0].id);
+          expect(UDExRoot.getElementById($host[0].id)).to.equal($host[0]);
+          expect(Array.from(UDExRoot.querySelectorAll("[id]")).filter(UDExElement => UDExElement.id === $host[0].id))
+            .to.deep.equal([$host[0]]);
+        });
+      });
+      // Preserve rendered title checks in addition to the complete host aria-label.
+      UDExActiveHost().then($host => {
+        if ($host.is("[udex-list-item]")) {
+          cy.wrap($host).shadow().find(".udex-list__content-wrap").should("have.attr", "aria-label", UDExLabel);
+          cy.wrap($host).shadow().find('[part="title"]').should("have.text", UDExLabel);
+        }
+      });
+      UDExCombobox().should("be.focused");
+      // Updated: drain pending live-region rendering so an empty expectation cannot pass prematurely.
+      cy.then(() => renderFinished());
+      UDExStatus().should($status => {
+        expect($status).to.have.length(1);
+        expect($status.text()).to.equal(UDExExpectedStatus);
+        const UDExSelectBox = ($status[0].getRootNode() as ShadowRoot).host;
+        UDExSelectBox.querySelectorAll("[udex-select-box-item], [udex-select-box-group-header]").forEach(UDExItem => {
+          ["label", "supporting-text", "additional-text"].forEach(UDExAttribute => {
+            const UDExName = UDExItem.getAttribute(UDExAttribute);
+            if (UDExName) {
+              expect($status.text(), `status excludes ${UDExAttribute}: ${UDExName}`).not.to.contain(UDExName);
+            }
+          });
+        });
+      });
+    }
 
-      // Opening activates the first item "JavaScript" (shortComponent has 6 items).
-      cy.get("#select-box").shadow()
-        .find('[aria-live="polite"]')
-        .invoke("text")
-        .should("match", /^JavaScript, 1 of 6$/);
+    // Updated: actionable opening is expanded-only, with level-1 positions and complete names retained natively.
+    it("announces only expanded on flat actionable opening while retaining the complete native name and position", () => {
+      cy.mount(shortComponent);
+      UDExCombobox().realClick();
+      UDExAssertActiveHost("treeitem", "JavaScript", 1, 6, "expanded", 1, "JavaScript Additional Text");
+      UDExCombobox().should("have.attr", "aria-haspopup", "tree");
+      cy.get("#select-box").shadow().find("[udex-list]").should("have.attr", "role", "tree");
+      UDExActiveHost().should("not.have.attr", "aria-expanded");
+      UDExActiveHost().should("have.attr", "aria-selected", "false");
     });
 
-    // Added: covers _treePositionText — for a grouped SelectBox the announcement
-    // carries the tree position. ArrowDown activates the group header ("level 0");
-    // a further ArrowDown reaches its first child ("level 1").
-    it("uses tree positional text ('level 0' for the group header, 'level 1' for its child)", () => {
+    // Updated: the expanded group supplies native state; opening and child navigation have no live metadata.
+    it("keeps live status empty on expanded-group opening and child navigation with native positions and selection", () => {
       cy.mount(groupHeaderCollapsible);
-      cy.get("#select-box").shadow()
-        .find(".udex-text-field__search")
-        .click();
-
-      // Opening activates the group header -> tree text reports "level 0".
-      cy.get("#select-box").shadow()
-        .find('[aria-live="polite"]')
-        .invoke("text")
-        .should("contain", "level 0");
-
-      // A further ArrowDown reaches the first child -> tree text reports "level 1".
-      cy.get("#select-box").shadow()
-        .find(".udex-text-field__search")
-        .realPress("ArrowDown");
-
-      cy.get("#select-box").shadow()
-        .find('[aria-live="polite"]')
-        .invoke("text")
-        .should("contain", "level 1");
+      UDExCombobox().realClick();
+      UDExAssertActiveHost("treeitem", "Programming Languages", 1, 1, "", 1);
+      UDExActiveHost().should("have.attr", "aria-expanded", "true");
+      UDExActiveHost().should("have.attr", "aria-selected", "false").and("not.have.attr", "aria-checked");
+      cy.realPress("ArrowDown");
+      UDExAssertActiveHost("treeitem", "JavaScript", 1, 2, "", 2, "JavaScript Frontend web development");
+      UDExActiveHost().should("have.attr", "aria-selected", "false").and("not.have.attr", "aria-checked");
     });
 
-    it("clears the live region text when the dropdown closes on Escape", () => {
+    // Updated: actionable opening is expanded-only; navigation is silent even on hosts without icons.
+    it("announces expanded on actionable opening, keeps navigation silent and clears the active descendant on Escape", () => {
       cy.mount(shortComponent);
-      cy.get("#select-box").shadow()
-        .find(".udex-text-field__search")
-        .click()
-        .realPress("ArrowDown");
-
-      // Precondition: the live region is populated by the navigation above.
-      cy.get("#select-box").shadow()
-        .find('[aria-live="polite"]')
-        .invoke("text")
-        .should("not.be.empty");
-
-      cy.get("#select-box").shadow()
-        .find(".udex-text-field__search")
-        .realPress("Escape");
+      UDExCombobox().realClick();
+      UDExAssertActiveHost("treeitem", "JavaScript", 1, 6, "expanded", 1, "JavaScript Additional Text");
+      cy.realPress("ArrowDown");
+      UDExAssertActiveHost("treeitem", "Python", 2, 6, "", 1);
+      UDExActiveHost().should("have.attr", "aria-selected", "false");
+      UDExActiveHost().should("not.have.attr", "aria-expanded");
+      cy.realPress("Escape");
 
       cy.get("#select-box").shadow()
         .find(".udex-select-box__dropdown")
         .should("not.have.attr", "open");
-
-      // _setActiveDescendant(null) resets _liveRegionText to "".
-      cy.get("#select-box").shadow()
-        .find('[aria-live="polite"]')
-        .invoke("text")
-        .should("equal", "");
+      UDExActiveHost().should("not.exist");
+      UDExCombobox().should("not.have.attr", "aria-activedescendant");
+      UDExCombobox().should("be.focused");
+      UDExStatus().should("have.text", "");
     });
 
-    it("appends 'Unselected' to the live region for an unchecked MultiSelect item", () => {
+    // Updated: plain flat MultiSelect announces expanded only on opening; option navigation remains silent.
+    it("announces expanded on flat unselected MultiSelect opening and keeps navigation status silent", () => {
       cy.mount(multiSelect);
-      cy.get("#select-box").shadow()
-        .find(".udex-text-field__search")
-        .click()
-        .realPress("ArrowDown");
-
-      // First MultiSelect item is not selected -> state suffix is "Unselected".
-      cy.get("#select-box").shadow()
-        .find('[aria-live="polite"]')
-        .should("contain.text", "Unselected");
+      UDExCombobox().realClick();
+      UDExCombobox().should("have.attr", "aria-haspopup", "listbox");
+      cy.get("#select-box").shadow().find("[udex-list]").should("have.attr", "role", "listbox");
+      UDExAssertActiveHost("option", "JavaScript", 1, 15, "expanded", undefined, "JavaScript Frontend web development");
+      cy.realPress("ArrowDown");
+      UDExAssertActiveHost("option", "Python", 2, 15, "", undefined, "Python Used in data analysis");
+      UDExActiveHost().should("have.attr", "aria-selected", "false");
+      UDExActiveHost().should("not.have.attr", "aria-checked");
     });
 
-    it("appends 'Selected' to the live region for a checked MultiSelect item", () => {
+    // Updated: preselection remains native; opening announces expanded without repeating the selected option's name.
+    it("announces only expanded when a preselected flat MultiSelect option is initially active", () => {
       const checkedMultiSelect = <div style="width: 350px; position:relative;">
         <UDExSelectBox
           id="select-box"
@@ -2968,18 +3116,15 @@ describe("SelectBox", () => {
       </div>;
 
       cy.mount(checkedMultiSelect);
-      cy.get("#select-box").shadow()
-        .find(".udex-text-field__search")
-        .click();
-
-      // Opening activates the first MultiSelect item, which is pre-selected -> state
-      // suffix is "Selected".
-      cy.get("#select-box").shadow()
-        .find('[aria-live="polite"]')
-        .should("contain.text", "Selected");
+      UDExCombobox().realClick();
+      UDExAssertActiveHost("option", "JavaScript", 1, 3, "expanded", undefined, "JavaScript Frontend web development");
+      UDExActiveHost().should("have.attr", "aria-selected", "true");
+      UDExActiveHost().should("not.have.attr", "aria-checked");
+      cy.get("#select-box").find('[udex-select-box-item][label="JavaScript"]').should("have.attr", "selected");
     });
 
-    it("appends 'collapsed' to the live region for a collapsed collapsible group header", () => {
+    // Updated: an initially collapsed header still needs the expanded popup fallback; its native group stays collapsed.
+    it("announces only expanded on pointer opening of a collapsed group and retains native header state", () => {
       const collapsedGroupHeader = <div style="width: 350px; position:relative;">
         <UDExSelectBox
           id="select-box"
@@ -2993,34 +3138,25 @@ describe("SelectBox", () => {
       </div>;
 
       cy.mount(collapsedGroupHeader);
-      cy.get("#select-box").shadow()
-        .find(".udex-text-field__search")
-        .click()
-        .realPress("ArrowDown");
-
-      // ArrowDown activates the collapsed group header -> tree text reports
-      // "level 0" and the state suffix is "collapsed".
-      cy.get("#select-box").shadow()
-        .find('[aria-live="polite"]')
-        .invoke("text")
-        .should("contain", "level 0")
-        .and("contain", "collapsed");
+      UDExCombobox().realClick();
+      UDExAssertActiveHost("treeitem", "Programming Languages", 1, 1, "expanded", 1);
+      UDExActiveHost().should("have.attr", "aria-expanded", "false");
+      cy.realPress("ArrowDown");
+      UDExAssertActiveHost("treeitem", "Programming Languages", 1, 1, "", 1);
+      UDExActiveHost().should("have.attr", "aria-expanded", "false");
+      UDExActiveHost().should("have.attr", "aria-selected", "false").and("not.have.attr", "aria-checked");
+      UDExActiveHost().should("have.attr", "collapsed");
     });
 
-    it("appends 'expanded' to the live region for an expanded collapsible group header", () => {
+    // Updated: native expanded-header state replaces the popup fallback, rather than duplicating expansion live.
+    it("keeps live status empty on pointer opening and retains native expanded header state", () => {
       // groupHeaderCollapsible starts expanded (no `collapsed` attribute).
       cy.mount(groupHeaderCollapsible);
-      cy.get("#select-box").shadow()
-        .find(".udex-text-field__search")
-        .click();
-
-      // Opening activates the expanded group header -> tree text reports
-      // "level 0" and the state suffix is "expanded".
-      cy.get("#select-box").shadow()
-        .find('[aria-live="polite"]')
-        .invoke("text")
-        .should("contain", "level 0")
-        .and("contain", "expanded");
+      UDExCombobox().realClick();
+      UDExAssertActiveHost("treeitem", "Programming Languages", 1, 1, "", 1);
+      UDExActiveHost().should("have.attr", "aria-expanded", "true");
+      UDExActiveHost().should("have.attr", "aria-selected", "false").and("not.have.attr", "aria-checked");
+      UDExActiveHost().should("not.have.attr", "collapsed");
     });
   });
 
@@ -3151,14 +3287,10 @@ describe("SelectBox", () => {
     });
   });
 
-  // When focus lands on the body div of a collapsible single-select group header
-  // (tabindex="0"), SelectBox.handleInputFocusOut detects it — either by the
-  // udex-list__group-content class on the raw body div, or by checking isGroup +
-  // collapsible + !modeMultiSelect on the shadow-DOM-retargeted HOST element —
-  // sets the group header as the active descendant, and redirects DOM focus back
-  // to the search input.
+  // Host-ARIA group rows have no tab stop. Clicking their body must activate the
+  // header directly while DOM focus stays on the combobox input.
   describe("Select Box collapsible single-select group header click", () => {
-    it("clicking the body of a collapsible single-select group header returns DOM focus to the search input", () => {
+    it("clicking the body of a collapsible single-select group header keeps DOM focus on the search input", () => {
       cy.mount(groupHeaderCollapsibleSingleSelect);
       cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
 
@@ -3166,8 +3298,10 @@ describe("SelectBox", () => {
         .find(".udex-select-box__dropdown")
         .should("have.attr", "open");
 
-      // realClick fires native browser events so the body div receives real focus,
-      // triggering the focusout on the search input with a valid relatedTarget.
+      cy.get("#select-box").shadow().find(".udex-text-field__search").then($input => {
+        $input[0].addEventListener("blur", cy.stub().as("headerClickBlur"));
+      });
+      // Use native mouse events to catch transient focus loss.
       // Click left side to avoid the collapse icon on the right.
       cy.get("#select-box").shadow()
         .find("[udex-list-group-header]")
@@ -3175,14 +3309,13 @@ describe("SelectBox", () => {
         .find("div[part='group-item'].udex-list__group-content")
         .realClick({ position: "left" });
 
-      // handleInputFocusOut detects the group header HOST (via isGroup + collapsible +
-      // !modeMultiSelect after shadow DOM retargeting) and calls _search.focus().
       cy.get("#select-box").shadow()
         .find(".udex-text-field__search")
         .should("be.focused");
+      cy.get("@headerClickBlur").should("not.have.been.called");
     });
 
-    it("clicking the body returns focus after click and arrow navigation uses the group header as starting point", () => {
+    it("clicking the body activates the header and arrow navigation uses it as starting point", () => {
       cy.mount(groupHeaderCollapsibleSingleSelect);
       cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
 
@@ -3190,8 +3323,13 @@ describe("SelectBox", () => {
         .find(".udex-select-box__dropdown")
         .should("have.attr", "open");
 
-      // realClick fires native browser events so the body div receives real focus,
-      // triggering the focusout on the search input with a valid relatedTarget.
+      // Start on a leaf so this checks pointer activation rather than initial
+      // dropdown activation accidentally supplying the same group header.
+      cy.get("#select-box").shadow().find("[_active-descendant]").should("have.length", 1);
+      cy.realPress("End");
+      cy.get("#select-box").shadow().find("[udex-list-item]").eq(1)
+        .should("have.attr", "_active-descendant");
+
       // Click left side to avoid the collapse icon on the right.
       cy.get("#select-box").shadow()
         .find("[udex-list-group-header]")
@@ -3202,6 +3340,8 @@ describe("SelectBox", () => {
       cy.get("#select-box").shadow()
         .find(".udex-text-field__search")
         .should("be.focused");
+      cy.get("#select-box").shadow().find("[udex-list-group-header]")
+        .should("have.attr", "_active-descendant");
 
       // ArrowDown (via onKeyDownSearch) advances from the group header active
       // descendant to the FIRST list item (United States) — not back to item 0 /