[selectors-4] Rename :focus-ring

[alice]

https://drafts.csswg.org/selectors-4/#the-focusring-pseudo

• The current name causes confusion as authors tend to assume it refers to modifying the style of the default focus ring
• It is also misleading as it seems to imply that the author-provided focus indicator should be a ring, whereas in many cases author-provided focus styles are not

:focus-indicator does not carry this semantic baggage.

Furthermore, the phrase "focus indicator" is used in WCAG guidelines, creating a semantic link between these two notions.

[alice]

A couple of comments on the status quo regarding focus indicators in general:

• Chrome and Firefox and Edge all set focus on click. Safari does not.
• The CSS spec has nothing at all to say about when a focus ring should be drawn.
  • This is WAI - browsers should be able to determine when they wish to show a focus indicator. For example, a browser may wish to expose a user preference to determine when a focus indicator should be shown.
  • This selector will allow styling that case, as opposed to :focus which will (and should continue to) match whenever the element is focused.
• The current behaviour for a <button> element in Chrome and Edge is what we wish to extend to all focusable elements:
  • Clicking sets focus
  • :focus matches, but no focus ring is drawn
• In Chrome, this is effectively a hack: there is a user agent style for :focus which matches and should apparently be applied, but it is hard coded not to show on click.
  • For elements without this special exception, the UA style matches and a focus ring is shown.
• By making :focus-ring the default UA style, we can have all elements get the same focus styling behaviour, and allow authors to match the "browser thinks a focus indicator should be shown" case for custom elements.

[alice]

http://output.jsbin.com/kijafe/1 demonstrates the difference between <button> default focus styling and <div> (or custom element) default focus styling.

[bkardell]

Just wanted to add that Alice and I have been talking about adding this to the agenda since the week before TPAC, I 100% support this. Just to add briefly: The fact that ':focus-ring' isn't necessarily a ring, nor does it necessarily have a 100% standard 'thing' that it does (some people use border, some people use backgrounds, certain things indicate just fine without) has been confusing, in actual practice, for a number of authors and testers I've encountered. In all cases this was resolved by pointing to existing documents explaining that it is really a focus indicator we're interested in.

[FremyCompany]

I have no strong opinion, but since there is a call to rename, I'll add my two cents to the discussion and propose :focus-visible (but do not intend to argue about it, it's just an idea for you to consider)

Or, maybe :focus-shown to be similar to :placeholder-shown.

[AmeliaBR]

What about :focus-needed, to match the Canvas 2D API drawFocusIfNeeded method?

I agree with the criticisms about :focus-ring.

:focus-indicator is rather long and technical, and still sounds like a pseudoelement (styling the focus indicator) rather than a pseudoclass (the state of needing a visible focus indicator).

