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 ***@***.***> 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 <#1084 (comment)>, 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 (
    <div className="Select-menu-outer">
      <span role="status"
            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.
      </span>
      <div className="Select-menu" role="listbox">
        {params.options.map(option => {
          return <div key={option.value}
                    onClick={() => params.selectValue(option)}
                    onMouseOver={() => params.focusOption(option)}
                    className={`Select-option ${params.focusedOption && params.focusedOption.value === option.value ? 'is-focused' : ''}`}
                    role="option">{option.label}</div>;
        })}
      </div>
    </div>
  );
};

const valueComponent = params => {
  return (
    <div className="Select-value" title={params.value.label}>
      <span role="status"
            aria-live="assertive"
            aria-atomic="true"
            style={ariaStyle}
      >Selected value, {params.children}
      </span>
      <span className="Select-value-label">
        {params.children}
      </span>
    </div>
  );
};```

[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?

[tomasdev]

Not really, it's more a workaround than the proper solution.

1. ARIA roles need to be added for option, listbox and combobox depending on the case.
2. ARIA attributes for selected, activedescendant, expanded, label are required as well.
3. Keyboard navigation must be validated against WCAG standards (i.e., screen readers must not collide with keyboard navigation)

But then when using autocomplete and AJAX loading, it becomes a little harder.

Personally, if you must support accessibility AA or AAA, I'd recommend going with a native (you can style the trigger, by putting it into opacity: 0 and decorating the background / parent container)

[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!