pacocoursey / cmdk

Fast, unstyled command menu React component.
https://cmdk.paco.me
MIT License
9.42k stars 266 forks source link

Consider adding `aria-activedescendant` to support VoiceOver #92

Closed airjp73 closed 1 year ago

airjp73 commented 1 year ago

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

https://user-images.githubusercontent.com/25882770/221296270-f4e0bede-4eae-480b-bdca-d7d618f0339f.mp4

After the change

https://user-images.githubusercontent.com/25882770/221296574-79f90e02-020a-4102-8c76-1bc561f9ba62.mp4

joaom00 commented 1 year ago

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