-
Notifications
You must be signed in to change notification settings - Fork 794
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
[Label] hover effect should match label element #1233
Comments
Hi @penx, Thanks for raising this. Whilst I agree it would be nice to match that, I don't think it is possible to force a CSS state. :hover, [data-hover] { … } Which is not ideal and not really obvious for users. The easiest thing to do if you have control might be to nest the control inside the .label:hover .control, .control:hover { … } Can you think of other ideas? ✌️ |
Use a label element? 😁 I'd be keen to know why this isn't a label element already, I'm sure there's good reason but I wasn't able to figure it out from the past PRs I looked at. |
Another thought is that browser vendors should match the label hover effect when I don't see any relevant open or closed issues in any of these trackers when searching for "role label hover" |
historically, it needed to be there have been a few separate occasions i've mentioned it can probably switch to the only case it might be needed is custom select so that clicking label focuses custom select but could add a focus listener to the native one perhaps and redirect it. |
Ok cool, we'll do another pass to see if we can improve things here. |
Happy to see there's an open discussion around this topic! I really appreciate it. Let not forget the first rule of ARIA: https://www.a11y-collective.com/the-first-rule-for-using-aria/ |
Bug report
Current Behavior
If you hover over a
<label />
associated with a Radix Checkbox (or<input />
), the checkbox's hover state is triggered.If you hover over a
<LabelPrimitive.Root />
associated with a checkbox (or<input />
), the checkbox's hover state is not triggered.Expected behavior
The behaviour of
<LabelPrimitive.Root />
should match<label />
.If you follow the documentation for Checkbox:
https://www.radix-ui.com/docs/primitives/components/checkbox
It shows usage with a standard label element, including a hover effect. If you then switch to using Radix' label component, you lose the hover effect.
Reproducible example
Hover over the labels in this example:
https://codesandbox.io/s/ecstatic-rosalind-eky4tl
Your environment
The text was updated successfully, but these errors were encountered: