Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fix autocomplete in voiceover+safari #1632

merged 3 commits into from
Nov 10, 2019


Copy link

fixes #1629

Follow-up to #1630. I finally got Safari+VoiceOver working (mostly).

The trick was to not use an aria-label on the role="option" element, and to instead just include a <span> positioned offscreen (screen-reader-only class). Apparently Safari+VoiceOver doesn't see the aria-label on the option.

Copy link
Owner Author

I say "mostly working" because Safari+VoiceOver is still bizarre about not announcing the first selected result when it appears, and also sometimes seems to get into a state where it just doesn't announce anything until you refresh the page. It seems to have something to do with the screenreader focus and the actual focus getting out of sync with each other.

I also confirmed that this PR doesn't break Chrome+VoiceOver, Chrome+NVDA, or Firefox+NVDA.

Copy link
Owner Author

So for those keeping score at home:

  • Safari+VoiceOver was busted because I was using aria-label on the role="option" element instead of just the text inside the element.
  • Chrome+NVDA was busted because instead of changing the aria-activedescendant to point to the ID of the selected element, I was changing the ID of the selected element and keeping aria-activedescendant the same.

Firefox+NVDA worked fine with both of these.

@nolanlawson nolanlawson merged commit 63c9f8d into master Nov 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

Safari+VoiceOver: autosuggest doesn't announce aria-activedescendant changes
1 participant