Skip to content
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

Open
planktonic opened this issue May 29, 2024 · 2 comments · May be fixed by #827
Open

Focus-visible styles for inputs #820

planktonic opened this issue May 29, 2024 · 2 comments · May be fixed by #827
Assignees

Comments

@planktonic
Copy link
Member

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 on focus-visible for

  • selects
  • text inputs
  • checkboxes
  • radios

Anything missing? Include anything else that’s interactive that doesn’t already have a focus-visible outline!

@angelikatyborska
Copy link
Contributor

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...

Anything missing?

I went through storybook to check. I could imagine the focus-visible style working well for those inputs:

  • color input
  • file input
  • range input

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.

@planktonic
Copy link
Member Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants