timc1/kbar

Section headings counted as list elements by screen readers

wkillerud opened this issue · 1 comments

wkillerud commented

Hey, and thanks for building and sharing this lovely tool ❤️

I did some testing with VoiceOver, and noticed an issue with how list items are counted.

Steps to reproduce

  1. Visit https://kbar.vercel.app
  2. Start VoiceOver
  3. Open the kbar with Cmd + K. If using Safari, type any key and delete the character you entered 1.
  4. Press Arrow down.

Notice how VoiceOver reads Home as 2 of 10, and Docs as 3 of 10. Also notice how it's impossible to reach 1 of 10.

Debugging

  • Everything in the listbox is an option, including section headings, so everything is counted as an item by VoiceOver.
  • With role="presentation" set for section headings they are still counted.
  • Setting aria-hidden="true" for section headings solves the counting problem, but obviously makes the heading inaccessible. A potential workaround is to set an aria-label that includes the section heading, but that quickly gets verbose.

I ended up setting aria-hidden="true" on the section headings with a local patch for now. Of course the ideal solution would be to keep the headings accessible and count the options correctly. I just couldn't figure out how 😅

Versions

  • kbar versions 0.1.0-beta.38 and 0.1.0-beta.39
  • macOS 13
  • Safari 16.1
  • Chrome 108
  • Firefox 107

Footnotes

  1. Haven't been able to track down why, but for some reason VoiceOver in Safari doesn't announce the active list item on first render. Works fine in Firefox and Chrome. Also works fine in Safari after inputing a single character. 🤷 ↩

stale commented

Hey! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.