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).
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
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.
Most helpful comment
What is the status of the issue?