[selectors-4] Remove confusion about whether focus-rings and :focus-visible should coincide or not. #5893 #5885

Author: tabatkins

selectors-4/Overview.bs

@@ -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,
@@ -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>