Skip to content

Explain focus-visible intent and guidance. #2481

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 3 commits into from
Closed

Explain focus-visible intent and guidance. #2481

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0b1802a
Explain focus-visible intent and guidance.
robdodson Mar 28, 2018
4ed40b8
Delete redundant advisement
robdodson Mar 28, 2018
8562cd2
Update focus-visible guidance to match TAG feedback.
robdodson Apr 16, 2018
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
58 changes: 31 additions & 27 deletions selectors-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2256,20 +2256,9 @@ The Focus-Indicated Pseudo-class: '':focus-visible''</h3>
like clicking on the button with a mouse pointer.
</div>

<div class=advisement>
Page authors should follow these guidelines
Copy link
Member

@dbaron dbaron Apr 7, 2018

Choose a reason for hiding this comment

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

It seems a little disappointing to remove all of the advice for authors. It's not clear to me that the old advice was the best that could be offered, but this does seem like an area where it's worth offering some expert advice on what the right thing really is.

when deciding whether to use '':focus'' or '':focus-visible''
to style the focused state of an element:

* If the element has “native” focus indicator behavior
(such as text fields or buttons),
use '':focus-visible''.
* Otherwise, if the element is emulating a text input,
or something else that is <em>intended</em> to receive keyboard interaction,
use '':focus''.
* Otherwise,
use '':focus-visible''.
</div>
This pseudo-class is intended to give developers the ability to style focus
selectively, in order to encourage visible, usable focus styles, and
Copy link

@triblondon triblondon Apr 7, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

As a developer, personally I find the previous form of words more straightforward and easier to understand. I'm struggling particularly with the word 'selectively'. The purpose of :focus-visible is, as I understand it, to style the focus ring while not overriding the UA's discretion about whether to display it. Therefore this mechanism intentionally doesn't give the developer control over that discretion, whereas I'd interpret 'selectively' in this text as implying that it does.

I'm sorry not to be able to suggest an alternative form of words here but I don't think I have a strong enough understanding of the motivation for the change. Is there a desire to be less opinionated about developer behaviour?

discourage the practice of disabling the default user agent focus style.

When UAs choose to specially indicate focus on an element,
Copy link

@alice alice Apr 7, 2018

Choose a reason for hiding this comment

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

I think this paragraph confuses the issue about the problem we're trying to solve. The problem is the practice of disabling the default UA focus style, mentioned in the previous paragraph.

or whether they specially indicate focus at all,
Expand All @@ -2280,19 +2269,34 @@ The Focus-Indicated Pseudo-class: '':focus-visible''</h3>
but with different user settings,
can make different choices as to when an element matches '':focus-visible''.

<div class=example>
The following guidelines are suggested heuristics
for choosing when to apply '':focus-visible''
to elements without “native” focus indicator behavior:

* If the element received focus via a keyboard interaction,
including indirectly,
such as triggering a dialog
by pressing a button using the keyboard,
apply '':focus-visible''.
* If a keyboard event occurs while an element is focused,
even if the element wasn't focused by a keyboard interaction,
apply '':focus-visible''.
Since part of the problem is user agents' default focus indicator behaviour,
Copy link
Member

@dbaron dbaron Apr 7, 2018

Choose a reason for hiding this comment

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

Please prefer US spelling of behavior.

Copy link
Member

@dbaron dbaron Apr 7, 2018

Choose a reason for hiding this comment

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

I wonder if "the problem" should be spelled out in slightly more words, as well, since it doesn't seem tied to the previous paragraph.

it is recommended that browsers implementing the `:focus-visible`
selector also use it in their user agent stylesheets to show the default focus
Copy link
Member

@dbaron dbaron Apr 7, 2018

Choose a reason for hiding this comment

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

I don't think "show" is quite the right verb here. It's possible it could even be "explain", or perhaps "specify". It might also help to add an additional clarifying sentence saying that the point is that when :focus-visible matches should correspond to the UA's default behavior for when to show focus indicators. In fact, it might be worth stating that as a conformance requirement (and then saying that an easy way to implement that requirement may be by using :focus-visible in the UA style sheet.)

indicator.

<div class=note>
The user agent should take into account the available signals as to whether
the user might find focus indication useful. The result of these heuristics
must determine whether `:focus-visible` should match on the currently
focused element.

By default, if there are no signals indicating that focus should be
indicated, then focus SHOULD NOT be indicated on the focused element, unless
the user has expressed a preference for always seeing a focus ring.

The following may be considered signals:

* An element which requires the use of a keyboard, such as a text input,
SHOULD always have a visible focus indicator.
* If a user is using keyboard-based navigation by using the tab and arrow
keys, the focused element SHOULD be indicated.
* If a user is interacting with an element via the keyboard (such as
incrementing or decrementing using the arrow keys, or using the spacebar to
activate a button) the focused element SHOULD be indicated.
* Note that keyboard interaction may trigger focus to be moved
programmatically, and this may be considered an extension of the original
keyboard interaction.

</div>

<h3 id="the-focus-within-pseudo">
Expand Down