Dropdown Options are not readable by screen reader

[dusterbed]

Hello! I was just testing with macbook voiceover. The select is keyboard accessible (awesome!), but when I use the keyboard to navigate down into the options, the screenreader cannot read these, and individuals with low or no vision that rely on a screenreader will not have an idea what they are choosing from. Any suggestions?

[dusterbed]

Just noticed that the element with role="combobox" could have aria-labelledby that references an ID of the label or title that a user adds. As for the select <option>s being readable by screenreader, if the div with role="listbox" has aria-activeddescendant linked to an id for the first option, and subsequent options have numbered ids that follow, it should be readable by screenreader.

<div role="listbox" tabindex="0" id="listbox1" onclick="return listItemClick(event);" 
  onkeydown="return listItemKeyEvent(event);" onkeypress="return listItemKeyEvent(event);" 
  onfocus="this.className='focus';" onblur="this.className='blur';" aria-activedescendant="listbox1-1">
  <div role="option" id="listbox1-1" class="selected">Green</div>
  <div role="option" id="listbox1-2">Orange</div>
  <div role="option" id="listbox1-3">Red</div>
  <div role="option" id="listbox1-4">Blue</div>
  <div role="option" id="listbox1-5">Violet</div>
  <div role="option" id="listbox1-6">Periwinkle</div>
</div>

[anvk]

Duplicate of 1084 ?

[dusterbed]

Yes, it does seem to be. I have attempted to provide a solution here... maybe this will help?

[brianfegan]

Any movement on this issue? Did you submit a PR with that code above @dusterbed?

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.