Consider adding aria-activedescendant to support VoiceOver

[airjp73]

By default, cmdk doesn't seem to be accessible to VoiceOver (Mac). I'm guessing this is just an edge-case / difference between different screen readers. I figured out how to fix the issue in my project, but I think it would make sense for this to be built into the library itself.

To get it to work well with VoiceOver, I had to add aria-activedescendant to the command input. I've added screen recordings for a "before" and "after" to the bottom of this issue.

// CommandItem component
const id = useId();
return <Command.Item id={id} {...etc} />

// CommandInput component
const value = useCommandState((state) => state.value);
const [id, setId] = React.useState<string | undefined>(undefined);

useEffect(() => {
  const nextId = document.querySelector(`[cmdk-item=""][data-value="${value}"]`)?.id;
  setId(nextId);
}, [value]);

return <Command.Input aria-activedescendant={id} {...etc} />

Thanks for the great library!

---

Before the change

before.mp4

After the change

after.mp4

[joaom00]

Cmdk also does not seem to be accessible to NVDA (Windows). Another thing I noticed is that the group is not announced correctly