Wrong behaviour according to CSS editor drafts? about focus-visible HOT 7 CLOSED

I'm not sure I understand the issue :)

Are you saying that the polyfill is applying focus-ring when you click on a link or button with a mouse? Can you provide a reproducible test case that demonstrates the problem?

from focus-visible.

The polyfill is only applying the style to input / editable fields and only if you use key press like tab to get there.

However, according to documentation it should apply focus-ring always to editable content, even in case of mouse click.
The polyfill doesn't apply focus ring in case of mouse clicks here but it should.

On the other hand, it should instead apply focus-ring to all other elements on focus only when using key press and not mouse clicks. However, the polyfill doesn't apply focus-ring to any other elements at all currently.

See:
https://github.com/WICG/focus-ring/blob/master/src/focus-ring.js#L97
and
https://github.com/WICG/focus-ring/blob/master/src/focus-ring.js#L30

It therefore only adds the focus-ring class to editable content and only in case of a keypress.

Also check example 34 of the linked documentation

For example, UAs typically display focus indicators on text elements whenever they’re focused, to draw attention to the fact that keyboard input will affect their contents.
On the other hand, they typically only display focus indicators on buttons when they were focused by a keyboard interaction (such as tabbing through the document), because it’s not always immediately obvious where the focus will move after such an interaction, but not when they were focused by more "obvious" interactions, like clicking on the button with a mouse pointer.

I could, of course, be wrong with the defintion of focus-ring but not according to the example but maybe that is just a misinterpretation on my part?

from focus-visible.

OK thanks I'll look into this. There were some recent changes which seemed to have broken some things. I'm working on a new selenium test runner to better catch these issues.

from focus-visible.

OK. I just checked the latest version again and it seems to work correctly now. Maybe I was testing a buggy version before?

from focus-visible.

Ah sorry, it was working with 2.0.2 but not with master there it is broken

from focus-visible.

ok good to know :)

from focus-visible.

See also this jsfiddles:
broken: https://jsfiddle.net/yayrqksu/3/ (copied master dist into script)
working: https://jsfiddle.net/yayrqksu/2/ (copied 2.0.2 dist into script)

One small issue I noticed with v2.0.2 if you tab through both fields and then do another tab to go outside the textfield and then click on the button, the button still receives the focus-ring class but otherwise v2.0.2 seems to work correctly.

from focus-visible.