Open bvellek opened 7 years ago
@bvellek Great issue! Thank you for testing it out for SR. Both options sound good, which do you think is more friendly for users with screenreaders? I would love a PR for this issue @bvellek if you have time to work on it ๐
@kenny-hibino Great! I am going to reach out to the a11y community to make sure I choose the best solution, then I will submit a PR.
Hey @kenny-hibino sorry for the delay. I reached out to the a11y community and was able to get the opinion of a few frequent users of screen readers. They recommended going with the first option to add a descriptive <span>
so non-sighted users know they can arrow down as they type to see suggestions. In order to hide the span visually, I added the styles from http://a11yproject.com/posts/how-to-hide-content/ . I submitted a PR. Let me know if you have any questions or want to make any changes ๐
@bvellek Thank you so much. I just left a comment in your PR. Please take a look ๐
@kenny-hibino made some changes! let me know if that works for you or if you would like me to change anything else.
Was there a reason why the above PR wasn't implemented (assuming that's the case because of the issue status)? Just ran into the same issue today, curious more than anything else.
hey @Alastair-smith2 , I am not sure why this was never merged. I gather things have changed a bit since this was originally submitted and will likely need to be rebased and adjusted.
@hibiken could you tell us why you never merged this ? It'd be nice to have !
@bvellek would you be willing to update the PR? I would review and merge it.
I was testing this component with a screenreader and found a couple issues with the display of the autocomplete suggestions. When listening to the screenreader there is no way to know that a dropdown with suggestions has appeared as you type into the input.
Consider these two fairly simple options.
Option 1: provide a visually-hidden
<span>
that says to arrow down for autocomplete suggestionsor Option 2: add the
aria-live="polite"
attribute so the screenreader will automatically start reading the suggestions as you type into the input.I have tested both options with a screenreader and both work nicely to add a bit more accessibility to the autocomplete. If you like any of these suggestions I'd be happy to make a PR. ๐
Side note: I also noticed that the input has no
<label>
which is an accessibility requirement. This one isn't so much of an issue, as the developer using the component can easily add a<label>
and theinputId={...}
prop, but could also be solved by including aaria-label
attribute by default.