Add section about when to draw or not a focus ring

This section describes a set of heuristics to determine
if the currently focused element should have or not a focus ring.

Author: mrego

source

@@ -74349,6 +74349,42 @@ END:VCARD</pre>
    <pre><code class="html">&lt;div contenteditable autofocus&gt;Edit &lt;strong>me!&lt;/strong>&lt;div></code></pre>
   </div>
 
+  <h4>Focus rings</h4>
+
+  <p>User agents should <dfn>indicate focus</dfn>, such as by drawing a focus ring and matching
+  <code>:focus-visible</code>, on the currently focused element in the following situations:</p>
+
+  <ul>
+   <li><p>If the user has expressed a preference (such as via a system preference or a browser
+   setting) to always see a visible focus indicator. (Another option may be for the user agent to
+   show its own focus indicator regardless of author styles.)</p></li>
+
+   <li>
+     <p>If the currently focused element is a <i>text control</i>, an <span>editing host</span> or
+     an <span>editable</span> element.</p>
+
+     <p>For the purpose of this point, a <i>text control</i> is a <code>textarea</code> element or
+     an <code>input</code> element whose <code data-x="attr-input-type">type</code> attribute is in
+     one of the
+      <span data-x="attr-input-type-email">Email</span>,
+      <span data-x="attr-input-type-password">Password</span>,
+      <span data-x="attr-input-type-search">Search</span>,
+      <span data-x="attr-input-type-text">Text</span>, or
+      <span data-x="attr-input-type-url">URL</span>
+      states.</p>
+
+     <p>The user agent may draw a focus ring in other elements.</p>
+   </li>
+
+   <li><p>If the user interacts with the page via keyboard or some other non-pointing device,
+   <span>indicate focus</span>. (This means keyboard usage may change whether the focus ring is
+   drawn even if focus isn't affected).</p></li>
+
+   <li><p>If a script caused focus to be set, and the previous time the <span>focus update
+   steps</span> have been run <var>focus trigger</var> was not "<code
+   data-x="">click</code>".</p></li>
+  </ul>
+
 
 
   <h3>Assigning keyboard shortcuts</h3>