I don't like :focus-shown because (unlike with :placeholder-shown) this isn't about adjusting for the browser's focus rendering, it's about replacing it. (And depending on the browser and other styling, making sure it's there in the first place.)

I also like the idea that a proper focus indicator (in some form) is needed when this pseudoclass is active. In contrast to the broader :focus pseudoclass, where it would be more of a stylistic choice.

[alice]

I don't like :focus-needed since that seems to refer to the state of "needing focus", rather than "needing a visible focus indicator".

:focus-visible would be a good alternative IMO.

[bkardell]

Matching existing terms in other existing recommendations, documentation and training seems like a big win to me. I don't think that saving 2 characters is a great reason to choose :focus-visible over :focus-indicator if it also comes at the cost of losing that benefit. That said, I will agree that even :focus-visible would be better than :focus-ring. What about :focus-pocus? (yes, I am kidding).

[tabatkins]

In previous discussions with Alice, I objected to :focus-indicator, because it's just a more generic version of the existing term and thus presumably falls to the same confusion about "is this styling the focus ring itself?" - you can still ask "is this styling the focus indicator itself?"

Switching to a state-based name, like :focus-visible, addresses that concern, so 👍 . (It's also slightly simpler to spell, so yay.)

[alice]

It sounds like there is consensus on :focus-visible.

Any objections? I'm happy to send a patch to the spec if not.

cc @robdodson

(edited to remove joking editorialising in case it was misinterpreted. I think it's a good name.)

[bkardell]

I agree it is better than :focus-ring. If the rest of group doesn't buy the rationale provided for why :focus-indicator is actually a term that is both widely used and has adequately cleared up the confusion in IRL use, then I'm fine with :focus-visible.

[alice]

@bkardell does this help?

	Should be read as	May be read as	Other comments
:focus-ring	a pseudo-class which matches an element in a state in which focus should be specially indicated on the element (typically via a "focus ring").	a pseudo-element selector for the focus ring drawn around a focused element	Author provided styles for focus are often not in the form of a ring.
:focus-indicator	:focus-indicator { /* focus indicators added and removed here :^) */ }	a pseudo-element selector for the focus indicator shown on a focused element	Pro: so many other standards and articles already refer to focus indicators. Con: So many syllables, sounds like a robot 🤖.
:focus-visible	a pseudo-class which matches when the browser decides that focus should be visible.	a pseudo-class which matches when the element is both focused and visible. (maybe?)	Pretty weird that it might be used to hide focus.
:focus-shown	a pseudo-class which matches when a focus indicator should be shown. (analogous to :placeholder-shown)	a pseudo-class which matches when a focus ring has been shown. (analogous to :placeholder-shown)
:focus-needed	a pseudo-class which matches when a focus indicator is needed. (analogous to drawFocusIfNeeded())	a pseudo-class which matches when focus is needed on an element.	drawFocusIfNeeded() doesn't use any heuristics other than whether something is focused, so it's more like :focus in that sense
:focus-indicated	a pseudo-class which matches an element in a state in which focus should be specially indicated on the element	¯\_(ツ)_/¯	🤖

Addendum: Names only to be used when joking

• :focus-thing
• :focus-pocus

[bkardell]

@alice To be clear: I am 100% fine with the rationale of the group if the choice is :focus-visible :) One I have seen work and matches existing docs, the other is speculative but seems very good. I will gladly +1 a move to strike :focus-ring which I have witnessed be actively confusing in favor of a speculatively good better name that the group chooses.

[frivoal]

+1 for focus-visible, with focus-shown and :focus-indicated as acceptable second choices.

[css-meeting-bot]

The Working Group just discussed [selectors-4] Rename :focus-ring to :focus-indicator, and agreed to the following resolutions:

• RESOLVED: change the name to :focus-visible

The full IRC log of that discussion

<dael> Topic: [selectors-4] Rename :focus-ring to :focus-indicator
<dael> github: https://github.com//issues/2036
<dael> bk
<dael> bkardell_: I can represent
<dael> bkardell_: :focus-ring is what the mozilla folks used on early prefix impl. When we said we'd adopt we carried the name, but most doc use a different name and it's frequently not a name. In practice the name was confusing. WE proposed focus-indicator which matches most doc, but there were worried that sounded more like a psuedo element
<dael> TabAtkins: once of the obj from Alice to focus-ring is people think it's a pseudo element styling the ring and if that's the confusion then focus-indicator just genericises the noun since we name the thing shown not the quality of the element.
<dael> bkardell_: That's a fair other observation. I think focus-visible is what people on GH seem to have gathered around and there's a standing pull request with that.
<dael> Rossen_: So I guess the current runner is focus-visible
<tantek> I reviewed https://github.com//issues/2036 and :focus-visible makes sense to me per Tab's arguments about noun/thing vs. state of thing
<dael> bkardell_: Yes and there's an outstanding PR so we can just accept that.
<dael> Rossen_: I'm sad focus-focus isn't it, but focus-visible is good.
<fantasai> wfm
<dael> TabAtkins: I'm fine with focus-visible
<dael> Rossen_: Other opinions?
<tantek> s/focus-focus/focus-pocus
<dael> RESOLVED: change the name to :focus-visible