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

Bug: Incorrect interaction modality on label clicks under parent element with tabindex #60

Open
Bubz43 opened this issue Jul 19, 2022 · 0 comments
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@Bubz43
Copy link

Bubz43 commented Jul 19, 2022

Description
Clicking on a label under a parent with a tabindex will cause the interaction modality to switch to virtual on pointerup. This is most noticeable with visually hidden inputs as the label is the entire hit area but still appears on normal ones as well. Initially noticed this on a checkbox within a dialog, as dialogProps adds tabIndex: -1.

Reproduction
https://codesandbox.io/s/old-sunset-yi0z91?file=/src/main.tsx
Clicking on the checkbox under a parent tab index will show the focus ring.

Workarounds

  • Use another element instead of label and manually handle clicking input
  • Confirm focus visible through browser api isFocusVisible() && inputRef?.matches(':focus-visible')
@fabien-ml fabien-ml added the bug Something isn't working label Jul 19, 2022
@fabien-ml fabien-ml added the help wanted Extra attention is needed label Aug 27, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

2 participants