Select accessiblity issues for JAWs and NVDA

[jquense]

Great job ya'll with the recent efforts to make react-select more accessible. It performs great in VoiceOver! Unfortunately the strategy doesn't seem to work for the two most commonly used SR's JAWs and NVDA.

For both, the live region alerts are not read aloud when you enter or select items in the list. This ends being mostly a silent black box for these SR's, and the input doesn't seem usable :/

I will admit i'm not the best SR user, so some of the issue may be me, but i am not a complete novice either. I'm also trying to com up with a good a11y strategy for these sorts of inputs for the next iteration of react-widgets!

[zebogen]

I believe the issue is that the current implementation doesn't exactly follow the spec. The MDN documentation for ARIA Live Regions says:

Note: Assistive technologies will announce dynamic changes in the content of a live region. The live region must first be present (and usually empty), so that the browser and assistive technologies are aware of it. Any subsequent changes are then announced.

react-select only renders the Live Region when the dropdown is focused:

react-select/src/Select.js

Lines 1750 to 1753 in 79efe79

	renderLiveRegion() {
	if (!this.state.isFocused) return null;
	return (
	<A11yText aria-live="assertive">

So this should change to always render the live region but clear the content when the dropdown loses focus.

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

[jquense]

Still relevant last I checked and important :)

Thanks!

[bladey]

Thanks @jquense!

[ebonow]

Greetings @jquense ,

Would you kindly verify if this this is still an issue for you in version 4.2.1?

I spent a bit of time refactoring the aria-live implementation and was sure to render the region on mount, but was not personally able to do any testing outside of VoiceOver.

https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/components/LiveRegion.js#L163-L175

[jquense]

@ebonow thanks for working on this, I unfortunately don't have time to verify this, but if you or anyone else wants to test with NVDA, Microsoft provides free VM's for testing stuff (like old internet explorer), In the past i've used them to test with NVDA from my Mac