-
Notifications
You must be signed in to change notification settings - Fork 0
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
Focus-visible styles for inputs #820
Comments
I'm not sure if it's a good idea to add those focus-visible styles to text inputs. Those styles would be visible to everybody because focus-visible is applied to text inputs on click. It would be the only element that would have a visible outline on click...
I went through storybook to check. I could imagine the focus-visible style working well for those inputs:
However, we don't see to have any custom styles for those input types at all. So I'm not sure if it makes sense to start styling them just to add focus-visible styles. |
Aha, yes that makes sense — inputs are already different to buttons etc for some of the existing states. I like having a focus ring on the current input, from both a usability and aesthetic view, though I realise that’s a personal preference and some projects may not want that. What would you think of going with a good default (whether on or off), and providing a single sass variable to change that? For color, file, and range inputs: yes there are no styles for those yet, since they are rarely used and somewhat more complex to style (this is a situation that changes slowly, so for example file inputs are more styleable than they used to be — perhaps this is something that is worth investigating again). If there’s a straightforward way to apply focus styles to them without having to style the input itself, then I think it’s worth doing so that the focus doesn’t disappear as the user moves through the page |
We have a focus-visible outline defined as a secondary design token in
design-tokens/focus
, which we use for buttons. These same styles should also be applied onfocus-visible
forAnything missing? Include anything else that’s interactive that doesn’t already have a focus-visible outline!
The text was updated successfully, but these errors were encountered: