@@ -2254,16 +2254,15 @@ The Input Focus Pseudo-class: '':focus''</h3>
22542254<h3 id="the-focus-visible-pseudo" oldids="the-focusring-pseudo,focus-ring-pseudo">
22552255The Focus-Indicated Pseudo-class: '':focus-visible''</h3>
22562256
2257- The <dfn id='focus-visible-pseudo'>:focus-visible</dfn> pseudo-class applies
2258- while an element matches the '':focus'' pseudo-class
2259- <em> and</em> the user agent determines via heuristics
2260- that the focus should be made evident on the element.
2261-
2262-
2263- Note: The intent of '':focus-visible'' is
2264- to allow authors to provide <em> clearly identifiable</em> focus styles
2265- which are visible when a user is likely to need to understand where focus is,
2266- and not visible in other cases.
2257+ While the '':focus'' [=pseudo-class=] always matches the currently-focused element,
2258+ UAs only sometimes visibly <dfn>indicate focus</dfn>
2259+ (such as by drawing a “focus ring”),
2260+ instead using a variety of heuristics
2261+ to visibly indicate the focus only when it would be most helpful to the user.
2262+ The <dfn id="focus-visible-pseudo">:focus-visible</dfn> [=pseudo-class=] matches a focused element
2263+ in these situations only,
2264+ allowing authors to change the appearance of the focus indicator
2265+ without changing <em> when</em> a focus indicator appears.
22672266
22682267 <div class="example">
22692268 In this example,
@@ -2289,42 +2288,43 @@ The Focus-Indicated Pseudo-class: '':focus-visible''</h3>
22892288 </pre>
22902289 </div>
22912290
2292- User agents can choose their own heuristics for when to match '':focus-visible'' ;
2293- however, the following (non-normative) suggestions can be used as a starting point:
2294-
2295- * If a user has expressed a preference
2296- (such as via a system preference or a browser setting)
2297- to always see a visible focus indicator,
2298- the user agent should honor this
2299- by having '':focus-visible'' always match on the active element,
2300- regardless of any other factors.
2301- (Another option may be for the user agent to show its own focus indicator
2302- regardless of author styles.)
2303- * Any element which supports keyboard input
2304- (such as an <{input}> element,
2305- or any other element
2306- which may trigger a virtual keyboard to be shown on focus
2307- if a physical keyboard is not present)
2308- should <strong> always</strong> match '':focus-visible'' when focused.
2309- * If the user interacts with the page via the keyboard,
2310- the currently focused element should match '':focus-visible''
2311- (i.e. keyboard usage may change whether this pseudo-class matches
2312- even if it doesn't affect '':focus'' ).
2313- * If the user interacts with the page via a pointing device,
2314- such that the focus is moved to a new element
2315- which does <em> not</em> support user input,
2316- the newly focused element
2317- should <strong> not</strong> match '':focus-visible'' .
2318- * If the active element matches '':focus-visible'' ,
2319- and a script causes focus to move elsewhere,
2320- the newly focused element should match '':focus-visible'' .
2321- * Conversely, if the active element does not match '':focus-visible'' ,
2322- and a script causes focus to move elsewhere,
2323- the newly focused element should <strong> not</strong> match '':focus-visible'' .
2324-
2325- User agents should also use '':focus-visible'' to specify the default focus style,
2326- so that authors using '':focus-visible'' will not also need to disable
2327- the default '':focus'' style.
2291+ <div class=example>
2292+ User agents can choose their own heuristics for when to [=indicate focus=] ;
2293+ however, the following (non-normative) suggestions can be used as a starting point
2294+ for when to [=indicate focus=] on the currently focused element:
2295+
2296+ * If the user has expressed a preference
2297+ (such as via a system preference or a browser setting)
2298+ to always see a visible focus indicator,
2299+ [=indicate focus=]
2300+ regardless of any other factors.
2301+ (Another option may be for the user agent to show its own focus indicator
2302+ regardless of author styles.)
2303+ * If the element which supports keyboard input
2304+ (such as an <{input}> element,
2305+ or any other element
2306+ that would triggers a virtual keyboard to be shown on focus
2307+ if a physical keyboard were not present),
2308+ [=indicate focus=] .
2309+ * If the user interacts with the page via keyboard or some other non-pointing device,
2310+ [=indicate focus=] .
2311+ (This means keyboard usage may change whether this pseudo-class matches
2312+ even if it doesn't affect '':focus'' ).
2313+ * If the user interacts with the page via a pointing device (mouse, touchscreen, etc.)
2314+ and the focused element does not support keyboard input,
2315+ don't [=indicate focus=] .
2316+ * If the previously-focused element [=indicated focus=] ,
2317+ and a script causes focus to move elsewhere,
2318+ the newly focused element should [=indicate focus=] .
2319+
2320+ Conversely, if the previously-focused element did not [=indicate focus=] ,
2321+ and a script causes focus to move elsewhere,
2322+ the newly focused element should also not [=indicate focus=] .
2323+ </div>
2324+
2325+ User agents should also use '':focus-visible'' to specify the default focus style,
2326+ so that authors using '':focus-visible'' will not also need to disable
2327+ the default '':focus'' style.
23282328
23292329<h3 id="the-focus-within-pseudo">
23302330The Focus Container Pseudo-class: '':focus-within''</h3>
0 commit comments