Re: [csswg-drafts] [css-ui] outline is not visible when moving focus programmatically (#4421)

On the CSS side, there are two features related to your request:

1. If you want to trigger the appearance of the browser's default focus ring, use `outline-style: auto` (or `outline: auto`). But, this sets the appearance any time the rule applies.  If you wanted to recreate the browsers keyboard-only focus logic for your scripted focus control, you'd need to use your own code to decide when to apply this CSS rule or not, e.g. by adding a custom class in addition to setting focus.

2. If you want to apply a custom appearance focus ring that only shows up when the browser's default focus indicator would show, use the new [`:focus-visible` pseudoclass]( It matches only for focus states where the browser would show an indicator, allowing you to change the keyboard focus style without applying the same style for *all* focus states.

CSS doesn't define when the focus ring should be visible: it only exposes the browser's default focus behavior as pseudoclasses. And you're right, the browsers don't have the same nuance for scripted focus control.  I agree that's a limitation, but I don't think adding more CSS focus pseudoclasses would help.

There are two solutions I can see: either the browsers get smarter about paying attention to which event preceded the `focus()` method call (and using that to decide if `:focus-visible` applies) or they let authors handle it with a DOM method option. The problem with letting authors handle it is that there is a history of web developers hiding the focus ring even when it is necessary. At the very least, the default should be to show the focus outline for scripted focus & the option should be to say it isn't necessary.

GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at using your GitHub account

Received on Tuesday, 15 October 2019 20:24:20 UTC