W3C home > Mailing lists > Public > public-css-archive@w3.org > October 2019

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

From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
Date: Tue, 15 Oct 2019 20:24:18 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-542388811-1571171057-sysbot+gh@w3.org>
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](https://drafts.csswg.org/selectors-4/#focus-visible-pseudo). 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 https://github.com/w3c/csswg-drafts/issues/4421#issuecomment-542388811 using your GitHub account
Received on Tuesday, 15 October 2019 20:24:20 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:54 UTC