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

Suggestion: Improved accesibility #151

Open
FrantisekVrab opened this issue Oct 21, 2019 · 3 comments
Open

Suggestion: Improved accesibility #151

FrantisekVrab opened this issue Oct 21, 2019 · 3 comments

Comments

@FrantisekVrab
Copy link

FrantisekVrab commented Oct 21, 2019

Hi,

when I use "tab" for switching between buttons and inputs, the hidden checkbox input .react-toggle-screenreader-only is focusable, but I can't handle this state.

I suggest one of following (or both allowing to choose the one from these):

  1. Add tabIndex="-1" to this checkbox, so the whole toggle become not focusable.
  2. (Better) Add ...-focus or ...-active or similar class to .react-toggle-track or .react-toggle when this checkbox is in focus, so I can style the focus state of the toggle.

The one more step should be add role="switch" to .react-toggle

Thanks.

@oahccc
Copy link

oahccc commented Jun 4, 2020

There's a class "react-toggle--focus" automatically applied onto the component when being tabbed through. I think it matches your suggestion no.2.

@FrantisekVrab
Copy link
Author

I see it now. Thanks!

@shivangidas
Copy link

I can see it gets focused but on pressing enter the toggle action doesn't work :(
Any way around it?

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

No branches or pull requests

3 participants