-
Notifications
You must be signed in to change notification settings - Fork 609
Make toggle switch labels clickable #2009
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
Conversation
|
There should be only one label per input. To avoid having to generate the ID, you can simply wrap the input inside the label and everything will be clickable. The element for screen readers should also remain inside the label in that case. |
|
Nice improvement, @nqst! After wrapping the control in a label like @brunoprietog suggested, I'd also recommend adding |
| <span class="switch__btn round"></span> | ||
| <span class="for-screen-reader"><%= item.text %></span> | ||
| <li class="list-style-none margin-none"> | ||
| <label class="toggler__visible-when-off flex align-center gap cursor-pointer"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| <label class="toggler__visible-when-off flex align-center gap cursor-pointer"> | |
| <label class="toggler__visible-when-off flex align-center gap"> |
I'm not entirely sure about using cursor-pointer on the text labels like this — it feels a bit distracting to me. I'd prefer keeping the default cursor there.
That said, it's up to you. Feel free to apply the suggestion if you agree, or leave it as is if you think the pointer cursor works better.
|
Thanks for the helpful feedback, @brunoprietog @andyra! I've addressed everything. |
andyra
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good 👍
Enable clicking on toggle switch labels on the Set up a Webhook and Board Settings pages: