Bug: Incorrect interaction modality on label clicks under parent element with tabindex - Githubissues

solidjs-community / solid-aria

A library of high-quality primitives that help you build accessible user interfaces with SolidJS.

Other

289 stars 16 forks source link

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

Open Bubz43 opened 2 years ago

Bubz43 commented 2 years ago

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')