React-select: VoiceOver & accessibility support

[liorbentov]

Hey,
I have to say that I love this component and use it often.
However, the accessibility support isn't completed - It doesn't support Screen reader (for my knowledge)
I'm using Mac's VoiceOver, and when i'm navigating between the options with the keyboard, I expect to hear the option text (or whatever value I can pass), but nothing happens.

Would love if the component will support this feature.

[jesperzach]

+1

[LuckXP]

+1

[LarsFinley]

+1
It does need this to be fully accessible.

[zfalen]

+1

[sattaman]

+1

[rnagavel]

+1

[rnagavel]

With Voice over and Talkback screen readers on, user is unable to select the option from the list by double tap.

[paperview]

+1

[roborourke]

@liorbentov I just went over this and it seems to work with Voiceover now for the most part. May be because an update to OSX.

It is a bit confusing, when you tab in it announces it as a group and you can use the arrow keys, each option is announced as the label and 'clickable'. When you tab out it just says 'collapsed, button'. Not great but better than no voiceover at all. If you have some specific bugs / improvements based on how it behaves now I can dig into it as I need it for work and must meet WCAG AA standards.

[paperview]

@roborourke Have you tried it with the Voiceover on iOS? It hasn't been working for me at all in that use case. Not sure if that is a part of the standards or not.

[reneemeyer]

@roborourke voiceover on a webview in iOS is not working for me either. I am unable to select an option from the group. I have tried removing the fast click as well as preventing default behavior on touchStart. Attached is a video. Any help or insight would be great!
https://imgur.com/a/VU2FQ

[roborourke]

Ah sorry, this was chrome on macOS. I’ll do some actually thorough testing
On Fri, 23 Feb 2018 at 22:19, Renee Dudley [e-mail] wrote:

@roborourke https://github.com/roborourke voiceover on a webview in iOS
is not working for me either. I am unable to select an option from the
group. I have tried removing the fast click as well as preventing default
behavior on touchStart. Attached is a video. Any help or insight would be
great!
https://imgur.com/a/VU2FQ

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/JedWatson/react-select/issues/1084#issuecomment-368154811,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABbeWpU9dJQV4dCvj2hLdvqOBIiQWhRks5tXzlagaJpZM4JKbmp
.

[reneemeyer]

@roborourke - I've done some aria research which might be of help. Several people have documented that they are unable to select when role combobox is being used. So a potential fix could be allowing the user to override the role: 'combobox' in the renderInput function and the role: option in the option render function.
https://www.levelaccess.com/mobile-browser-support-for-aria-roles-states-and-properties/

[anthonyk1225]

Can confirm that NVDA reads out each option when navigating with arrow keys on IE & Firefox. macOs voiceover is silent on arrow key navigation using any browser.

[stonebat]

I'm having the same issue. This content was generated by the react-select 1.2.1. Somehow VO can't read the aria-label on the div with role="option". Then I copied the the div class="Select-menu-outer" tag to jsfiddle. And it's working. https://jsfiddle.net/stonebat/w4xxas99/2/

Any one...any idea?

<div class="Select has-value is-clearable is-searchable Select--single">
  <input type="hidden" name="selected-state" value="south-australia">
  <div class="Select-control">
    <span class="Select-multi-value-wrapper" id="react-select-2--value">
      <div class="Select-value State-SA">
        <span class="Select-value-label" role="option" aria-selected="true" id="react-select-2--value-item">South Australia</span>
      </div>
      <div class="Select-input" style="display: inline-block;">
        <input id="state-select" aria-activedescendant="react-select-2--value" aria-expanded="false" aria-haspopup="false" aria-owns="" role="combobox" value="" style="box-sizing: content-box; width: 5px;">
        <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;">
        </div>
      </div>
    </span>
    <span aria-label="Clear value" class="Select-clear-zone" title="Clear value">
    <span class="Select-clear">×</span></span><span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
  </div>
  <div class="Select-menu-outer">
    <div class="Select-menu" id="react-select-2--list" role="listbox" tabindex="-1">
      <div class="Select-option State-ACT" role="option" aria-label="Australian Capital Territory"
           id="react-select-2--option-0">Australian Capital Territory
      </div>
      <div class="Select-option State-NSW" role="option" aria-label="New South Wales" id="react-select-2--option-1">
        New South Wales
      </div>
      <div class="Select-option State-Vic" role="option" aria-label="Victoria" id="react-select-2--option-2">
        Victoria
      </div>
      <div class="Select-option State-Qld" role="option" aria-label="Queensland" id="react-select-2--option-3">
        Queensland
      </div>
      <div class="Select-option State-WA" role="option" aria-label="Western Australia"
           id="react-select-2--option-4">Western Australia
      </div>
      <div class="Select-option is-selected State-SA" role="option" aria-label="South Australia"
           id="react-select-2--option-5">South Australia
      </div>
      <div class="Select-option State-Tas" role="option" aria-label="Tasmania" id="react-select-2--option-6">
        Tasmania
      </div>
      <div class="Select-option is-focused State-NT" role="option" aria-label="Northern Territory"
           id="react-select-2--option-7">Northern Territory
      </div>
    </div>
  </div>
</div>

[techiemon]

I used the valueComponent and menuRenderer options with these methods to get the focused option and selected value to be spoken by VoiceOver.

```
const ariaStyle: any = {
position: 'absolute',
width: '1px',
height: '1px',
padding: '0',
margin: '-1px',
overflow: 'hidden',
clip: 'rect(0, 0, 0, 0)',
border: 0,
};

const menuRenderer = params => {
return (

aria-live="assertive"
aria-atomic="true"
style={ariaStyle}
>
{params.focusedOption.label}. {params.options.length} list items available, press enter to choose or use arrows to select another option.

{params.options.map(option => {
return

onClick={() => params.selectValue(option)}
onMouseOver={() => params.focusOption(option)}
className={Select-option ${params.focusedOption && params.focusedOption.value === option.value ? 'is-focused' : ''}}
role="option">{option.label}

;
})}

);
};

const valueComponent = params => {
return (

aria-live="assertive"
aria-atomic="true"
style={ariaStyle}

Selected value, {params.children}


{params.children}

);
};```

[EnshaednHiker]

@techiemon, could you post an entire working example of this this code working with a react component? This could be exactly what my company needs for a project, but it's not clear from the docs how the params object works.

[tarikhamilton]

@EnshaednHiker Look for the component you want to replace and view the code example (small little toggle button, not immediately obvious). They all get props passed in, so props === params in the above example.

[tarikhamilton]

Also, if anyone could outline what exactly is needed to make this screen reader accessible, I'd love to make a PR. Is @techiemon 's solution adequate?

[bladey]

Hello -

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

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue 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!