Downshift: Accessibility feedback

[marcysutton]

Here are some things I found when I tested the component!

What Works

• It works great from the keyboard. Very intuitive, and the clear results button is actionable. 👍
• Great job announcing the number of items available!

What Needs Work

• [x] The input needs a label, as placeholder isn't reliable in every assistive technology. You could use a unique aria-label, or ideally, a <label> element with text wrapping the input (which increases the hit area).
• [x] In Voiceover, you can't navigate with the arrow keys alone so the directions announcing "navigate with the up and down arrow keys" is inaccurate. You could try adding aria-activedescendant to the INPUT pointing to the ID of the currently highlighted item as you navigate. Here's a similar thread you could reference.
• [x] When an item is selected, the a11y-status-message says "no results" (see attached screenshot). It should say which item is selected. Same thing in NVDA and Voiceover.

Note: I can't even get codesandbox.io to load in IE, so I was unable to test it with JAWS.

[marcysutton]

Note: I wanted to test it on mobile, too, but I can't get codesandbox.io to work on a small screen!

[kentcdodds]

Wow @marcysutton, this is super nice of you to take time out of your busy schedule to help make this accessible! Thank you very much!

On mobile you might try this URL: https://codesandbox.io/embed/9rWEmzEv8?hidenavigation=1&view=preview

You could also download the example:

Then cd into the directory and run npm install && npm start. That'll pull it up locally so you can test it in JAWS (which would be super awesome of you too).

Thank you again. We'll make sure to address these things before we release 1.0.0 :tada:

[souporserious]

I think activedescendant should be relatively easy to add since we have highlightedIndex. I did some of this work in react-aria. I'll try and get it done tomorrow 😁

[kentcdodds]

Progress update: We've added a getLabelProps to encourage people to use a label which will have the proper for prop and an id prop for the input. :+1:

I'll be working on the false "no results" status message. Thanks!

[kentcdodds]

@souporserious, will you get a chance to work on activedescendant? That's the last thing we have left for a11y (for now)! :tada:

[souporserious]

On it today 👍

[kentcdodds]

Thanks to @souporserious we're done with the specific feedback. Thank you so much @marcysutton! We'll keep an eye on opportunities to improve accessibility of this project :smile: