Fix aria-activedescendant not being removed when Dropdown or ComboBox…

… is closed (#4426)

.changeset/eighty-bears-chew.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed aria-activedescendant not being removed when Dropdown or ComboBox is closed.

packages/core/src/__tests__/__e2e__/combo-box/ComboBox.cy.tsx

@@ -751,4 +751,21 @@ describe("Given a ComboBox", () => {
       .its("duration", { timeout: 0 })
       .should("be.lessThan", 5000);
   });
+
+  it("should remove aria-activedescendant when closed", () => {
+    cy.mount(<Default />);
+    cy.findByRole("combobox").realClick();
+    cy.findByRole("option", { name: "Alabama" }).should("be.activeDescendant");
+    cy.findByRole("option", { name: "Alaska" }).realClick();
+    cy.findByRole("combobox").should("not.have.attr", "aria-activedescendant");
+    cy.findByRole("combobox").realClick();
+    cy.findByRole("option", { name: "Alaska" }).should("be.activeDescendant");
+    cy.findByRole("combobox").clear();
+    cy.findByRole("option", { name: "Alabama" }).realClick();
+    cy.findByRole("combobox").should("not.have.attr", "aria-activedescendant");
+    cy.findByRole("combobox").realClick();
+    cy.findByRole("option", { name: "Alabama" }).should("be.activeDescendant");
+    cy.realPress("Escape");
+    cy.findByRole("combobox").should("not.have.attr", "aria-activedescendant");
+  });
 });

packages/core/src/__tests__/__e2e__/dropdown/Dropdown.cy.tsx

@@ -473,4 +473,20 @@ describe("Given a Dropdown", () => {
     cy.findAllByRole("option").eq(0).realClick();
     cy.get("@blurSpy").should("not.have.been.called");
   });
+
+  it("should remove aria-activedescendant when closed", () => {
+    cy.mount(<Default />);
+    cy.findByRole("combobox").realClick();
+    cy.findByRole("option", { name: "Alabama" }).should("be.activeDescendant");
+    cy.findByRole("option", { name: "Alaska" }).realClick();
+    cy.findByRole("combobox").should("not.have.attr", "aria-activedescendant");
+    cy.findByRole("combobox").realClick();
+    cy.findByRole("option", { name: "Alaska" }).should("be.activeDescendant");
+    cy.findByRole("option", { name: "Alabama" }).realClick();
+    cy.findByRole("combobox").should("not.have.attr", "aria-activedescendant");
+    cy.findByRole("combobox").realClick();
+    cy.findByRole("option", { name: "Alabama" }).should("be.activeDescendant");
+    cy.realPress("Escape");
+    cy.findByRole("combobox").should("not.have.attr", "aria-activedescendant");
+  });
 });

packages/core/src/combo-box/ComboBox.tsx

@@ -353,6 +353,12 @@ export const ComboBox = forwardRef(function ComboBox<Item>(
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.
   useEffect(() => {
+    // If the list is closed we should clear the active item
+    if (!openState) {
+      setActive(undefined);
+      return;
+    }
+
     // We check the active index because the active item may have been removed
     const activeIndex = activeState ? getIndexOfOption(activeState) : -1;
     let newActive = undefined;
@@ -362,12 +368,6 @@ export const ComboBox = forwardRef(function ComboBox<Item>(
       return;
     }
 
-    // If the list is closed we should clear the active item
-    if (!openState) {
-      setActive(undefined);
-      return;
-    }
-
     // If we have selected an item, we should make that the active item
     if (selectedState.length > 0) {
       newActive = getOptionsMatching(

packages/core/src/dropdown/Dropdown.tsx

@@ -372,6 +372,12 @@ export const Dropdown = forwardRef(function Dropdown<Item>(
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.
   useEffect(() => {
+    // If the list is closed we should clear the active item
+    if (!openState) {
+      setActive(undefined);
+      return;
+    }
+
     // We check the active index because the active item may have been removed
     const activeIndex = activeState ? getIndexOfOption(activeState) : -1;
     let newActive = undefined;
@@ -381,12 +387,6 @@ export const Dropdown = forwardRef(function Dropdown<Item>(
       return;
     }
 
-    // If the list is closed we should clear the active item
-    if (!openState) {
-      setActive(undefined);
-      return;
-    }
-
     // If we have selected an item, we should make that the active item
     if (selectedState.length > 0) {
       newActive = getOptionsMatching(