VoiceOver doesn't read correct option when keying through menu in Chrome

[ericgio]

Version

v2.3.0

Steps to reproduce

• Turn on VoiceOver in MacOS settings
• Go to examples page
• Focus input for the first example
• Use arrow keys to navigate through menu

Expected Behavior

VoiceOver reads the highlighted option

Actual Behavior

Voiceover reads the previously highlighted option, and sometimes doesn't even read the entire label.

Via email from Jeff:

Just noticed that when using VoiceOver and react-bootstrap-typeahead the element that is announced is one less (in terms of array index) than the one that is selected on screen. So in this case, VoiceOver is telling me I’m on ‘1 Civil and Environmental Eng’. So for AT users, the selections provide what seem to be incorrect results. It works fine for regular non-AT users. I will be meeting with Rich, our accessibility tester, sometime soon, and will see if the same think happens with VoiceOver. Is this something you think would be a quick fix?

cc @RichCaloggero

[ericgio]

per Jeff, this seems to be ok in Safari but not Chrome

[ericgio]

I've noticed this issue with some other typeaheads out there, so this may be a broader issue of how VoiceOver interacts with these types of components. Unfortunately, I don't know much about where and how VO gets the text it is reading.

[ericgio]

I think this is primarily an issue of Chrome's interaction with VoiceOver than a bug with the component itself. Looking at this example on the W3C site itself, Safari works great, but Chrome is pretty much useless.