[field-base] Add support for focus({ focusVisible: true }) to force setting focus-ring

[jouni]

Focus ring on touch devices

<vaadin-text-field autofocus>

The field gets the focus-ring (and focused, judging by the blue label text) state also on touch devices. It should not, as at least iOS prevents autofocus from working at all (it will not focus the field and open the keyboard).

No focus ring when focusing programmatically

textField.focus();

Works differently from autofocus and does not apply the focus-ring state, although it should. You can use the same https://vaadin-login-proto.glitch.me example to see the behavior (click the “Log in” button which moves the focus to the “Username” field).

Since the focus is moved programmatically (vs by the user) we should let the user know visually more prominently where the focus has been moved.

[web-padawan]

Also faced this (second part, regarding programmatic focus) while working on accordion, actually it might make sense to handle this in vaadin-control-state-mixin. I had to duplicate some styles - especially, for accordion panel, I apply the styles to focused state instead of just using focus-ring.

[web-padawan]

The HTML Standard has added a focusVisible option for the focus method, see whatwg/html#8087

button.focus({ focusVisible: true })

I propose to implement the same API in our components overriding focus() method. Renamed the issue accordingly.