Skip to content

Commit

Permalink
Add section about when to draw or not a focus ring
Browse files Browse the repository at this point in the history
This section describes a set of heuristics to determine
if the currently focused element should have or not a focus ring.
  • Loading branch information
mrego committed Apr 7, 2021
1 parent 22e821b commit a46a1ed
Showing 1 changed file with 36 additions and 0 deletions.
36 changes: 36 additions & 0 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit a46a1ed

Please sign in to comment.