search

aaronshaf / react-toggle

Elegant, accessible toggle component for React. Also a glorified checkbox.
http://aaronshaf.github.io/react-toggle/
MIT License
945 stars 159 forks source link

Suggestion: Improved accesibility #151

Open FrantisekVrab opened 4 years ago

FrantisekVrab commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

I see it now. Thanks!

shivangidas commented 3 years ago

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