spectrum-web-components
spectrum-web-components copied to clipboard
adobe
[Feat]: Provide a CSS Custom Property to manage `user-select` on interactive elements
Code of conduct
- [X] I agree to follow this project's code of conduct.
Impacted component(s)
many: switch, button, icon, radio...
Description of the requested feature
Selecting text in interactive, non-textual components can provide a sub-par user experience when compared to native applications. Users don't typically expect that native:
switches, buttons, menu items, icons, radio buttons, ...etc
...will be highlighted as text nodes during drag-and-drop operations or other normal pointer usage. This is a frequent source of accidental selection:
While keeping traditional browser-like user-select behavior of inputs by default, we should allow consumers to override this choice in a single place via a CSS custom property (eg, spectrum-form-user-select: none, or similar)
Mockups or screenshots
No response
Implementation notes or ideas
No response
IMO the harm described in that tweet comes from the html { ... } part rather than the user-select: none part.
A control like a toggle switch, for instance, becomes more accessible when a user can rely on toggling it (its purpose) instead of selecting text nodes in it via an imperfect (>0px movement) click.