From 1ab7c860732d8a1c144ebb86bd08c90f1be7b958 Mon Sep 17 00:00:00 2001 From: Rakina Zata Amni Date: Tue, 16 Jul 2019 11:39:59 +0900 Subject: [PATCH] Define different types of focusability Define "focusable" more concretely, and as part of it, define special types of focusability: click focusable and sequentially focusable. As part of this, remove the "tabindex focus flag" because it can be replaced with "focusable" and "focusable area", and was very confusing. Part of #4607. Helps provide a basis for further work on #2013, but does not directly contribute to any shadow DOM upstreaming. This does not introduce any normative changes, but instead brings into the spec behavior that was previously only in implementations, and makes certain concepts explicit. --- source | 272 ++++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 183 insertions(+), 89 deletions(-) diff --git a/source b/source index b64fbfbc5df..ae3cd2248f3 100644 --- a/source +++ b/source @@ -65234,9 +65234,9 @@ function AddCloud(data, x, y) { ... }
Best practices
-

When a canvas is interactive, authors should include focusable elements in the element's - fallback content corresponding to each focusable part of the canvas, as in the example above.

+

When a canvas is interactive, authors should include focusable elements in the + element's fallback content corresponding to each focusable part of the canvas, as in + the example above.

When rendering focus rings, to ensure that focus rings have the appearance of native focus rings, authors should use the tabindex attribute would make the taco-button interactive content, thus making it - focusable. Note that if the + focusable. Note that if the taco-button were to become logically disabled, the tabindex attribute would need to be removed.

@@ -68727,10 +68727,10 @@ contradict people? disabled -

This definition is used to determine what elements can be focused and which elements match the :enabled and :disabled - pseudo-classes.

+

This definition is used to determine what elements are focusable and + which elements match the :enabled and + :disabled pseudo + classes.

@@ -68943,7 +68943,7 @@ contradict people? data-x="attr-hyperlink-href">href attribute
If the element is a link element that has an href attribute
-
If the element has its tabindex focus flag set
+
If the element is focusable

The element is being activated if it is in a formal activation state.

@@ -73446,12 +73446,23 @@ END:VCARD - Elements that have their tabindex focus flag set, that are not a shadow - host or whose shadow root's - delegates focus is false, that are not actually disabled, that are not expressly - inert, and that are either being rendered or being used as relevant - canvas fallback content. + Elements that meet all the following criteria: + + The element itself. @@ -73527,17 +73538,17 @@ END:VCARD - Any other element or part of an element, especially to aid with accessibility or to better - match platform conventions. + Any other element or part of an element determined by the user agent to be a focusable area, + especially to aid with accessibility or to better match platform conventions. The element. -

A user agent could make all list item bullets focusable, so that a user can - more easily navigate lists.

+

A user agent could make all list item bullets sequentially + focusable, so that a user can more easily navigate lists.

Similarly, a user agent could make all elements with title attributes focusable, so that their advisory information can - be accessed.

+ data-x="attr-title">title attributes sequentially focusable, so that their + advisory information can be accessed.

@@ -73635,6 +73646,58 @@ END:VCARD +

All elements that are focusable areas are said to be + focusable.

+ +

There are two special types of focusability for focusable + areas:

+ + +

Elements which are not focusable are not focusable areas, and thus not sequentially focusable and not click + focusable.

+ +
+

Being focusable is a statement about whether an element can be focused + programmatically, e.g. via the focus() method or autofocus attribute. In contrast, sequentially + focusable and click focusable govern how the user agent responds to user + interaction: respectively, to sequential focus navigation and as activation behavior.

+ +

The user agent might determine that an element is not sequentially focusable even + if it is focusable and is included in its Document's sequential + focus navigation order, according to user preferences. For example, macOS users can set + the user agent to skip non-form control elements, or can skip links when doing sequential + focus navigation with just the Tab key (as opposed to using both the + Option and Tab keys).

+ +

Similarly, the user agent might determine that an element is not click focusable + even if it is focusable. For example, in some user agents, clicking on a + non-editable form control does not focus it, i.e. the user agent has determined that such + controls are not click focusable.

