search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.88k stars 823 forks source link

[Slider] Thumb focus/focus-visible broken due to `onPointerDown` implementation? #2397

Open soykje opened 1 year ago

soykje commented 1 year ago

Bug report

Current Behavior

As .focus() is being used programmatically in the Slider, the browser cannot make the difference between keyboard and/or mouse navigation (:focus vs :focus-visible).

FYI: https://github.com/radix-ui/primitives/blob/83a8c13bf66f3d9f17d77caeb187a69eb146930b/packages/react/slider/src/Slider.tsx#L100 and https://github.com/radix-ui/primitives/blob/83a8c13bf66f3d9f17d77caeb187a69eb146930b/packages/react/slider/src/Slider.tsx#L388

Expected behavior

We should be able to use :focus-visible and :focus states.

Reproducible example

https://stackblitz.com/edit/stackblitz-starters-7sbyyl?file=components%2FSlider%2Findex.tsx

Suggested solution

There is actually a focus event option (focusVisible) that could help, but it is only available on some browsers for now: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#parameters. Firefox already includes it, and Chromium implementation is in progress (from what I read). This might be a way to improve a11y styles for Firefox users, waiting for Chromium ones to get same update? Also, maybe there would be a way to handle touch devices behaviour differently, to avoid this problem by not using programmatic .focus()?

Thx in advance for your help!!! :pray:

Your environment

Software Name(s) Version
Radix Package(s) react-slider 1.1.2
React n/a ^16.8 ^17.0 ^18.0
Browser Brave 1.58.127
Node n/a 18.16.0
npm/yarn npm 9.6.7
Operating System Ubuntu 22.04.3 LTS
benoitgrelard commented 8 months ago

Yeah ideally, the browser would give us better low-level control. It's good to see things are moving in this area.