Skip to content

Add :focus-visible recommendation for tabindex/appearance. #2407

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Add :focus-visible recommendation for tabindex/appearance. #2407

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions selectors-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2295,6 +2295,30 @@ The Focus-Indicated Pseudo-class: '':focus-visible''</h3>
apply '':focus-visible''.
</div>

<div class="note">
Note: It is a common practice by UAs to always draw a focus indicator on any
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would replace this with a note about UA stylesheets and :focus as the usual mechanism for showing a focus ring, except in a few cases concerning elements which have their default appearance and exhibit something like the behaviour :focus-visible should emulate.

Then, follow up with a comment about the eventual goal being to recommend UAs use :focus-visible in place of :focus so that the default behaviour will be more nuanced.

element with a <pre>tabindex</pre> attribute, or any element whose
''appearance'' has been altered. However, it is recommended that
'':focus-visible'' should only be applied to these elements if they receive
focus via a keyboard interaction.

<a
href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element">Custom
Elements</a>, for example, will always need to apply a <pre>tabindex</pre>
attribute to be keyboard operable, but the mere presence of a
<pre>tabindex</pre> attribute is not a strong enough signal to indicate that
the element should always display a focus indicator.

Similarly, applying a style to an element which modifies its ''appearance''
is not a strong enough signal to indicate that the element should always
display a focus indicator. It is not uncommon for page authors to style
<pre>button</pre> elements such that their ''appearance'' is modified. This
causes some UAs to start drawing a focus indicator on these elements,
regardless of the user's input modality. Surprised by this new behavior,
page authors commonly "correct" the system by adding a '':focus''
style to disable the ''outline'' entirely.
</div>

<h3 id="the-focus-within-pseudo">
The Focus Container Pseudo-class: '':focus-within''</h3>

Expand Down