[selectors] Suggestion for :focus-ring pseudoclass

I'm currently in discussion with Alice Boxhall and Brian Kardell about
their input modalities proposal (which we discussed at the f2f), but
one thing that came out of the discussion which seemed independently
relevant is the ability to directly style the "focus ring" state.

By "focus ring" state, I mean the subset of :focus that, in the
absence of any overriding author styles, triggers a UA focus ring.
This currently happens any time a text input or [tabindex > 0] element
is focused, and when a button is *keyboard* focused (but not when it's
clicked).

Mozilla has something approximately equivalent today, with
:-moz-focusring
<https://developer.mozilla.org/en-US/docs/Web/CSS/%3A-moz-focusring>.
(The only difference is that it doesn't match anything if "focus ring
drawing" is turned off.)

The main benefit of such a thing is that, today, if the default UA
focus ring style does not work well with your site's theme, you're
kinda screwed.  You can manually write a :focus rule, but you can't
predict when an element would have a focus ring drawn; you'll
unfortunately start drawing focus rings when the user mouse-clicks a
button.  Using :focus-ring instead does the right thing automatically,
triggering your styles only when the UA determines via heuristics that
it should draw a focus ring.

(Those heuristics might not always be right, and that's part of my
continuing conversation with Alice and Brian, but that's separable
from this topic.)

Thoughts?

~TJ

Received on Tuesday, 22 September 2015 22:22:11 UTC