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 Mar 23, 2021
1 parent 22e821b commit c76952e
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 use the following heuristics in order to determine when to <dfn>indicate
focus</dfn>, such as by drawing a focus ring and matching <code>:focus-visible</code>, on the
currently focused element:</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, <span>indicate focus</span> regardless of any
other factors. (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 supports keyboard input (such as an input element, or any
other element that would trigger a virtual keyboard to be shown on focus if a physical keyboard
were not present), <span>indicate focus</span>.</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 focus ring is drawn
even if focus isn't affected).</p></li>

<li><p>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 <span>indicate focus</span>.</p></li>

<li><p>If a script causes focus to be set:</p>

<ol>
<li><p>If the last time <span>focus update steps</span> have been run <var>focus
trigger</var> was "<code data-x="">click</code>", don't <span>indicate
focus</span>.</p></li>

<li><p>Otherwise, <span>indicate focus</span>.</p></li>
</ol>

</li>
</ul>



<h3>Assigning keyboard shortcuts</h3>
Expand Down

0 comments on commit c76952e

Please sign in to comment.