Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add keyboard accessibility to multiselect #2098

Closed
wants to merge 1 commit into from

Conversation

jasonchangxo
Copy link
Contributor

I came across this issue while working on accessibility items throughout our app. The "x" icon on each of the multiselect pill values are currently not accessibly via keyboard. Pressing backspace to delete the value is a viable workaround, but is not obvious for a user who cannot see the screen and relies on a screen reader.

@coveralls
Copy link

Coverage Status

Coverage decreased (-0.5%) to 92.319% when pulling 4a4fd10 on jasonchangxo:fix/focus-x-icon into ca09183 on JedWatson:master.

@JedWatson
Copy link
Owner

@seancurtis can you take a look at this please?

@JedWatson
Copy link
Owner

Thanks for the PR @jasonchangxo

I've had a look at the implementation and thought quite a bit about it; what I'd like to do long term is provide a way to "pseudo-focus" selected values using the keyboard instead of making them tab focusable (similar to how menu items are handled)

With that in mind I'm not going to merge this, but you and anyone else could absolutely implement it using the valueComponent prop if this is the behaviour you want in your app.

@JedWatson JedWatson closed this Nov 24, 2017
@JedWatson
Copy link
Owner

Just a note; I've linked to this PR from the Readme with a note about the current accessibility limitations.

JedWatson added a commit that referenced this pull request Nov 24, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants