Focus-visible styles for inputs

[planktonic]

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]

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]

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