Add sufficient technique for 2.4.7 using :focus-visible

[patrickhlauke]

Two years late, but: here's the technique I intended to write for #301 (comment)

(but a recent lengthy discussion on mailing list reminded me that back in #301 the WG had indeed agreed this interpretation)

Preview of new techinque

[cstrobbe]

<p>There may be situations where mouse/pointer users could also benefit from having a visible focus indication, even though they did not set focus to an element using the keyboard. As a best practice, consider still providing an explicit <code class="language-css">:focus</code> style for these cases.</p>

1. Did you mean :hover instead of :focus? If not, does "not set focus ... using the keyboard" refer to script-triggered focus?
2. In the second sentence, do you mean a single style rule that covers both :focus-visible and :focus or separate styles for both pseudo-classes. (If you define e.g. both a:focus { outline: 2px dotted blue;} and a:focus-visible { outline: 2px dashed green; }, the rule that is triggered by keyboard focus is whichever of these rules comes after the other in your stylesheet.)

[patrickhlauke]

1. Did you mean :hover instead of :focus? If not, does "not set focus ... using the keyboard" refer to script-triggered focus?

No, i meant :focus, and by "not set focus ... using the keyboard" I mean both script-triggered focus, but also ... as a result of clicking a control using a mouse/touch/stylus (i.e. what :focus-visible by default doesn't apply to, as explained in the prose)

This is in the context of the lengthy discussion in wai-ig discussing how mouse users also benefit from seeing where focus is, and why :focus-visible should never be used... (a rather opinionated take, of course)

2. In the second sentence, do you mean a single style rule that covers both :focus-visible and :focus or separate styles for both pseudo-classes. (If you define e.g. both a:focus { outline: 2px dotted blue;} and a:focus-visible { outline: 2px dashed green; }, the rule that is triggered by keyboard focus is whichever of these rules comes after the other in your stylesheet.)

I leave this up to the reader. but yes, one approach would be to provide a (maybe slightly more subtle) :focus style in general, and then a much more visible/stronger :focus-visible specifically for keyboard users

[bruce-usab]

Discussed on TF call 4/12 but not advanced. @gundulaniemann might you review?

[bruce-usab]

Discussed on call 4/26 and Ready for approval. We need to doublecheck the file name (technique number). At present, there are 43. See Listing of all CCS techniques and techniques/css file listing in the repo.

[gundulaniemann]

There may be situations where mouse/pointer users could also benefit from having a visible focus indication, even though they did not set focus to an element using the keyboard. As a best practice, consider still providing an explicit :focus style for these cases.

I suggest to drop the word 'could', as mouse/pointer users definitely benefit from seeing the focus indicator once they set the focus to a specific element.

Is the text supposed to contain placeholders?
The metadata box does not seem to be complete.
The Example is numbered as 'X'.
The links to related techniques point to a location with "patrickhlauke-focus-visible-technique" in it and yield a 404 error

(I reviewed the preview and the file changes manually, yet I do not find the way how to handle that in github.)

[patrickhlauke]

mouse/pointer users definitely benefit from seeing the focus indicator once they set the focus to a specific element

there are scenarios where forcing a visible focus indicator gets visually confusing, such as controls/buttons that trigger an immediate action. that's the whole reason why we fought for, and got, :focus-visible in the first place (things like carousel left/right buttons, where after clicking with a mouse you don't want to have that one button visually highlighted, but you do want to provide a strong highlight when navigating with the keyboard)