Skip to content

fix: fix autocomplete in voiceover+safari#1632

Merged
nolanlawson merged 3 commits intomasterfrom
improve-autosuggest-a11y-safari
Nov 10, 2019
Merged

fix: fix autocomplete in voiceover+safari#1632
nolanlawson merged 3 commits intomasterfrom
improve-autosuggest-a11y-safari

Conversation

@nolanlawson
Copy link
Copy Markdown
Owner

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.

@nolanlawson
Copy link
Copy Markdown
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.

@nolanlawson
Copy link
Copy Markdown
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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant