@sapudex/web-components 2.51.0 → 2.53.0

package/cypress/specs/SelectBox.cy.tsx

@@ -702,24 +702,22 @@ describe("SelectBox", () => {
       cy.get("#select-box").shadow().find(".udex-text-field__search").click();
       cy.realPress("ArrowDown");
 
+      // Updated: DOM focus stays on the input; the active item is marked via _active-descendant.
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(0)
-        .shadow().find("[part=item]")
-        .should("be.focused");
+        .should("have.attr", "_active-descendant");
 
       cy.realPress("ArrowDown");
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(1)
-        .shadow().find("[part=item]")
-        .should("be.focused");
+        .should("have.attr", "_active-descendant");
 
       cy.realPress("ArrowUp");
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(0)
-        .shadow().find("[part=item]")
-        .should("be.focused");
+        .should("have.attr", "_active-descendant");
     });
 
     it("MultiSelect mode - arrow keys navigate through collapsible group header and its items", () => {
@@ -728,40 +726,35 @@ describe("SelectBox", () => {
       cy.get("#select-box").shadow().find(".udex-text-field__search").click();
       cy.realPress("ArrowDown");
 
+      // Updated: DOM focus stays on the input; the active group header is marked
+      // via the _active-descendant attribute rather than receiving DOM focus.
       cy.get("#select-box").shadow()
-        .find("udex-list-group-header").shadow()
-        .find(".udex-list__group-header-wrap").shadow()
-        .find("[part=item]")
-        .should("be.focused");
+        .find("udex-list-group-header")
+        .should("have.attr", "_active-descendant");
 
       cy.realPress("ArrowDown");
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(0)
-        .shadow().find("[part=item]")
-        .should("be.focused");
+        .should("have.attr", "_active-descendant");
 
       cy.realPress("ArrowDown");
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(1)
-        .shadow().find("[part=item]")
-        .should("be.focused");
+        .should("have.attr", "_active-descendant");
 
       cy.realPress("ArrowUp");
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(0)
-        .shadow().find("[part=item]")
-        .should("be.focused");
+        .should("have.attr", "_active-descendant");
 
       cy.realPress("ArrowUp");
 
       cy.get("#select-box").shadow()
-        .find("udex-list-group-header").shadow()
-        .find(".udex-list__group-header-wrap").shadow()
-        .find("[part=item]")
-        .should("be.focused");
+        .find("udex-list-group-header")
+        .should("have.attr", "_active-descendant");
     });
 
     it("MultiSelect mode - Left arrow collapses a collapsible group header, Right arrow expands it", () => {
@@ -770,12 +763,11 @@ describe("SelectBox", () => {
       cy.get("#select-box").shadow().find(".udex-text-field__search").click();
       cy.realPress("ArrowDown");
 
-      // Focus the collapsible group header wrapper.
+      // Updated: the collapsible group header is the active descendant (DOM focus
+      // stays on the input), marked via the _active-descendant attribute.
       cy.get("#select-box").shadow()
-        .find("udex-list-group-header").shadow()
-        .find(".udex-list__group-header-wrap").shadow()
-        .find("[part=item]")
-        .should("be.focused");
+        .find("udex-list-group-header")
+        .should("have.attr", "_active-descendant");
 
       // Fixture starts expanded: neither the header host nor its children are collapsed.
       cy.get("#select-box").shadow()
@@ -936,13 +928,14 @@ describe("SelectBox", () => {
 
       cy.get("@trigger").click();
 
-      cy.get("#select-box").shadow()
-      .find("udex-list-item").eq(1)
-      .click();
+      // Navigate into the list with ArrowDown (aria-activedescendant model keeps
+      // DOM focus on the input throughout). Shift+Tab then closes the dropdown
+      // and moves focus to the previous focusable element on the page.
+      cy.get("@select").find(".udex-text-field__search").realPress("ArrowDown");
 
       cy.realPress(["Shift", "Tab"]);
 
-      cy.get("@select").find(".udex-text-field__search").should("be.focused");
+      cy.get("#previous-focus").should("be.focused");
     });
 
     it("focus moves to input and dropdown closes when press Esc on the list items", () => {
@@ -964,6 +957,18 @@ describe("SelectBox", () => {
       .find(".udex-select-box__dropdown")
       .should("not.have.attr","open");
     });
+
+    it("focus() method moves focus to the inner search input", () => {
+      cy.mount(<UDExSelectBox id="select-box" label="Languages">
+        <UDExSelectBoxItem label="JavaScript"></UDExSelectBoxItem>
+      </UDExSelectBox>);
+
+      cy.get("#select-box").then($el => {
+        ($el[0] as any).focus();
+      });
+
+      cy.get("#select-box").shadow().find(".udex-text-field__search").should("be.focused");
+    });
   });
 
   describe("Select Box Select All header tests",async () => {
@@ -1002,6 +1007,22 @@ describe("SelectBox", () => {
       cy.get("@selectall")
       .should("have.been.called");
     });
+
+    // Bug fix: groupListClassName no longer appends _additionalClassName, so the
+    // sticky marker forwarded from SelectBase must not land on the inner list container
+    // (previously caused an unwanted padding-top gap at the top of the dropdown).
+    it("does not apply the udex-list__sticky class to the inner list container", () => {
+      cy.mount(selectAll);
+      cy.get("#select-box").shadow().as("select");
+
+      cy.get("@select").find(".udex-text-field__trigger").click();
+
+      cy.get("@select")
+      .find("udex-list")
+      .find("udex-list-select-all").shadow()
+      .find(".udex-list__group-list")
+      .should("not.have.class", "udex-list__sticky");
+    });
   });
 
   describe("Select Box events tests",async () => {
@@ -1542,11 +1563,12 @@ describe("SelectBox", () => {
         .find(".udex-select-box__dropdown")
         .should("have.attr", "open");
 
+      // Updated: focus stays on the input; the last list item becomes the active
+      // descendant (marked via _active-descendant) rather than receiving DOM focus.
       cy.get("#select-box").shadow()
         .find("udex-list-item")
         .last()
-        .shadow().find("[part=item]")
-        .should("be.focused");
+        .should("have.attr", "_active-descendant");
     });
 
     // when hasFooter is true, pressing Tab on a focused list item moves focus to the
@@ -1564,11 +1586,10 @@ describe("SelectBox", () => {
         .find(".udex-select-box__dropdown")
         .should("have.attr", "open");
 
-      // A list item should now be focused (not the search input).
+      // A list item should now be the active descendant (DOM focus stays on the input).
       cy.get("#select-box").shadow()
-        .find("udex-list-item").eq(0).shadow()
-        .find("[part=item]")
-        .should("be.focused");
+        .find("udex-list-item").eq(0)
+        .should("have.attr", "_active-descendant");
 
       // Tab should be intercepted and focus redirected into the footer.
       cy.realPress("Tab");
@@ -1866,15 +1887,17 @@ describe("SelectBox", () => {
       cy.get("#next-focus").should("be.focused");
     });
 
-    it("Shift+Tab from list item closes dropdown and moves focus to search input", () => {
+    it("Shift+Tab from list item closes dropdown and moves focus to previous focusable element", () => {
       cy.mount(shortComponentWithFocusTargets);
       openDropdownOnFirstItem();
 
       cy.realPress(["Shift", "Tab"]);
 
       cy.get("#select-box").shadow()
-        .find(".udex-text-field__search")
-        .should("be.focused");
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr", "open");
+
+      cy.get("#previous-focus").should("be.focused");
     });
 
     it("Escape from list item closes dropdown and returns focus to trigger", () => {
@@ -1901,6 +1924,59 @@ describe("SelectBox", () => {
       cy.get("#select-box").shadow().find("#firstIcon").should("be.focused");
     });
 
+    // Added: covers the _handleArrowRightInRow fix — before moving DOM focus into
+    // the first icon button we call _setActiveDescendant(null), which strips the
+    // _udex-active-descendant JS state marker from the list item so only the icon's
+    // :focus ring is visible (not both rings simultaneously).
+    it("ArrowRight into the first icon removes _udex-active-descendant from the list item", () => {
+      cy.mount(shortComponentWithFocusTargets);
+      openDropdownOnFirstItem();
+
+      // Precondition: the first list item is the active descendant before ArrowRight.
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(0)
+        .should("have.class", "_udex-active-descendant");
+
+      cy.realPress("ArrowRight");
+
+      // The list item's active-descendant marker is cleared so it no longer shows a ring.
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(0)
+        .should("not.have.class", "_udex-active-descendant");
+
+      // DOM focus moves onto the icon button (its :focus ring is now the only one).
+      cy.get("#select-box").shadow().find("#firstIcon").should("be.focused");
+    });
+
+    // Added: covers the _handleArrowLeftInRow fix — when ArrowLeft returns from the
+    // first icon button back to the list item we call _setActiveDescendant(renderedItem)
+    // then move DOM focus back to the search input. This restores the list item's
+    // _udex-active-descendant ring while clearing the icon's :focus ring, so only the
+    // list item's ring is visible (not both rings simultaneously).
+    it("ArrowLeft from the first icon restores the list item ring and removes icon focus", () => {
+      cy.mount(shortComponentWithFocusTargets);
+      openDropdownOnFirstItem();
+
+      // Enter the first icon button.
+      cy.realPress("ArrowRight");
+
+      // Precondition: DOM focus is on the icon button.
+      cy.get("#select-box").shadow().find("#firstIcon").should("be.focused");
+
+      // Navigate back to the list item.
+      cy.realPress("ArrowLeft");
+
+      // The list item's active-descendant marker is restored so its ring shows again.
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(0)
+        .should("have.class", "_udex-active-descendant");
+
+      // DOM focus returns to the search input, clearing the icon's :focus ring.
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search")
+        .should("be.focused");
+    });
+
     it("ArrowRight from firstIcon button focuses secondIcon button", () => {
       cy.mount(shortComponentWithFocusTargets);
       openDropdownOnFirstItem();
@@ -1940,10 +2016,11 @@ describe("SelectBox", () => {
       cy.realPress("ArrowRight");
       cy.realPress("ArrowLeft");
 
+      // Updated: navigating back from the icon button makes the list item the
+      // active descendant (DOM focus returns to the input, not the item).
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(0)
-        .shadow().find("[part=item]")
-        .should("be.focused");
+        .should("have.attr", "_active-descendant");
     });
 
     it("ArrowDown from firstIcon button navigates to next list item", () => {
@@ -1955,8 +2032,7 @@ describe("SelectBox", () => {
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(1)
-        .shadow().find("[part=item]")
-        .should("be.focused");
+        .should("have.attr", "_active-descendant");
     });
 
     it("ArrowUp from firstIcon button navigates to previous list item (wraps to last)", () => {
@@ -1968,8 +2044,7 @@ describe("SelectBox", () => {
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").last()
-        .shadow().find("[part=item]")
-        .should("be.focused");
+        .should("have.attr", "_active-descendant");
     });
 
     it("ArrowDown from secondIcon button navigates to next list item", () => {
@@ -1982,8 +2057,7 @@ describe("SelectBox", () => {
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(1)
-        .shadow().find("[part=item]")
-        .should("be.focused");
+        .should("have.attr", "_active-descendant");
     });
 
     it("Escape from icon button closes dropdown and returns focus to input", () => {
@@ -2368,10 +2442,8 @@ describe("SelectBox", () => {
     });
   });
 
-  // Added: regression coverage for the WCAG 4.1.2 Treeview Checkbox pattern
-  // in SearchableListBase. SelectBox sets defaultAccessibleRole = "listbox",
-  // so it must NOT switch to the tree pattern even in MultiSelect + groups.
-  describe("Tree accessibility pattern regression", () => {
+  // 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;">
       <UDExSelectBox
         id="select-box-tree-regression"
@@ -2390,49 +2462,333 @@ describe("SelectBox", () => {
         .find(".udex-text-field__trigger").click();
     });
 
-    it("host [udex-list] has NO aria-multiselectable attribute", () => {
+    it("host [udex-list] has aria-multiselectable=\"true\" (tree + MultiSelect)", () => {
       cy.get("#select-box-tree-regression").shadow()
-        .find("[udex-list]").should("not.have.attr", "aria-multiselectable");
+        .find("[udex-list]").should("have.attr", "aria-multiselectable", "true");
     });
 
-    // Updated: `accessibleRoleForList` no longer collapses to `"group"` for grouped
-    // non-tree mode — it now returns `defaultAccessibleRole` (`"listbox"` for SelectBox)
-    // in every non-tree case. This aligns with the test's original intent (title says
-    // "keeps role=\"listbox\""); the prior `role="group"` assertion was already stale.
-    it("inner list div keeps role=\"listbox\" (not \"tree\")", () => {
+    it("inner list div has role=\"tree\"", () => {
       cy.get("#select-box-tree-regression").shadow()
         .find("[udex-list]").shadow()
-        .find("#udex-list").should("have.attr", "role", "listbox");
+        .find("#udex-list").should("have.attr", "role", "tree");
     });
 
-    // Updated: `accessibleRole` string property on udex-list-group-header was replaced
-    // by a `_treeMode` boolean (reflected as the `_tree-mode` attribute). SelectBox is
-    // not tree-capable so the boolean must stay false and the attribute must be absent.
-    it("group header host has NO _tree-mode attribute", () => {
+    it("group header host has _tree-mode attribute", () => {
       cy.get("#select-box-tree-regression").shadow()
         .find("udex-list-group-header")
-        .should("not.have.attr", "_tree-mode");
+        .should("have.attr", "_tree-mode");
     });
 
-    it("child items have role=\"option\", not \"treeitem\"", () => {
+    it("child items have role=\"treeitem\" on the host (aria-activedescendant pattern)", () => {
       cy.get("#select-box-tree-regression").shadow()
         .find("udex-list-group-header")
-        .find("udex-list-item").eq(0).shadow()
-        .find("[part=item]").should("have.attr", "role", "option");
+        .find("udex-list-item").eq(0)
+        .should("have.attr", "role", "treeitem");
+    });
+
+    it("child items have 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");
     });
 
-    it("child items have NO aria-checked (roleItem !== treeitem)", () => {
+    it("child items' inner [part=item] div is role=\"presentation\" (host carries the role)", () => {
       cy.get("#select-box-tree-regression").shadow()
         .find("udex-list-group-header")
         .find("udex-list-item").eq(0).shadow()
-        .find("[part=item]").should("not.have.attr", "aria-checked");
+        .find("[part=item]").should("have.attr", "role", "presentation");
     });
 
-    it("child items' checkbox is NOT aria-hidden (JAWS double-announce guard only applies to tree)", () => {
+    it("child items' checkbox is aria-hidden (tree mode, JAWS uses host aria-checked)", () => {
       cy.get("#select-box-tree-regression").shadow()
         .find("udex-list-group-header")
         .find("udex-list-item").eq(0).shadow()
-        .find("udex-checkbox").should("not.have.attr", "aria-hidden");
+        .find("udex-checkbox").should("have.attr", "aria-hidden");
+    });
+  });
+
+  // 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()
+        .realPress("ArrowDown");
+
+      // shortComponent has 6 items; the first item "JavaScript" becomes active.
+      cy.get("#select-box").shadow()
+        .find('[aria-live="polite"]')
+        .invoke("text")
+        .should("match", /^JavaScript, 1 of 6$/);
+    });
+
+    // 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)", () => {
+      cy.mount(groupHeaderCollapsible);
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search")
+        .click()
+        .realPress("ArrowDown");
+
+      // ArrowDown 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");
+    });
+
+    it("clears the live region text when the dropdown closes 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");
+
+      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", "");
+    });
+
+    it("appends 'Unselected' to the live region for an unchecked MultiSelect item", () => {
+      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");
+    });
+
+    it("appends 'Selected' to the live region for a checked MultiSelect item", () => {
+      const checkedMultiSelect = <div style="width: 350px; position:relative;">
+        <UDExSelectBox
+          id="select-box"
+          height="400px"
+          label="Programming languages"
+          mode={UDExListMode.MultiSelect}>
+          <UDExSelectBoxItem selected label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Java" supportingText="Building large-scale applications"></UDExSelectBoxItem>
+        </UDExSelectBox>
+      </div>;
+
+      cy.mount(checkedMultiSelect);
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search")
+        .click()
+        .realPress("ArrowDown");
+
+      // First MultiSelect item is pre-selected -> state suffix is "Selected".
+      cy.get("#select-box").shadow()
+        .find('[aria-live="polite"]')
+        .should("contain.text", "Selected");
+    });
+
+    it("appends 'collapsed' to the live region for a collapsed collapsible group header", () => {
+      const collapsedGroupHeader = <div style="width: 350px; position:relative;">
+        <UDExSelectBox
+          id="select-box"
+          mode={UDExListMode.MultiSelect}
+          label="Programming languages">
+          <UDExSelectBoxGroupHeader label="Programming Languages" collapsible collapsed>
+            <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
+            <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
+          </UDExSelectBoxGroupHeader>
+        </UDExSelectBox>
+      </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");
+    });
+
+    it("appends 'expanded' to the live region for an expanded collapsible group header", () => {
+      // groupHeaderCollapsible starts expanded (no `collapsed` attribute).
+      cy.mount(groupHeaderCollapsible);
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search")
+        .click()
+        .realPress("ArrowDown");
+
+      // ArrowDown 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");
+    });
+  });
+
+  // Added: covers the double-outline / flicker fix. After a click on a list item
+  // (SelectBase.handleItemSelection, MultiSelect path) or a group header
+  // (SelectBox.handleHeaderPress), DOM focus is returned to the search input via
+  // (this._search as HTMLElement).focus(). This prevents the clicked element from
+  // retaining its CSS :focus ring while _udex-active-descendant later tracks a
+  // different item during arrow navigation (which would show two rings at once).
+  describe("Select Box click focus retention (double-outline fix)", () => {
+    it("MultiSelect mode - clicking a list item returns DOM focus to the search input", () => {
+      cy.mount(multiSelect);
+      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");
+
+      // Click the second list item — the dropdown stays open in MultiSelect mode.
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(1)
+        .click();
+
+      // The fix returns DOM focus to the search input rather than leaving it on
+      // the clicked item.
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search")
+        .should("be.focused");
+    });
+
+    it("MultiSelect mode - the clicked list item does not retain DOM focus", () => {
+      cy.mount(multiSelect);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(1)
+        .click();
+
+      // The clicked item must NOT be the active element — otherwise its :focus
+      // ring would linger alongside the active-descendant ring.
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(1)
+        .should("not.be.focused");
+    });
+
+    it("MultiSelect mode - clicking a group header returns DOM focus to the search input", () => {
+      cy.mount(groupHeader);
+      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");
+
+      // Click the group header's own focusable row (the inner udex-list-item in
+      // the group header shadow) — this fires the header-press event which routes
+      // to SelectBox.handleHeaderPress.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .eq(0)
+        .shadow()
+        .find("udex-list-item")
+        .click();
+
+      // SelectBox.handleHeaderPress calls (this._search).focus() after onHeaderPress,
+      // so DOM focus must land on the search input.
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search")
+        .should("be.focused");
+    });
+
+    it("MultiSelect mode - after clicking an item then ArrowDown, only the newly navigated item carries the active-descendant ring", () => {
+      cy.mount(multiSelect);
+      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");
+
+      // Click the second item (index 1). handleItemSelection sets it as the active
+      // descendant and returns focus to the search input.
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(1)
+        .click();
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(1)
+        .should("have.class", "_udex-active-descendant");
+
+      // ArrowDown (dispatched on the focused search input via onKeyDownSearch)
+      // advances the active descendant to the third item (index 2).
+      cy.realPress("ArrowDown");
+
+      // Only the newly navigated item (index 2) carries the ring class.
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(2)
+        .should("have.class", "_udex-active-descendant");
+
+      // The previously clicked item (index 1) must have lost the ring class — no
+      // double outline.
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(1)
+        .should("not.have.class", "_udex-active-descendant");
+
+      // Exactly one element bears the active-descendant class at any time.
+      cy.get("#select-box").shadow()
+        .find("._udex-active-descendant")
+        .should("have.length", 1);
+    });
+  });
+
+  // Added: covers aria-required wiring on the combobox input in SelectBoxTemplate.
+  // The `required` boolean (inherited from SelectBase) drives aria-required={this.required}.
+  describe("aria-required accessibility", () => {
+    it("does not set aria-required=\"true\" on the combobox input by default (required not set)", () => {
+      cy.mount(<UDExSelectBox id="select-box" label="Programming languages"></UDExSelectBox>);
+
+      cy.get("#select-box").shadow()
+        .find('input[role="combobox"]')
+        .should("not.have.attr", "aria-required", "true");
+    });
+
+    it("sets aria-required=\"true\" on the combobox input when required is set", () => {
+      cy.mount(<UDExSelectBox id="select-box" label="Programming languages" required></UDExSelectBox>);
+
+      cy.get("#select-box").shadow()
+        .find('input[role="combobox"]')
+        .should("have.attr", "aria-required", "true");
     });
   });
 });