React-select: add support for assistive technologies

[gpicavet]

Hello,

key support is good, but It would be great to improve accessibility with meaningful tags (ul/li) or aria attributes.

king regards

[bruderstein]

Can't :+1: this enough. I'd love some pointers on what we should be doing - where we can usefully add aria attributes, for example. Would the menu be better as a ul/li, and then add the expanded/collapsed aria attributes for when the menu is open or closed?

I'm sad to say my experience in this area is limited, but I'm more than willing to help with the changes.

[qzqzzz]

@bruderstein take a look at ReactWidgets DropdownList http://jquense.github.io/react-widgets/docs/#/dropdownlist -> see all the aria-* attributes in the HTML markup and how they change their values when interacting with the component.

If you want more official keyboard / screen-reader accessibility documentation for a "combo box" type of component, read this http://www.w3.org/WAI/PF/aria-practices/#combobox

cc @jquense

[jquense]

bah catching me with me pants down with old docs up. If you are looking at how we do a11y for react-widgets, make sure you are looking at the docs for >= 2.8.0, which includes a recent aria overhaul.

[bruderstein]

Many many thanks for the links. I'll try and do something on this next week.

[jquense]

i would also recommend the web-a11y slack/gitter lot of really excellent resources there.

[thebigredgeek]

Bump. Any update on this?

[bruderstein]

I've not had any time for react-select over the last few weeks, but hope to be back on things towards the end of next week.

This ticket is my priority 1.

[qzqzzz]

any news on this?

[bruderstein]

Sadly I've not had any time for react-select recently, combination of other projects and RL. I will try and get this in though. Apologies for the delay.

[markusv]

any progress on this?

[bruderstein]

I can only apologise that this has taken so long, but I've started work on this. Most of the time has been spent getting to grips with a11y, which I know I should be better at. I've put a page up with the examples with how far I've got, which I'd really appreciate feedback on from screenreader / assistive tech users, or people that know what they're doing with accessibility :smile:

http://bruderste.in/react-select-a11y

Non-searchable select boxes are not working yet, but they're broken completely in firefox (even for sighted users). Searchable seems to work using the Orca screenreader in Gnome - I'd really appreciate some feedback from other screenreaders (especially if you can say if it's usable compared to other combobox solutions).

Many thanks.
/cc @grisha78 @cosminnicula @markusv

UPDATE: It appears Orca breaks the non-searchable select box in Firefox, with it turned off, it behaves normally.

[bruderstein]

TODO:

• [x] Use indexes for IDs instead of value
• [x] Non searchable focused option (Chrome / ChromeVox)
• [x] Non searchable firefox / orca issues
• [x] Multiselect remove keyboard support (focusable remove instead of just backspace)
• [x] Disable control
• [ ] Large dataset (react-virtualized rendering)
• [ ] Pass-through the id / aria-labelledby / aria-label props

[genyded]

I know this is closed and not sure if it would be of any help. but there is a fairly new React based UI framework called Grommet that is striving to be completely a11y compliant and may serve as a foundation to do a comparison of how they are handling some of it for Selects. Their Select is not nearly as advanced as this AWESOME one, but there may be some core tenants that could be leveraged.

[mmollaverdi]

I can't get ChromeVox to read labels associated with a Select component:

<label>Staes</label>
<Select ... />

I've tried:

Setting for (htmlFor) attribute on label:

<label htmlFor="statesInput">Staes</label>
<Select id="statesInput" ... />

Setting aria-labelledby on Select:

<label id="statesLabel">Staes</label>
<Select aria-labelledby="statesLabel" ... />

Setting aria-label attribute on Select:

<label>Staes</label>
<Select aria-label="States" ... />

And none of them worked.

ids on <Select /> don't actually seem to be applied to any DOM element generated by the component.

Am I missing something, or is this not supported?

[bruderstein]

@mmollaverdi That's part of what the resolution of this issue will solve (it also makes it actually usable with a screenreader - hopefully!). I'll be sending the PR within a few days hopefully.

[mmollaverdi]

Thanks @bruderstein. The demo site you've linked to above, looks very promising. I tried some of the select boxes with ChromeVox the other day and it was able to read the options 🎉

I'm happy to contribute if you need any help with the accessibility work you're doing.