From 6302d769ea40f48467eca9a9b5b4278aa09b82c0 Mon Sep 17 00:00:00 2001 From: Rob Dodson Date: Mon, 7 Nov 2016 15:39:15 -0800 Subject: [PATCH 1/2] Add :focusring selector --- selectors/Overview.bs | 48 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/selectors/Overview.bs b/selectors/Overview.bs index 0bb2549fc2f..c1242cb3628 100644 --- a/selectors/Overview.bs +++ b/selectors/Overview.bs @@ -280,6 +280,11 @@ Selectors Overview an E element that has user input focus [[#useraction-pseudos]] 2 + + E:focusring + an E element where the element is currently focused and a focus ring or other indicator should be drawn for that element + [[#useraction-pseudos]] + 4 E:drop an E element that can possibly receive a drop @@ -2031,6 +2036,49 @@ The Input Focus Pseudo-class: '':focus'' the same ways must apply to elements matching '':focus'' as well, except that the parent of an element that matches '':focus'' must not match '':focus''. +

+The Input Focusring Pseudo-class: '':focusring''

+ + The :focusring pseudo-class is similar to the + :focus pseudo-class, but it only matches an element if the element is + currently focused and a focus ring or other indicator should be drawn for that + element. If :focusring matches, then :focus also matches, but the converse is + not always true - it depends on whether the user agent has focus ring drawing + enabled and how the element was focused. Whether the user agent has focus ring + drawing enabled can depend on things like the settings of the operating system + the user is using, so the precise behavior of this pseudo-class can vary from + platform to platform depending on each platform's particular focus best + practices (defaults) or user modified settings. + +
+ For example, most UAs choose to display focus rings on native text fields + whenever they are focused, and on native buttons only when selected via + the keyboard. +
+ + This section is non-normative, and is meant to help clarify when a + :focusring selector might match. + + A user agent might choose to use the following heuristic for deciding when to + match '':focusring'' on focused elements which do not have any native focus + ring behaviour defined: + + When focusing an element: + * if the element received focus via a keyboard interaction, including + indirectly such as triggering a dialog via pressing a button using the + keyboard, apply '':focusring''. + + When handling a keyboard event: + * if a non-native element is focused, even if it did not become focused via + the keyboard, apply '':focusring'' to that element. + +
+ Authors who build non-native interactive elements that are text-field + like in nature should consider adding a '':focus'' rule to that element to + ensure a focusring is displayed whenever focussed, rather than only when the + heuristic matches. +
+

The Generalized Input Focus Pseudo-class: '':focus-within''

From ba00a85f08b9228cfbbf329ff2c850dc23c103a6 Mon Sep 17 00:00:00 2001 From: Tab Atkins Jr Date: Tue, 22 Nov 2016 12:51:17 -0800 Subject: [PATCH 2/2] Rewrite to make the normative parts a little clearer, and rearrange the non-normatives into advisements and examples. --- selectors/Overview.bs | 111 +++++++++++++++++++++++++----------------- 1 file changed, 66 insertions(+), 45 deletions(-) diff --git a/selectors/Overview.bs b/selectors/Overview.bs index c1242cb3628..124112fb3bc 100644 --- a/selectors/Overview.bs +++ b/selectors/Overview.bs @@ -272,7 +272,7 @@ Selectors Overview E:hover an E element that is under the cursor, - or that has a descendant under the cursor + or that has a descendant under the cursor [[#useraction-pseudos]] 2 @@ -281,8 +281,10 @@ Selectors Overview [[#useraction-pseudos]] 2 - E:focusring - an E element where the element is currently focused and a focus ring or other indicator should be drawn for that element + E:focus-ring + an E element that has user input focus, + and the UA has determined that a focus ring or other indicator + should be drawn for that element [[#useraction-pseudos]] 4 @@ -2024,9 +2026,9 @@ The Activation Pseudo-class: '':active''

The Input Focus Pseudo-class: '':focus''

- The :focus pseudo-class applies while an element - has the focus (accepts keyboard or mouse events, or other forms of - input). + The :focus pseudo-class applies + while an element has the focus + (accepts keyboard or mouse events, or other forms of input). There may be document language or implementation specific limits on which elements can acquire '':focus''. @@ -2037,46 +2039,65 @@ The Input Focus Pseudo-class: '':focus'' except that the parent of an element that matches '':focus'' must not match '':focus''.

-The Input Focusring Pseudo-class: '':focusring''

- - The :focusring pseudo-class is similar to the - :focus pseudo-class, but it only matches an element if the element is - currently focused and a focus ring or other indicator should be drawn for that - element. If :focusring matches, then :focus also matches, but the converse is - not always true - it depends on whether the user agent has focus ring drawing - enabled and how the element was focused. Whether the user agent has focus ring - drawing enabled can depend on things like the settings of the operating system - the user is using, so the precise behavior of this pseudo-class can vary from - platform to platform depending on each platform's particular focus best - practices (defaults) or user modified settings. - -
- For example, most UAs choose to display focus rings on native text fields - whenever they are focused, and on native buttons only when selected via - the keyboard. +The Input Focus-Ring Pseudo-class: '':focus-ring'' + + The :focus-ring pseudo-class applies + while an element matches the '':focus'' pseudo-class, + and the UA determines via heuristics + that the focus should be specially indicated on the element + (typically via a "focus ring"). + +
+ For example, UAs typically display focus indicators on text elements + whenever they're focused, + to draw attention to the fact that keyboard input will affect their contents. + + On the other hand, they typically only display focus indicators on buttons + when they were focused by a keyboard interaction + (such as tabbing thru the document), + because it's not always immediately obvious where the focus will move + after such an interaction, + but not when they were focused by more "obvious" interactions, + like clicking on the button with a mouse pointer.
- - This section is non-normative, and is meant to help clarify when a - :focusring selector might match. - - A user agent might choose to use the following heuristic for deciding when to - match '':focusring'' on focused elements which do not have any native focus - ring behaviour defined: - - When focusing an element: - * if the element received focus via a keyboard interaction, including - indirectly such as triggering a dialog via pressing a button using the - keyboard, apply '':focusring''. - - When handling a keyboard event: - * if a non-native element is focused, even if it did not become focused via - the keyboard, apply '':focusring'' to that element. - -
- Authors who build non-native interactive elements that are text-field - like in nature should consider adding a '':focus'' rule to that element to - ensure a focusring is displayed whenever focussed, rather than only when the - heuristic matches. + +
+ Page authors should follow these guidelines + when deciding whether to use '':focus'' or '':focus-ring'' + to style the focused state of an element: + + * If the element has "native" focus indicator behavior + (such as text fields or buttons), + use '':focus-ring''. + * Otherwise, if the element is emulating a text input, + or something else that is intended to receive keyboard interaction, + use '':focus''. + * Otherwise, + use '':focus-ring''. +
+ + When UAs choose to specially indicate focus on an element, + or whether they specially indicate focus at all, + is UA-dependent. + Different UAs, + the same UA on different operating systems, + or the same UA on the same OS, + but with different user settings, + can make different choices as to when an element matches '':focus-ring''. + +
+ The following guidelines are suggested heuristics + for choosing when to apply '':focus-ring'' + to elements without "native" focus ring 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-ring''. + * If a keyboard event occurs while an element is focused, + even if the element wasn't focused by a keyboard interaction, + apply '':focus-ring''.