+ +

Thus, an element can be focusable, but neither sequentially + focusable nor click focusable. For example, in some user agents, a + non-editable form-control with a negative-integer tabindex value would not be + focusable via user interaction, only via programmatic APIs.

+
+ +

If the activation behavior of a click focusable focusable + area is triggered, the user agent must run the focusing steps on the + focusable area's DOM anchor.

+

A node is a focus navigation scope owner if it is a document, a @@ -73684,7 +73747,8 @@ END:VCARD

  • It contains all of the focusable areas whose DOM anchor is an element in owner's focus navigation scope, - except the focusable areas whose tabindex value is a negative integer.

    • + except the focusable areas whose tabindex value + is a negative integer.

    The order within a tabindex-ordered focus navigation scope is determined by each @@ -73724,65 +73788,96 @@ END:VCARD

    The tabindex attribute

    The tabindex content attribute allows authors to - indicate that an element is supposed to be focusable, and - whether it is supposed to be reachable using sequential focus navigation and, if so, - what is to be the relative order of the element for the purposes of sequential focus navigation. - The name "tab index" comes from the common use of the "tab" key to navigate through the focusable - elements. The term "tabbing" refers to moving forward through the focusable elements that can be - reached using sequential focus navigation.

    + make an element and regions that have the element as its DOM anchor be focusable areas, allow or prevent them from being + sequentially focusable, and determine their relative ordering for sequential + focus navigation.

    -

    When the attribute is omitted, the user agent applies defaults. (There is no way to make an - element that is being rendered be not focusable at all without disabling it or making it inert.)

    +

    The name "tab index" comes from the common use of the Tab key to navigate through + the focusable elements. The term "tabbing" refers to moving forward through sequentially + focusable focusable areas.

    The tabindex attribute, if specified, must have a value that is a valid integer. Positive numbers specify the relative position of the element's focusable areas in the sequential focus - navigation order, and negative numbers indicate that the control is to be unreachable by - sequential focus navigation.

    + navigation order, and negative numbers indicate that the control is not + sequentially focusable.

    Developers should use caution when using values other than 0 or −1 for their tabindex attributes as this is complicated to do correctly.

    +
    +

    The following provides a non-normative summary of the behaviors of the + possible tabindex attribute values. The below + processing model gives the more precise rules.

    + +
    +
    omitted (or non-integer values)
    +
    The user agent will decide whether the element is focusable, and if it is, + whether it is sequentially focusable or click focusable (or both).
    + +
    −1 (or other negative integer values)
    +
    Causes the element to be focusable, and indicates that the author would prefer + the element to be click focusable but not sequentially focusable. The + user agent might ignore this preference for click and sequential focusability, e.g., for + specific element types according to platform conventions, or for keyboard-only users.
    + +
    0
    +
    Causes the element to be focusable, and indicates that the author would prefer + the element to be both click focusable and sequentially focusable. The + user agent might ignore this preference for click and sequential focusabiity.
    + +
    positive integer values
    +
    Behaves the same as 0, but in addition creates a relative ordering within a + tabindex-ordered focus navigation scope, so that elements with higher tabindex attribute value come later.
    +
    + +

    Note that the tabindex attribute cannot be used to make + an element non-focusable. The only way a page author can do that is by disabling the element, or making it + inert.

    +
    + +

    An element with the tabindex attribute specified is + interactive content.

    +
    -

    Each element can have a tabindex focus flag set, as defined - below. This flag is a factor that contributes towards determining whether an element is a - focusable area, as described in the previous section.

    +

    The tabindex value of an element is the value of its tabindex attribute.

    + data-x="attr-tabindex">tabindex attribute, parsed using the rules for parsing + integers. If parsing fails or the attribute is not specified, then the tabindex + value is null.

    The tabindex value of a focusable area is the tabindex value of its DOM anchor.

    -

    If the tabindex attribute is specified on an element, it - must be parsed using the rules for parsing integers. The attribute's values, or lack - thereof, must be interpreted as follows:

    +

    The tabindex value of an element must be interpreted as follows:

    -
    If the attribute is omitted or parsing the value returns an error
    +
    If the value is null
    -

    The user agent should follow platform conventions to determine if the element's - tabindex focus flag is set and, if so, whether the element and any focusable areas that have the element as their DOM anchor can - be reached using sequential focus navigation, and if so, what their relative - position in its tabindex-ordered focus navigation scope is to be. If the element +

    The user agent should follow platform conventions to determine if the element should be + considered as a focusable area and if so, whether the element and any focusable areas that have the element as their + DOM anchor are sequentially focusable, and if so, what their relative + position in their tabindex-ordered focus navigation scope is to be. If the element is a focus navigation scope owner, it must be included in its - tabindex-ordered focus navigation scope even if its tabindex focus - flag is not set and it may not be reachable using sequential focus - navigation.

    + tabindex-ordered focus navigation scope even if it is not a focusable + area.

    The relative ordering within a tabindex-ordered focus navigation scope for - elements and focusable areas that belong to the same focus navigation - scope and whose tabindex value is ommited or parsing the value returns an - error should be in shadow-including tree order.

    + elements and focusable areas that belong to the same + focus navigation scope and whose tabindex value is null should be in + shadow-including tree order.

    -

    Modulo platform conventions, it is suggested that for the following elements, the - tabindex focus flag be set:

    +

    Modulo platform conventions, it is suggested that the following elements should be considered + as focusable areas:

      @@ -73821,8 +73916,8 @@ END:VCARD
      -

      The user agent must set the element's tabindex focus flag, but should omit the - element from any tabindex-ordered focus navigation scope.

      +

      The user agent must consider the element as a focusable area, but should omit + the element from any tabindex-ordered focus navigation scope.

      One valid reason to ignore the requirement that sequential focus navigation not allow the author to lead to the element would be if the user's only mechanism for moving the @@ -73837,14 +73932,14 @@ END:VCARD

      -

      The user agent must set the element's tabindex focus flag, should allow the - element and any focusable areas that have the element as their - DOM anchor to be reached using sequential focus navigation.

      +

      The user agent must allow the element to be considered as a focusable area and + should allow the element and any focusable areas that have + the element as their DOM anchor to be sequentially focusable.

      The relative ordering within a tabindex-ordered focus navigation scope for - elements and focusable areas that belong to the same focus navigation - scope and whose tabindex value is zero should be in shadow-including - tree order.

      + elements and focusable areas that belong to the same + focus navigation scope and whose tabindex value is zero should be in + shadow-including tree order.

      @@ -73852,14 +73947,14 @@ END:VCARD
      -

      The user agent must set the element's tabindex focus flag, should allow the - element and any focusable areas that have the element as their - DOM anchor to be reached using sequential focus navigation, and should place the element - — referenced as candidate below — and the aforementioned focusable areas in the tabindex-ordered focus navigation - scope where the element is a part of so that, relative to other elements and focusable areas that belong to the same focus - navigation scope, they are:

      +

      The user agent must allow the element to be considered as a focusable area and + should allow the element and any focusable areas that have + the element as their DOM anchor to be sequentially focusable, and + should place the element — referenced as candidate below — and the + aforementioned focusable areas in the + tabindex-ordered focus navigation scope where the element is a part of so that, + relative to other elements and focusable areas that belong + to the same focus navigation scope, they are:

        @@ -73894,9 +73989,6 @@ END:VCARD
    -

    An element with the tabindex attribute specified is - interactive content.

    -

    The tabIndex IDL attribute must reflect the value of the tabindex content attribute. The default value is 0 if the element is an a, area, @@ -74383,12 +74475,13 @@ END:VCARD direction, and then return.

    For example, if direction is backward, then the last - focusable control before the browser's rendering area would be the control to focus.

    + sequentially focusable control before the browser's rendering area would be the + control to focus.

    -

    If the user agent has no focusable controls — a kiosk-mode browser, for instance - — - then the user agent may instead restart these steps with the starting point being the - top-level browsing context itself.

    +

    If the user agent has no sequentially focusable controls — a kiosk-mode + browser, for instance — then the user agent may instead restart these steps with the + starting point being the top-level browsing context itself.