Skip to content

Commit

Permalink
[selectors-4] Remove confusion about whether focus-rings and :focus-v…
Browse files Browse the repository at this point in the history
…isible should coincide or not. #5893 #5885
  • Loading branch information
tabatkins committed Feb 18, 2021
1 parent 3673fec commit 7ec6c08
Showing 1 changed file with 46 additions and 46 deletions.
92 changes: 46 additions & 46 deletions selectors-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -2254,16 +2254,15 @@ The Input Focus Pseudo-class: '':focus''</h3>
<h3 id="the-focus-visible-pseudo" oldids="the-focusring-pseudo,focus-ring-pseudo">
The Focus-Indicated Pseudo-class: '':focus-visible''</h3>

The <dfn id='focus-visible-pseudo'>:focus-visible</dfn> pseudo-class applies
while an element matches the '':focus'' pseudo-class
<em>and</em> the user agent determines via heuristics
that the focus should be made evident on the element.


Note: The intent of '':focus-visible'' is
to allow authors to provide <em>clearly identifiable</em> focus styles
which are visible when a user is likely to need to understand where focus is,
and not visible in other cases.
While the '':focus'' [=pseudo-class=] always matches the currently-focused element,
UAs only sometimes visibly <dfn>indicate focus</dfn>
(such as by drawing a “focus ring”),
instead using a variety of heuristics
to visibly indicate the focus only when it would be most helpful to the user.
The <dfn id="focus-visible-pseudo">:focus-visible</dfn> [=pseudo-class=] matches a focused element
in these situations only,
allowing authors to change the appearance of the focus indicator
without changing <em>when</em> a focus indicator appears.

<div class="example">
In this example,
Expand All @@ -2289,42 +2288,43 @@ The Focus-Indicated Pseudo-class: '':focus-visible''</h3>
</pre>
</div>

User agents can choose their own heuristics for when to match '':focus-visible'';
however, the following (non-normative) suggestions can be used as a starting point:

* If a user has expressed a preference
(such as via a system preference or a browser setting)
to always see a visible focus indicator,
the user agent should honor this
by having '':focus-visible'' always match on the active element,
regardless of any other factors.
(Another option may be for the user agent to show its own focus indicator
regardless of author styles.)
* Any element which supports keyboard input
(such as an <{input}> element,
or any other element
which may trigger a virtual keyboard to be shown on focus
if a physical keyboard is not present)
should <strong>always</strong> match '':focus-visible'' when focused.
* If the user interacts with the page via the keyboard,
the currently focused element should match '':focus-visible''
(i.e. keyboard usage may change whether this pseudo-class matches
even if it doesn't affect '':focus'').
* If the user interacts with the page via a pointing device,
such that the focus is moved to a new element
which does <em>not</em> support user input,
the newly focused element
should <strong>not</strong> match '':focus-visible''.
* If the active element matches '':focus-visible'',
and a script causes focus to move elsewhere,
the newly focused element should match '':focus-visible''.
* Conversely, if the active element does not match '':focus-visible'',
and a script causes focus to move elsewhere,
the newly focused element should <strong>not</strong> match '':focus-visible''.

User agents should also use '':focus-visible'' to specify the default focus style,
so that authors using '':focus-visible'' will not also need to disable
the default '':focus'' style.
<div class=example>
User agents can choose their own heuristics for when to [=indicate focus=];
however, the following (non-normative) suggestions can be used as a starting point
for when to [=indicate focus=] on the currently focused element:

* If the user has expressed a preference
(such as via a system preference or a browser setting)
to always see a visible focus indicator,
[=indicate focus=]
regardless of any other factors.
(Another option may be for the user agent to show its own focus indicator
regardless of author styles.)
* If the element which supports keyboard input
(such as an <{input}> element,
or any other element
that would triggers a virtual keyboard to be shown on focus
if a physical keyboard were not present),
[=indicate focus=].
* If the user interacts with the page via keyboard or some other non-pointing device,
[=indicate focus=].
(This means keyboard usage may change whether this pseudo-class matches
even if it doesn't affect '':focus'').
* If the user interacts with the page via a pointing device (mouse, touchscreen, etc.)
and the focused element does not support keyboard input,
don't [=indicate focus=].
* If the previously-focused element [=indicated focus=],
and a script causes focus to move elsewhere,
the newly focused element should [=indicate focus=].

Conversely, if the previously-focused element did not [=indicate focus=],
and a script causes focus to move elsewhere,
the newly focused element should also not [=indicate focus=].
</div>

User agents should also use '':focus-visible'' to specify the default focus style,
so that authors using '':focus-visible'' will not also need to disable
the default '':focus'' style.

<h3 id="the-focus-within-pseudo">
The Focus Container Pseudo-class: '':focus-within''</h3>
Expand Down

0 comments on commit 7ec6c08

Please sign in to comment.