From 6a2f1e439ab3732d295915f18f6d22c8dc9fd7d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Magalh=C3=A3es?=
 <joaopsilvamagalhaes@gmail.com>
Date: Sun, 9 Apr 2023 15:01:14 -0300
Subject: [PATCH] feat: use aria-activedescendant in input

---
 cmdk/src/index.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/cmdk/src/index.tsx b/cmdk/src/index.tsx
index 806b682..26bf2be 100644
--- a/cmdk/src/index.tsx
+++ b/cmdk/src/index.tsx
@@ -86,6 +86,7 @@ type Context = {
   group: (id: string) => () => void
   filter: () => boolean
   label: string
+  commandRef: React.RefObject<HTMLDivElement | null>
   // Ids
   listId: string
   labelId: string
@@ -272,6 +273,7 @@ const Command = React.forwardRef<HTMLDivElement, CommandProps>((props, forwarded
         return propsRef.current.shouldFilter
       },
       label: label || props['aria-label'],
+      commandRef: ref,
       listId,
       inputId,
       labelId,
@@ -608,6 +610,7 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>((props, forwardedRef) =
     <div
       ref={mergeRefs([ref, forwardedRef])}
       {...etc}
+      id={id}
       cmdk-item=""
       role="option"
       aria-disabled={disabled || undefined}
@@ -686,8 +689,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forwardedRe
   const isControlled = props.value != null
   const store = useStore()
   const search = useCmdk((state) => state.search)
+  const value = useCmdk((state) => state.value)
   const context = useCommand()
 
+  const selectedItemId = React.useMemo(() => {
+    const item = context.commandRef.current?.querySelector(`${ITEM_SELECTOR}[${VALUE_ATTR}="${value}"]`)
+    return item?.getAttribute('id')
+  }, [value, context.commandRef])
+
   React.useEffect(() => {
     if (props.value != null) {
       store.setState('search', props.value)
@@ -707,6 +716,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forwardedRe
       aria-expanded={true}
       aria-controls={context.listId}
       aria-labelledby={context.labelId}
+      aria-activedescendant={selectedItemId}
       id={context.inputId}
       type="text"
       value={isControlled ? props.value : search}