search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
429 stars 82 forks source link

Set focus-ring when focus() called programmatically #437

Open web-padawan opened 5 years ago

web-padawan commented 5 years ago

Originally part of vaadin/vaadin-text-field#250

Description

No focus ring when focusing programmatically

textField.focus();

It works differently from autofocus and does not apply the focus-ring state, although it should.

Use cases:

  1. vaadin-accordion calls focus() when switching panels using Up and Down arrow keys. For now, I had to duplicate focus-ring styles and apply them to focused attribute too.

  2. vaadin-grid-pro calls focus() when entering edit mode for the cell (which happens on dblclick as well as Tab / Enter / Space keys) and it should be clear that the control is focused. Important for the "boolean" and "select" editor types, as vaadin-checkbox and vaadin-select do not have blinking cursor, and do not apply any styling to focusedattribute (only focus-ring)

web-padawan commented 4 years ago

Original intent from https://github.com/vaadin/vaadin-text-field/issues/250#issue-352503454

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.

@jouni as you submitted the original issue, can you confirm if this is a behaviour we want?

jouni commented 4 years ago

Yes, that’s the desired behavior.

Side note: this also affects Flow keyboard shortcuts (focusing components through server-side code).

web-padawan commented 4 years ago

Note: implemented this in focus-visible-mixin for the next generation components.

Artur- commented 3 years ago

How is this implemented in focus-visible-mixin as the code still refers to && keyboardActive?