Bug: Incorrect interaction modality on label clicks under parent element with tabindex #60
Description
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')