fix(machines): select uses the correct id for `aria-activedecesenda…

…nt` field (#1215) * fix(machines): use correct highlightedValue id on select machine * fix(machines): use undefined for empty highlighted value * docs: changeset --------- Co-authored-by: Segun Adebayo <[email protected]>
chakra-ui · Feb 4, 2024 · fa82362 · fa82362
1 parent 76c1231
commit fa82362
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/.changeset/wild-drinks-pretend.md b/.changeset/wild-drinks-pretend.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/select": patch
+---
+
+Fix issue where select uses the incorrect `id` for `aria-activedecesendant` field
diff --git a/packages/machines/select/src/select.connect.ts b/packages/machines/select/src/select.connect.ts
@@ -334,7 +334,9 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti
       role: "listbox",
       ...parts.content.attrs,
       "data-state": isOpen ? "open" : "closed",
-      "aria-activedescendant": state.context.highlightedValue || "",
+      "aria-activedescendant": state.context.highlightedValue
+        ? dom.getItemId(state.context, state.context.highlightedValue)
+        : undefined,
       "aria-multiselectable": state.context.multiple ? "true" : undefined,
       "aria-labelledby": dom.getLabelId(state.context),
       tabIndex: 0,