Skip to content

Commit c76952e

Browse files
committed
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.
1 parent 22e821b commit c76952e

File tree

1 file changed

+36
-0
lines changed

1 file changed

+36
-0
lines changed

source

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74349,6 +74349,42 @@ END:VCARD</pre>
7434974349
<pre><code class="html">&lt;div contenteditable autofocus&gt;Edit &lt;strong>me!&lt;/strong>&lt;div></code></pre>
7435074350
</div>
7435174351

74352+
<h4>Focus rings</h4>
74353+
74354+
<p>User agents should use the following heuristics in order to determine when to <dfn>indicate
74355+
focus</dfn>, such as by drawing a focus ring and matching <code>:focus-visible</code>, on the
74356+
currently focused element:</p>
74357+
74358+
<ul>
74359+
<li><p>If the user has expressed a preference (such as via a system preference or a browser
74360+
setting) to always see a visible focus indicator, <span>indicate focus</span> regardless of any
74361+
other factors. (Another option may be for the user agent to show its own focus indicator
74362+
regardless of author styles.)</p></li>
74363+
74364+
<li><p>If the currently focused element supports keyboard input (such as an input element, or any
74365+
other element that would trigger a virtual keyboard to be shown on focus if a physical keyboard
74366+
were not present), <span>indicate focus</span>.</p></li>
74367+
74368+
<li><p>If the user interacts with the page via keyboard or some other non-pointing device,
74369+
<span>indicate focus</span>. (This means keyboard usage may change whether focus ring is drawn
74370+
even if focus isn't affected).</p></li>
74371+
74372+
<li><p>If the user interacts with the page via a pointing device (mouse, touchscreen, etc.) and
74373+
the focused element does not support keyboard input, don't <span>indicate focus</span>.</p></li>
74374+
74375+
<li><p>If a script causes focus to be set:</p>
74376+
74377+
<ol>
74378+
<li><p>If the last time <span>focus update steps</span> have been run <var>focus
74379+
trigger</var> was "<code data-x="">click</code>", don't <span>indicate
74380+
focus</span>.</p></li>
74381+
74382+
<li><p>Otherwise, <span>indicate focus</span>.</p></li>
74383+
</ol>
74384+
74385+
</li>
74386+
</ul>
74387+
7435274388

7435374389

7435474390
<h3>Assigning keyboard shortcuts</h3>

0 commit comments

Comments
 (0)