React-select: Screen reader read's selected value as 'blank'

Created on 3 Mar 2017  路  3Comments  路  Source: JedWatson/react-select

Hi there,

I am noticing that a screen reader (NVDA and WIndows 10 Narrator) is unable to read the selected value in the react-select field. NVDA will read it as 'blank' (see screenshot below).

readblank

To reproduce using NVDA screen reader:
1) tab to the react-select field
2) the screen reader will read the combo box as having a value of 'blank' even though a value is selected

Any suggestions on how to rectify this so that screen readers can read the value selected in the react-select field?

Thanks and Regards,
Eric

categoraccessibility issureviewed

Most helpful comment

What is the status of the issue?

All 3 comments

I also was looking into this issue and thought it was related to role="listbox" or role="combobox" not being assigned to the parents of the elements with role="option", but this did not solve the issue. NVDA reads out "blank" whenever it focuses on an empty line, though it will say "blank" even if searchable is false.

What is the status of the issue?

As a workaround I append the selected Option to the aria-label. The tricky part is, that now the screen reader (NVDA) will still read the old value when the user selects a new value. As solution to this problem, I don't append the selected Option to the aria-label while the select menu is open.

<ReactSelect
  aria-label={'My Label' + (this.state.isOpen ? ` Option ${selectedOptionLabel} is selected` : '')}
  onMenuOpen={() => this.setState({isOpen: true})}
  onMenuClose={() => this.setState({isOpen: false})}
  // ...
/>

I'm not sure whether this is a good solution, but at least the screen reader now get's information about the selected option.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

steida picture steida  路  3Comments

juliensnz picture juliensnz  路  3Comments

MalcolmDwyer picture MalcolmDwyer  路  3Comments

pashap picture pashap  路  3Comments

Meesam picture Meesam  路  3Comments