From 9708fb7aef5b64414037954a18a64ad67d78fc67 Mon Sep 17 00:00:00 2001 From: Di Zhang Date: Mon, 9 Sep 2024 17:54:43 -0700 Subject: [PATCH 01/25] Add support for reading-flow --- source | 168 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 162 insertions(+), 6 deletions(-) diff --git a/source b/source index 1024b55dd73..0fb05af59b8 100644 --- a/source +++ b/source @@ -3818,6 +3818,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • inline formatting context
  • replaced element
  • CSS box
    • +
  • The 'reading-flow' property
    • +
  • order-modified document order

    • The following features are defined in CSS Flexible Box Layout: @@ -3964,7 +3966,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute

  • The 'direction' property
  • The 'unicode-bidi' property
  • The 'writing-mode' property
    • -
  • The block flow direction, +
  • The writing +mode, + block flow direction, block axis, inline axis, block size, @@ -79781,9 +79785,9 @@ dictionary ToggleEventInit : EventInit {

    A node is a focus navigation scope owner if it is a Document, a - shadow host, a slot, or an element in the shadow host, a slot, an element in the popover showing state which also has a popover - invoker set.

    + invoker set, or a reading flow scope owner.

    Each focus navigation scope owner has a focus navigation scope, which is a list of elements. Its contents are determined as follows:

    @@ -79795,6 +79799,9 @@ dictionary ToggleEventInit : EventInit {

    1. If element's parent is null, then return null.

      2. +

    2. If element is a reading flow scope owner, then return + element.

      3. +

    3. If element's parent is a shadow host, then return element's assigned slot.

      4. @@ -79816,8 +79823,9 @@ dictionary ToggleEventInit : EventInit {

      The order of elements within a focus navigation scope does not impact any of the algorithms in this specification. Ordering only becomes important for the - tabindex-ordered focus navigation scope and flattened tabindex-ordered focus - navigation scope concepts defined below.

      + tabindex-ordered focus navigation scope, flattened tabindex-ordered focus + navigation scope and reading-flow focus navigation scope concepts defined + below.

      A tabindex-ordered focus navigation scope is a list of focusable areas and focus navigation @@ -79837,7 +79845,9 @@ dictionary ToggleEventInit : EventInit {

      The order within a tabindex-ordered focus navigation scope is determined by each - element's tabindex value, as described in the section below.

      + element's tabindex value and, for reading-flow focus navigation scope, + by the special rules provided by the sequential navigation search algorithm. The + tabindex value should takes precedence over reading flow.

      The rules there do not give a precise ordering, as they are composed mostly of "should" statements and relative orderings.

      @@ -80067,6 +80077,78 @@ dictionary ToggleEventInit : EventInit { +
      + +

      The reading flow

      + +

      A reading flow container is either:

      + +
        +

      • a flex + container that has the 'reading-flow' CSS property set to 'flex-visual' or + 'flex-flow'.

        • +

      • a grid + container that has the 'reading-flow' CSS property set to 'grid-rows', + 'grid-columns' or 'grid-order'.

        • +
      + +

      A reading flow scope owner is either:

      + +
        +

      • a reading flow container.

        • +

      • an element delegating its rendering to its children whose parent + element is a reading flow container.

        • +
      + +

      A reading flow item is an element whose parent + element is a reading flow scope owner.

      + +

      A non participating reading flow item is + a reading flow item whose computed value of the + 'display' property is 'contents' or whose computed value of the + 'position' property is 'fixed' or 'absolute'.

      + +

      A participating reading flow item is a reading flow item that is not a non participating reading flow item.

      + +

      A reading-flow focus navigation scope is a tabindex-ordered focus navigation + scope where the focus navigation scope owner is a reading flow scope + owner.

      + + The reading flow order for a reading-flow focus navigation scope is + determined by the scope owner's computed value of the 'reading-flow' property: + +
        +

      • For 'flex-visual': the reading flow should be defined by sorting the participating reading flow items in the visual + reading flow order and taking the writing mode into account, followed by non participating reading flow + items.

        • +

      • For 'flex-flow': the reading flow should be defined by sorting the participating reading flow items using the 'flex-flow' + direction, followed by non participating + reading flow items.

        • +

      • For 'grid-rows': the reading flow should be defined by sorting the participating reading flow items first by their + displayed row order, and then by their column order, taking the writing mode into + account, followed by non participating + reading flow items.

        • +

      • For 'grid-columns': the reading flow should be defined by sorting the participating reading flow items first by their + displayed column order, and then by their row order, taking the writing mode into + account, followed by non participating + reading flow items.

        • +

      • For 'grid-order': the reading flow should be defined by sorting the participating reading flow items in + order-modified document order, followed by non participating reading flow + items.

        • +
      + +
      +

      Processing model

      @@ -80691,6 +80773,22 @@ dictionary ToggleEventInit : EventInit { focusable.

      +
    4. +

      If candidate is a reading flow item or + null, direction is forward, and starting point is in a + reading-flow focus navigation scope scope, then let new + candidate be the result of running the reading flow sequential navigation search + algorithm with candidate as the first argument, direction as the + second, and starting point's focus navigation scope as the third.

      + +

      If starting point is a reading flow item, + direction is backward, and starting point is in a + reading-flow focus navigation scope scope, then let new + candidate be the result of running the reading flow sequential navigation search + algorithm with starting point as the first argument, direction as + the second, and starting point's focus navigation scope as the third.

      +
      5. +

    5. If candidate is a navigable container with a non-null content navigable, then:

      @@ -80713,6 +80811,64 @@ dictionary ToggleEventInit : EventInit {

    6. Return candidate.

    +

    The reading flow sequential navigation search algorithm consists of the following + steps. This algorithm takes three arguments: a reading flow item current, a direction + direction and a reading-flow focus navigation scope scope.

    + +
      +
    1. + Let reading flow items be the list of reading flow + items owned by scope, sorted in reading flow. +
      2. +
    2. + If reading flow items is empty, return null. +
      3. +
    3. If direction is forward, then: +
        +
      1. + If current is the reading flow item from + reading flow items that comes first in tree order, return first + item in reading flow items. +
        2. +
      2. + If current is null, let previous be the reading flow item from reading flow items that + comes last in tree order. +
        3. +
      3. + Otherwise, let previous be the reading flow + item that comes before current in tree order. +
        4. +
      4. + If previous is the last item in reading flow items, return null. +
        5. +
      5. + Otherwise, return the reading flow item that comes + after previous in reading flow items. +
        6. +
      +
      4. +
    4. Otherwise: +
        +
      1. + Let previous be the item that comes before current in reading + flow items. +
        2. +
      2. + If previous is null, return null. +
        3. +
      3. + Otherwise, if previous does not have any descendant, return + previous. +
        4. +
      4. + Otherwise, return the last descendant of previous. +
        5. +
      + +
      5. +
    + From 45fa3910ea17d3824f2f748d450088a700de465e Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Tue, 17 Sep 2024 12:04:57 -0400 Subject: [PATCH 02/25] Definitions and nits --- source | 43 +++++++++++++++++++++++++++---------------- 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/source b/source index 0fb05af59b8..da35d5c87ac 100644 --- a/source +++ b/source @@ -3818,7 +3818,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • inline formatting context
  • replaced element
  • CSS box
    • -
  • The 'reading-flow' property
    • +
  • The 'flex-visual', + 'flex-flow', + 'grid-rows', + 'grid-columns', and + 'grid-order' values of the + 'reading-flow' property
  • order-modified document order
    • @@ -80079,23 +80084,25 @@ dictionary ToggleEventInit : EventInit {
    -

    The reading flow

    +

    The reading flow

    -

    A reading flow container is either:

    +

    A reading flow container is either: CSSDISPLAY

    A reading flow scope owner is either:

    @@ -80120,27 +80127,31 @@ dictionary ToggleEventInit : EventInit { determined by the scope owner's computed value of the 'reading-flow' property:
    @@ -80822,9 +80821,11 @@ dictionary ToggleEventInit : EventInit {

  • Return candidate.

    • -

    The reading flow sequential navigation search algorithm consists of the following - steps. This algorithm takes three arguments: a reading flow item current, a direction - direction and a reading-flow focus navigation scope scope.

    +

    The reading flow sequential navigation search algorithm, given a reading flow item current, a sequential focus + direction direction and a reading-flow focus navigation scope + scope, consists of the following steps. They return a focusable + area-or-null.

    1. From dc70a78ffcce6668138571d29c6ecce4a1c10ca8 Mon Sep 17 00:00:00 2001 From: Di Zhang Date: Thu, 26 Sep 2024 10:36:44 -0700 Subject: [PATCH 04/25] Address format review changes --- source | 118 ++++++++++++++++++++++++++------------------------------- 1 file changed, 54 insertions(+), 64 deletions(-) diff --git a/source b/source index 2462de1c252..bbd8a9193c1 100644 --- a/source +++ b/source @@ -3233,7 +3233,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    2. The tree, shadow tree, and node tree concepts
    3. The tree order and shadow-including tree order concepts
    4. The element concept
      5. -
    5. The child concept
      6. +
    6. The child and last child concepts
    7. The root and shadow-including root concepts
    8. The inclusive ancestor, descendant, @@ -79852,7 +79852,7 @@ dictionary ToggleEventInit : EventInit {

      The order within a tabindex-ordered focus navigation scope is determined by each element's tabindex value and, for reading-flow focus navigation scope, by the special rules provided by the sequential navigation search algorithm. The - tabindex value should take precedence over reading flow.

      + tabindex value takes precedence over reading flow.

      The rules there do not give a precise ordering, as they are composed mostly of "should" statements and relative orderings.

      @@ -80783,21 +80783,19 @@ dictionary ToggleEventInit : EventInit { focusable.

      9. -
    9. -

      If candidate is a reading flow item or - null, direction is forward, and starting point is in a - reading-flow focus navigation scope scope, then let new - candidate be the result of running the reading flow sequential navigation search - algorithm with candidate as the first argument, direction as the - second, and starting point's focus navigation scope as the third.

      +

    10. If candidate is a reading flow item or + null, direction is forward, and starting point is in a + reading-flow focus navigation scope scope, then let new + candidate be the result of running the reading flow sequential navigation search + algorithm given candidate, direction, and starting + point's focus navigation scope.

      11. -

      If starting point is a reading flow item, - direction is backward, and starting point is in a - reading-flow focus navigation scope scope, then let new - candidate be the result of running the reading flow sequential navigation search - algorithm with starting point as the first argument, direction as - the second, and starting point's focus navigation scope as the third.

      - +

    11. If starting point is a reading flow + item, direction is backward, and starting point is in a + reading-flow focus navigation scope scope, then let new + candidate be the result of running the reading flow sequential navigation search + algorithm given starting point, direction, and starting + point's focus navigation scope.

    12. If candidate is a navigable container with a non-null content @@ -80828,57 +80826,49 @@ dictionary ToggleEventInit : EventInit { area-or-null.

        -
      1. - Let reading flow items be the list of reading flow - items owned by scope, sorted in reading flow. -
        2. -
      2. - If reading flow items is empty, return null. -
        3. -
      3. If direction is forward, then: -
          -
        1. - If current is the reading flow item from - reading flow items that comes first in tree order, return first - item in reading flow items. -
          2. -
        2. - If current is null, let previous be the

          Let reading flow items be the list of reading flow items owned by scope, sorted in + reading flow.

          3. + +

        3. If reading flow items is empty, then return null.

          4. + +
        4. +

          If direction is forward, then:

          +
            +

          1. If current is the reading flow + item from reading flow items that comes first in tree order, + return first item in reading flow items.

            2. + +

          2. If current is null, let previous be the reading flow item from reading flow items that - comes last in tree order. -

            3. -
          3. - Otherwise, let previous be the reading flow - item that comes before current in tree order. -
            4. -
          4. - If previous is the last item in reading flow items, return null. -
            5. -
          5. - Otherwise, return the reading flow item that comes - after previous in reading flow items. -
            6. -
          + comes last in tree order.

          5. + +

        5. Otherwise, let previous be the reading + flow item that comes before current in tree order.

          6. + +

        6. If previous is the last item in reading flow items, then return + null.

          7. + +

        7. Otherwise, return the reading flow item that + comes after previous in reading flow items.

          8. +
        4. -
      4. Otherwise: -
          -
        1. - Let previous be the item that comes before current in reading - flow items. -
          2. -
        2. - If previous is null, return null. -
          3. -
        3. - Otherwise, if previous does not have any descendant, return - previous. -
          4. -
        4. - Otherwise, return the last descendant of previous. -
          5. -
        +
      5. +

        Otherwise:

        +
          +

        1. Let previous be the item preceding + current in reading flow items if one exists, and null + otherwise.

          2. - +

        2. If previous is null, then return null.

          3. + +

        3. Otherwise, if previous does not have a child, return previous.

          4. + +

        4. Otherwise, return the last child of + previous.

          5. +
        +
      From 31b2e806f6a114aeaff5ee6c563c16a79d3f4ac5 Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Tue, 1 Oct 2024 23:03:17 -0400 Subject: [PATCH 05/25] Editorial: clean up small parts of sequential focus navigation (#10632) --- source | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/source b/source index bbd8a9193c1..b6f1de2453c 100644 --- a/source +++ b/source @@ -80783,19 +80783,16 @@ dictionary ToggleEventInit : EventInit { focusable.

      13. -

    13. If candidate is a reading flow item or - null, direction is forward, and starting point is in a - reading-flow focus navigation scope scope, then let new - candidate be the result of running the reading flow sequential navigation search - algorithm given candidate, direction, and starting - point's focus navigation scope.

      14. +
    14. +

      If candidate is a navigable container with a non-null content + navigable, then:

      -

    15. If starting point is a reading flow - item, direction is backward, and starting point is in a - reading-flow focus navigation scope scope, then let new - candidate be the result of running the reading flow sequential navigation search - algorithm given starting point, direction, and starting - point's focus navigation scope.

      16. +
        +

      1. Let recursive candidate be the result of running the sequential + navigation search algorithm with candidate's content navigable, + direction, and "sequential".

      2. If candidate is a navigable container with a non-null content @@ -80812,7 +80809,6 @@ dictionary ToggleEventInit : EventInit { sequential navigation search algorithm with candidate, direction, and selection mechanism.

        3. -

      3. Otherwise, set candidate to recursive candidate.

      From a5656ba1381a035950afec58908b1c4b2b3063c8 Mon Sep 17 00:00:00 2001 From: Di Zhang Date: Mon, 9 Sep 2024 17:54:43 -0700 Subject: [PATCH 06/25] Add support for reading-flow --- source | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/source b/source index b6f1de2453c..b64ef08ea33 100644 --- a/source +++ b/source @@ -80111,6 +80111,7 @@ dictionary ToggleEventInit : EventInit { element is a reading flow scope owner.

      A non-participating reading flow item is + a reading flow item whose computed value of the 'display' property is 'contents' or whose computed value of the 'position' property is 'fixed' or 'absolute'.

      @@ -80783,6 +80784,22 @@ dictionary ToggleEventInit : EventInit { focusable.

      +
    16. +

      If candidate is a reading flow item or + null, direction is forward, and starting point is in a + reading-flow focus navigation scope scope, then let new + candidate be the result of running the reading flow sequential navigation search + algorithm with candidate as the first argument, direction as the + second, and starting point's focus navigation scope as the third.

      + +

      If starting point is a reading flow item, + direction is backward, and starting point is in a + reading-flow focus navigation scope scope, then let new + candidate be the result of running the reading flow sequential navigation search + algorithm with starting point as the first argument, direction as + the second, and starting point's focus navigation scope as the third.

      +
      17. +

    17. If candidate is a navigable container with a non-null content navigable, then:

      @@ -80810,7 +80827,6 @@ dictionary ToggleEventInit : EventInit { direction, and selection mechanism.

    -

  • Return candidate.

    • From 33c0f6416098f3683ea775a4be3f97be2ee8e6f0 Mon Sep 17 00:00:00 2001 From: Di Zhang Date: Thu, 26 Sep 2024 10:36:44 -0700 Subject: [PATCH 07/25] Address format review changes --- source | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/source b/source index b64ef08ea33..495ce410b09 100644 --- a/source +++ b/source @@ -80784,21 +80784,19 @@ dictionary ToggleEventInit : EventInit { focusable.

    -
  • -

    If candidate is a reading flow item or - null, direction is forward, and starting point is in a - reading-flow focus navigation scope scope, then let new - candidate be the result of running the reading flow sequential navigation search - algorithm with candidate as the first argument, direction as the - second, and starting point's focus navigation scope as the third.

    - -

    If starting point is a reading flow item, - direction is backward, and starting point is in a - reading-flow focus navigation scope scope, then let new - candidate be the result of running the reading flow sequential navigation search - algorithm with starting point as the first argument, direction as - the second, and starting point's focus navigation scope as the third.

    -
    • +

  • If candidate is a reading flow item or + null, direction is forward, and starting point is in a + reading-flow focus navigation scope scope, then let new + candidate be the result of running the reading flow sequential navigation search + algorithm given candidate, direction, and starting + point's focus navigation scope.

    • + +

  • If starting point is a reading flow + item, direction is backward, and starting point is in a + reading-flow focus navigation scope scope, then let new + candidate be the result of running the reading flow sequential navigation search + algorithm given starting point, direction, and starting + point's focus navigation scope.

  • If candidate is a navigable container with a non-null content From 93ec208328089b3a47ffb8cd422f34025f1b96a2 Mon Sep 17 00:00:00 2001 From: Di Zhang Date: Mon, 28 Oct 2024 15:00:58 -0700 Subject: [PATCH 08/25] Update definitions to make reading flow item a scope owner --- source | 112 +++++++++++++++++---------------------------------------- 1 file changed, 33 insertions(+), 79 deletions(-) diff --git a/source b/source index 495ce410b09..f5c52fc1919 100644 --- a/source +++ b/source @@ -79792,7 +79792,8 @@ dictionary ToggleEventInit : EventInit {

    A node is a focus navigation scope owner if it is a Document, a shadow host, a slot, an element in the popover showing state which also has a popover - invoker set, or a reading flow scope owner.

    + invoker set, a reading flow container scope owner or a reading flow item.

    Each focus navigation scope owner has a focus navigation scope, which is a list of elements. Its contents are determined as follows:

    @@ -79804,9 +79805,6 @@ dictionary ToggleEventInit : EventInit {

    1. If element's parent is null, then return null.

      2. -

    2. If element is a reading flow scope owner, then return - element.

      3. -

    3. If element's parent is a shadow host, then return element's assigned slot.

      4. @@ -79819,6 +79817,9 @@ dictionary ToggleEventInit : EventInit {

    4. If element is in the popover showing state and has a popover invoker set, then return element.

      5. +

    5. If element is a reading flow container scope owner or a reading flow item, then return element.

      6. +

    6. Return element's parent's associated focus navigation owner.

    @@ -79829,8 +79830,8 @@ dictionary ToggleEventInit : EventInit {

    The order of elements within a focus navigation scope does not impact any of the algorithms in this specification. Ordering only becomes important for the tabindex-ordered focus navigation scope, flattened tabindex-ordered focus - navigation scope and reading-flow focus navigation scope concepts defined - below.

    + navigation scope and reading-flow-ordered focus navigation scope concepts + defined below.

    A tabindex-ordered focus navigation scope is a list of focusable areas and focus navigation @@ -79850,9 +79851,11 @@ dictionary ToggleEventInit : EventInit {

    The order within a tabindex-ordered focus navigation scope is determined by each - element's tabindex value and, for reading-flow focus navigation scope, - by the special rules provided by the sequential navigation search algorithm. The - tabindex value takes precedence over reading flow.

    + element's tabindex value.

    + +

    A reading-flow-ordered focus navigation scope is a tabindex-ordered focus + navigation scope whose focus navigation scope owner is a reading flow + container scope owner. Its order is determined by the reading flow order.

    The rules there do not give a precise ordering, as they are composed mostly of "should" statements and relative orderings.

    @@ -80098,7 +80101,7 @@ dictionary ToggleEventInit : EventInit { 'grid-rows', 'grid-columns' or 'grid-order'.

    • -

    A reading flow scope owner is either:

    +

    A reading flow container scope owner is either:

    A reading flow item is an element whose parent - element is a reading flow scope owner.

    + element is a reading flow container scope owner.

    A non-participating reading flow item is @@ -80120,10 +80123,7 @@ dictionary ToggleEventInit : EventInit { data-x="reading-flow-item">reading flow item that is not a non-participating reading flow item.

    -

    A reading-flow focus navigation scope is the tabindex-ordered focus navigation - scope of a reading flow scope owner.

    - - The reading flow order for a reading-flow focus navigation scope is + The reading flow order for a reading-flow-ordered focus navigation scope is determined by the scope owner's computed value of the 'reading-flow' property: +

    If a reading flow item has a tabindex value + greater than zero, then let its value be readjusted to zero.

    +
    @@ -80784,19 +80787,22 @@ dictionary ToggleEventInit : EventInit { focusable.

    -

  • If candidate is a reading flow item or - null, direction is forward, and starting point is in a - reading-flow focus navigation scope scope, then let new - candidate be the result of running the reading flow sequential navigation search - algorithm given candidate, direction, and starting - point's focus navigation scope.

    • +
  • +

    If starting point is a reading flow item + in a reading-flow-ordered focus navigation scope scope, then:

    + +
      +

    1. Let reading flow items be the list of reading flow items owned by scope, sorted in + reading flow order.

      2. -

    2. If starting point is a reading flow - item, direction is backward, and starting point is in a - reading-flow focus navigation scope scope, then let new - candidate be the result of running the reading flow sequential navigation search - algorithm given starting point, direction, and starting - point's focus navigation scope.

      3. +

    3. If direction is forward, then let candidate be the item + that comes after starting point in reading flow items.

      4. + +

    4. Otherwise, let candidate be the item that comes before starting + point in reading flow items.

      5. +
    +

  • If candidate is a navigable container with a non-null content @@ -80829,58 +80835,6 @@ dictionary ToggleEventInit : EventInit {

  • Return candidate.

    • -

    The reading flow sequential navigation search algorithm, given a reading flow item current, a sequential focus - direction direction and a reading-flow focus navigation scope - scope, consists of the following steps. They return a focusable - area-or-null.

    - -
      -

    1. Let reading flow items be the list of reading flow items owned by scope, sorted in - reading flow.

      2. - -

    2. If reading flow items is empty, then return null.

      3. - -
    3. -

      If direction is forward, then:

      -
        -

      1. If current is the reading flow - item from reading flow items that comes first in tree order, - return first item in reading flow items.

        2. - -

      2. If current is null, let previous be the reading flow item from reading flow items that - comes last in tree order.

        3. - -

      3. Otherwise, let previous be the reading - flow item that comes before current in tree order.

        4. - -

      4. If previous is the last item in reading flow items, then return - null.

        5. - -

      5. Otherwise, return the reading flow item that - comes after previous in reading flow items.

        6. -
      -
      4. -
    4. -

      Otherwise:

      -
        -

      1. Let previous be the item preceding - current in reading flow items if one exists, and null - otherwise.

        2. - -

      2. If previous is null, then return null.

        3. - -

      3. Otherwise, if previous does not have a child, return previous.

        4. - -

      4. Otherwise, return the last child of - previous.

        5. -
      -
      5. -
    -
    From 9aeb6c2374a005b5f51d0932547f005934c5b278 Mon Sep 17 00:00:00 2001 From: Di Zhang Date: Mon, 28 Oct 2024 15:44:52 -0700 Subject: [PATCH 09/25] Fix previous bad merge fixes --- source | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/source b/source index f5c52fc1919..6019a9135df 100644 --- a/source +++ b/source @@ -3233,7 +3233,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • The tree, shadow tree, and node tree concepts
  • The tree order and shadow-including tree order concepts
  • The element concept
    • -
  • The child and last child concepts
    • +
  • The child concept
  • The root and shadow-including root concepts
  • The inclusive ancestor, descendant, @@ -80804,17 +80804,6 @@ dictionary ToggleEventInit : EventInit {
    • -
  • -

    If candidate is a navigable container with a non-null content - navigable, then:

    - -
      -

    1. Let recursive candidate be the result of running the sequential - navigation search algorithm with candidate's content navigable, - direction, and "sequential".

      2. -

    2. If candidate is a navigable container with a non-null content navigable, then:

      @@ -80830,7 +80819,9 @@ dictionary ToggleEventInit : EventInit { sequential navigation search algorithm with candidate, direction, and selection mechanism.

      3. +

    3. Otherwise, set candidate to recursive candidate.

    +

  • Return candidate.

    • From 5b543f660f5d231db9cb1d2771e421943e81e244 Mon Sep 17 00:00:00 2001 From: Di Zhang Date: Tue, 12 Nov 2024 09:25:56 -0800 Subject: [PATCH 10/25] PR format review changes --- source | 103 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 51 insertions(+), 52 deletions(-) diff --git a/source b/source index 6019a9135df..4a641e73317 100644 --- a/source +++ b/source @@ -80092,29 +80092,28 @@ dictionary ToggleEventInit : EventInit {

    A reading flow container is either: CSSDISPLAY

      -

    • a flex - container that has the 'reading-flow' CSS property set to - 'flex-visual' or 'flex-flow'.

      • +

    • A flex + container that has the 'reading-flow' CSS property set to + 'flex-visual' or 'flex-flow'.

      • -

    • a grid - container that has the 'reading-flow' CSS property set to - 'grid-rows', 'grid-columns' or 'grid-order'.

      • +

    • A grid + container that has the 'reading-flow' CSS property set to + 'grid-rows', 'grid-columns' or 'grid-order'.

    A reading flow container scope owner is either:

      -

    • a reading flow container.

      • +

    • a reading flow container.

      • -

    • an element delegating its rendering to its children whose parent - element is a reading flow container.

      • +

    • an element delegating its rendering to its children whose parent + element is a reading flow container.

    A reading flow item is an element whose parent element is a reading flow container scope owner.

    A non-participating reading flow item is - a reading flow item whose computed value of the 'display' property is 'contents' or whose computed value of the 'position' property is 'fixed' or 'absolute'.

    @@ -80123,39 +80122,39 @@ dictionary ToggleEventInit : EventInit { data-x="reading-flow-item">reading flow item that is not a non-participating reading flow item.

    - The reading flow order for a reading-flow-ordered focus navigation scope is - determined by the scope owner's computed value of the 'reading-flow' property: +

    The reading flow order for a reading-flow-ordered focus navigation scope + is determined by the scope owner's computed value of the 'reading-flow' property:

      -

    • For 'flex-visual': follows the order defined by sorting the participating reading flow items in the visual - reading order of flex items and taking the writing mode into account, followed by - non-participating reading flow items - in tree order.

      • - -

    • For 'flex-flow': follows the order defined by sorting the participating reading flow items using the - 'flex-flow' direction, followed by non-participating reading flow items in - tree order.

      • - -

    • For 'grid-rows': follows the order defined by sorting the participating reading flow items first by their - visual row order, and then by their visual column order, taking the writing mode - into account, followed by non-participating - reading flow items in tree order.

      • - -

    • For 'grid-columns': follows the order defined by sorting the participating reading flow items first by their - visual column order, and then by their visual row order, taking the writing mode - into account, followed by non-participating - reading flow items in tree order.

      • - -

    • For 'grid-order': follows the order defined by sorting the participating reading flow items in - order-modified document order, followed by non-participating reading flow items in - tree order.

      • +

    • For 'flex-visual': follows the order defined by sorting the participating reading flow items in the visual + reading order of flex items and taking the writing mode into account, followed by + non-participating reading flow items + in tree order.

      • + +

    • For 'flex-flow': follows the order defined by sorting the participating reading flow items using the + 'flex-flow' direction, followed by non-participating reading flow items in + tree order.

      • + +

    • For 'grid-rows': follows the order defined by sorting the participating reading flow items first by their + visual row order, and then by their visual column order, taking the writing mode + into account, followed by non-participating + reading flow items in tree order.

      • + +

    • For 'grid-columns': follows the order defined by sorting the participating reading flow items first by their + visual column order, and then by their visual row order, taking the writing mode + into account, followed by non-participating + reading flow items in tree order.

      • + +

    • For 'grid-order': follows the order defined by sorting the participating reading flow items in + order-modified document order, followed by non-participating reading flow items in + tree order.

    If a reading flow item has a tabindex value @@ -80789,24 +80788,24 @@ dictionary ToggleEventInit : EventInit {

  • If starting point is a reading flow item - in a reading-flow-ordered focus navigation scope scope, then:

    + in a reading-flow-ordered focus navigation scope scope:

    -
      -

    1. Let reading flow items be the list of reading flow items owned by scope, sorted in - reading flow order.

      2. +
        +

      1. Let reading flow items be the list of reading flow items owned by scope, sorted in + reading flow order.

        2. -

      2. If direction is forward, then let candidate be the item - that comes after starting point in reading flow items.

        3. +

      3. If direction is forward, then let candidate be the item + that comes after starting point in reading flow items.

        4. -

      4. Otherwise, let candidate be the item that comes before starting - point in reading flow items.

        5. -
      +

    2. Otherwise, let candidate be the item that comes before starting + point in reading flow items.

      3. +

  • If candidate is a navigable container with a non-null content - navigable, then:

    + navigable:

    1. Let recursive candidate be the result of running the sequential From 9fa15eeb2dd4edf975b13b7174cbae3ea541f04a Mon Sep 17 00:00:00 2001 From: Di Zhang Date: Wed, 13 Nov 2024 15:18:39 -0800 Subject: [PATCH 11/25] Define reading flow order algorithm, add example and other improvements --- images/reading-flow-order-example.svg | 1 + source | 255 +++++++++++++++++--------- 2 files changed, 166 insertions(+), 90 deletions(-) create mode 100644 images/reading-flow-order-example.svg diff --git a/images/reading-flow-order-example.svg b/images/reading-flow-order-example.svg new file mode 100644 index 00000000000..e4825978f34 --- /dev/null +++ b/images/reading-flow-order-example.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source b/source index 4a641e73317..629edf83bc0 100644 --- a/source +++ b/source @@ -3818,13 +3818,11 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute

    2. inline formatting context
    3. replaced element
    4. CSS box
      5. -
    5. The 'flex-visual', - 'flex-flow', - 'grid-rows', - 'grid-columns', and - 'grid-order' values of the - 'reading-flow' property
      6. -
    6. order-modified document order
      7. +
    7. CSS parent box
      8. + +
    8. reading flow container
      9. +
    9. rendering-defined sibling reading flow
      10. +
    10. The 'reading-flow' property

      11. The following features are defined in CSS Flexible Box Layout: @@ -3971,9 +3969,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute

    11. The 'direction' property
    12. The 'unicode-bidi' property
    13. The 'writing-mode' property
      14. -
    14. The writing -mode, - block flow direction, +
    15. The block flow direction, block axis, inline axis, block size, @@ -79792,8 +79788,8 @@ dictionary ToggleEventInit : EventInit {

      A node is a focus navigation scope owner if it is a Document, a shadow host, a slot, an element in the popover showing state which also has a popover - invoker set, a reading flow container scope owner or a reading flow item.

      + invoker set, a reading-flow-ordered scope owner or a reading flow + item.

      Each focus navigation scope owner has a focus navigation scope, which is a list of elements. Its contents are determined as follows:

      @@ -79817,8 +79813,11 @@ dictionary ToggleEventInit : EventInit {

    16. If element is in the popover showing state and has a popover invoker set, then return element.

      17. -

    17. If element is a reading flow container scope owner or a reading flow item, then return element.

      18. +

    18. If element is a reading-flow-ordered scope owner, then return + element.

      19. + +

    19. If element is a reading flow item, then return + element.

    20. Return element's parent's associated focus navigation owner.

    @@ -79854,8 +79853,12 @@ dictionary ToggleEventInit : EventInit { element's tabindex value.

    A reading-flow-ordered focus navigation scope is a tabindex-ordered focus - navigation scope whose focus navigation scope owner is a reading flow - container scope owner. Its order is determined by the reading flow order.

    + navigation scope whose focus navigation scope owner is a + reading-flow-ordered scope owner.

    + +

    The order within a reading-flow-ordered focus navigation scope is determined by + the reading flow order only. Each element's tabindex value is used to + determine whether the element is focusable, but it does not affect the order within the scope.

    The rules there do not give a precise ordering, as they are composed mostly of "should" statements and relative orderings.

    @@ -80018,7 +80021,8 @@ dictionary ToggleEventInit : EventInit { regardless.

    -
    If the value is a zero
    +
    If the value is a zero or if the value is a greater than zero and the element is a reading + flow item

    The user agent must allow the element to be considered as a focusable area and @@ -80031,7 +80035,7 @@ dictionary ToggleEventInit : EventInit { shadow-including tree order.

    -
    If the value is greater than zero
    +
    If the value is greater than zero and the element is not a reading flow item

    The user agent must allow the element to be considered as a focusable area and @@ -80089,76 +80093,160 @@ dictionary ToggleEventInit : EventInit {

    The reading flow

    -

    A reading flow container is either: CSSDISPLAY

    +

    A reading-flow-ordered scope owner is either: CSSDISPLAY

      -

    • A flex - container that has the 'reading-flow' CSS property set to - 'flex-visual' or 'flex-flow'.

      • +

    • a reading flow container.

      • -

    • A grid - container that has the 'reading-flow' CSS property set to - 'grid-rows', 'grid-columns' or 'grid-order'.

      • +

    • an element delegating its rendering to its children whose CSS parent + box is a reading flow container.

    -

    A reading flow container scope owner is either:

    +

    Every reading-flow-ordered scope owner has an associated reading flow + container.

    -
      -

    • a reading flow container.

      • +

      A reading flow item is an element whose parent element is a + reading-flow-ordered scope owner.

      -

    • an element delegating its rendering to its children whose parent - element is a reading flow container.

      • -
    +

    The reading flow order of a reading-flow-ordered focus navigation scope scope is the ordered list of elements constructed as follows:

    -

    A reading flow item is an element whose parent - element is a reading flow container scope owner.

    +
      +

    1. Let output be an empty list.

      2. -

      A non-participating reading flow item is - a reading flow item whose computed value of the - 'display' property is 'contents' or whose computed value of the - 'position' property is 'fixed' or 'absolute'.

      +

    2. Let owner be the focus navigation scope owner of + scope.

      3. -

      A participating reading flow item is a reading flow item that is not a non-participating reading flow item.

      +

    3. Let container be the reading flow container associated with + owner.

      4. -

      The reading flow order for a reading-flow-ordered focus navigation scope - is determined by the scope owner's computed value of the 'reading-flow' property:

      +

    4. Let items be the rendering-defined sibling reading flow of + container.

      5. -
        -

      • For 'flex-visual': follows the order defined by sorting the participating reading flow items in the visual - reading order of flex items and taking the writing mode into account, followed by - non-participating reading flow items - in tree order.

        • +
      • +

        For each item of items:

        -

      • For 'flex-flow': follows the order defined by sorting the participating reading flow items using the - 'flex-flow' direction, followed by non-participating reading flow items in - tree order.

        • +
          +

        1. While item is an element that is not the + container:

          2. -

        2. For 'grid-rows': follows the order defined by sorting the participating reading flow items first by their - visual row order, and then by their visual column order, taking the writing mode - into account, followed by non-participating - reading flow items in tree order.

          3. - -

        3. For 'grid-columns': follows the order defined by sorting the participating reading flow items first by their - visual column order, and then by their visual row order, taking the writing mode - into account, followed by non-participating - reading flow items in tree order.

          4. - -

        4. For 'grid-order': follows the order defined by sorting the participating reading flow items in - order-modified document order, followed by non-participating reading flow items in - tree order.

          5. -
      +
        +
      1. +

        If item's focus navigation scope owner is owner:

        + +
          +

        1. If output does not contain + item, append item to + output.

          2. + +

        2. Break.

          3. +
        +
        2. + +

      2. Set item to the parent element of item within the flat + tree.

        3. +
      +
    +
    • + +
  • +

    For each child of owner element's + children:

    + +
      +

    1. If child's focus navigation scope owner is owner and + output does not contain child, append child to output.

      2. +
    +
    • + +

  • Return output.

    • -

    If a reading flow item has a tabindex value - greater than zero, then let its value be readjusted to zero.

    + + +
    + +

    The following shows an example of how to compute the reading flow order.

    + + 
    <!DOCTYPE html>
+<html lang="en">
+<head>
+ <style>
+  .wrapper { display: grid; reading-flow: grid-order; }
+ </style>
+</head>
+<body>
+ <div class="wrapper" tabindex="0">
+  <div id="A" tabindex="0" style="order: 1">A
+    <div id="B" tabindex="1">B</div>
+  </div>
+  <div id="DC" tabindex="0" style="display: contents">
+    <div id="C" tabindex="0" style="order: 3">C
+      <div id="D" tabindex="0">D</div>
+      <div id="E" tabindex="2">E</div>
+    </div>
+    <div id="F" tabindex="0" style="order: 2">F</div>
+  </div>
+  <div id="PA" style="position: absolute; left: 100px;" tabindex="0">
+    <div id="G" tabindex="0">G</div>
+  </div>
+  <div id="H" tabindex="0" style="order: 4">H</div>
+ </div>
+</body>
+</html>
    + +

    + +

    For a reading-flow-ordered focus navigation scope where wrapper is the focus scope owner:

    + +
      +

    1. Let output be [].

      2. + +

    2. Let owner be wrapper.

      3. + +

    3. Let container be wrapper.

      4. + +

    4. The rendering-defined sibling reading flow is sorted by the CSS order attribute. The + items list is [A, F, C, H].

      5. + +

    5. Looping through the items, F and C do not have wrapper as its owner, but its parent DC + do. Output is now [A, DC, H].

      6. + +

    6. Looping through the children of wrapper, we find PA as not visited reading flow item of + owner. Output is now [A, DC, H, PA].

      7. + +

    7. Return output [A, DC, H, PA].

      8. +
    + +

    For a reading-flow-ordered focus navigation scope where display: contents DC is the focus + scope owner:

    + +
      +

    1. Let output be [].

      2. + +

    2. Let owner be DC.

      3. + +

    3. Let container be wrapper.

      4. + +

    4. The rendering-defined sibling reading flow is sorted by the CSS order attribute. The + items list is [A, F, C, H].

      5. + +

    5. Looping through the items, only F and C's owner is DC. Output is now [F, C].

      6. + +

    6. Looping through the children of DC, there are no more child to append.

      7. + +

    7. Return output [F, C].

      8. +
    + +

    Note that A, C, F, PA and H are focus scope owners because they are reading flow items. They + will follow a tabindex-ordered focus navigation scope and the ordering is not affected by the + CSS reading-flow property. In the focus navigation scope of C, the focus order will be [E, D] + because E has a positive tabindex.

    + +

    Combining everything together, the flattened tabindex-ordered focus navigation scope is: + [Wrapper, A, B, DC, F, C, E, D, H, PA, G].

    + +
    @@ -80623,6 +80711,10 @@ dictionary ToggleEventInit : EventInit { scope, the ordering is not necessarily related to the tree order of the Document.

    +

    As a reading-flow-ordered focus navigation scope is a + tabindex-ordered focus navigation scope, it is flattened in reading flow + order into the flattened tabindex-ordered focus navigation scope.

    +

    If a focusable area is omitted from the sequential focus navigation order of its Document, then it is unreachable via sequential focus navigation.

    @@ -80786,23 +80878,6 @@ dictionary ToggleEventInit : EventInit { focusable.

    -
  • -

    If starting point is a reading flow item - in a reading-flow-ordered focus navigation scope scope:

    - -
      -

    1. Let reading flow items be the list of reading flow items owned by scope, sorted in - reading flow order.

      2. - -

    2. If direction is forward, then let candidate be the item - that comes after starting point in reading flow items.

      3. - -

    3. Otherwise, let candidate be the item that comes before starting - point in reading flow items.

      4. -
    -
    • -

  • If candidate is a navigable container with a non-null content navigable:

    From 391d1bc06d01b8e5b7c973c7d142c08044cfbe54 Mon Sep 17 00:00:00 2001 From: Di Zhang Date: Thu, 14 Nov 2024 09:43:43 -0800 Subject: [PATCH 12/25] Update CSS Display links + fix ol error --- source | 38 ++++++++++++++++++-------------------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/source b/source index 629edf83bc0..73251287728 100644 --- a/source +++ b/source @@ -3819,9 +3819,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • replaced element
  • CSS box
  • CSS parent box
    • - -
  • reading flow container
    • -
  • rendering-defined sibling reading flow
    • +
  • reading flow container
    • +
  • rendering-defined sibling reading flow
  • The 'reading-flow' property
    • @@ -80126,32 +80125,31 @@ dictionary ToggleEventInit : EventInit {

    For each item of items:

      -

    1. While item is an element that is not the - container:

      2. - -
        -
      1. -

        If item's focus navigation scope owner is owner:

        +
      2. +

        While item is an element that is not the container:

        +
          +
        1. +

          If item's focus navigation scope owner is owner:

          -
            -

          1. If output does not contain - item, append item to - output.

            2. +
              +

            1. If output does not contain + item, append item to + output.

              2. -

            2. Break.

              3. -
            - +

          2. Break.

            3. +
          +
          2. -

        2. Set item to the parent element of item within the flat - tree.

          3. -
        +

      3. Set item to the parent element of item within the flat + tree.

        4. +
      +

  • For each child of owner element's children:

    -

    1. If child's focus navigation scope owner is owner and output does not contain child, Date: Wed, 27 Nov 2024 15:55:45 -0500 Subject: [PATCH 13/25] Small nits --- source | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source b/source index 73251287728..7e7c7eb96a7 100644 --- a/source +++ b/source @@ -79787,7 +79787,7 @@ dictionary ToggleEventInit : EventInit {

      A node is a focus navigation scope owner if it is a Document, a shadow host, a slot, an element in the popover showing state which also has a popover - invoker set, a reading-flow-ordered scope owner or a reading flow + invoker set, a reading-flow-ordered scope owner, or a reading flow item.

      Each focus navigation scope owner has a focus navigation scope, which @@ -79828,7 +79828,7 @@ dictionary ToggleEventInit : EventInit {

      The order of elements within a focus navigation scope does not impact any of the algorithms in this specification. Ordering only becomes important for the tabindex-ordered focus navigation scope, flattened tabindex-ordered focus - navigation scope and reading-flow-ordered focus navigation scope concepts + navigation scope, and reading-flow-ordered focus navigation scope concepts defined below.

      A tabindex-ordered focus navigation scope is a list of reading-flow-ordered focus navigation scopes.

      A reading-flow-ordered focus navigation scope is a tabindex-ordered focus navigation scope whose focus navigation scope owner is a @@ -80711,7 +80713,7 @@ dictionary ToggleEventInit : EventInit {

      As a reading-flow-ordered focus navigation scope is a tabindex-ordered focus navigation scope, it is flattened in reading flow - order into the flattened tabindex-ordered focus navigation scope.

      + order into a flattened tabindex-ordered focus navigation scope.

      If a focusable area is omitted from the sequential focus navigation order of its Document, then it is unreachable via sequential focus From 97a14d95410603835891336d159e67666508d6a3 Mon Sep 17 00:00:00 2001 From: Di Zhang Date: Tue, 3 Dec 2024 17:18:04 -0500 Subject: [PATCH 15/25] Review changes: refactor example --- source | 199 ++++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 153 insertions(+), 46 deletions(-) diff --git a/source b/source index fa863c03e6e..93e045fd4fc 100644 --- a/source +++ b/source @@ -79848,10 +79848,10 @@ dictionary ToggleEventInit : EventInit { is a negative integer.

      2. -

      By default, the order within a tabindex-ordered focus navigation scope is - determined by each of its element's tabindex value. This ordering criteria is - sometimes overridden, as is the case with reading-flow-ordered focus navigation scopes.

      +

      By default, the order within a tabindex-ordered focus navigation scope is determined + by each element's tabindex value. This ordering criteria is sometimes overridden, as is + the case with reading-flow-ordered focus + navigation scopes.

      A reading-flow-ordered focus navigation scope is a tabindex-ordered focus navigation scope whose focus navigation scope owner is a @@ -80097,7 +80097,7 @@ dictionary ToggleEventInit : EventInit {

      A reading-flow-ordered scope owner is either: CSSDISPLAY

        -

      • a reading flow container.

        • +

      • a reading flow container, or

      • an element delegating its rendering to its children whose CSS parent box is a reading flow container.

        • @@ -80109,10 +80109,11 @@ dictionary ToggleEventInit : EventInit {

        A reading flow item is an element whose parent element is a reading-flow-ordered scope owner.

        -

        The reading flow order of a reading-flow-ordered focus navigation scope scope is the ordered list of elements constructed as follows:

        +

        The reading flow order of a reading-flow-ordered focus navigation scope + scope is the ordered list of elements constructed as follows:

          -

        1. Let output be an empty list.

          2. +

        2. Let output be « ».

        3. Let owner be the focus navigation scope owner of scope.

          4. @@ -80142,16 +80143,27 @@ dictionary ToggleEventInit : EventInit {
        +

        Different items can have the same inclusive ancestor. + Only add to output if it is not already in the reading flow order. This + loop stops when the inclusive ancestor of item within the flat + tree is in the scope.

        +

      • Set item to the parent element of item within the flat tree.

    • + +

    The rendering-defined sibling reading flow includes descendants of the reading flow container that are not in + the reading-flow-ordered focus navigation scope. This step traverses the inclusive ancestors of item within the flat + tree to find a potential element to include in the reading flow order.

  • -

    For each child of owner element's - children:

    +

    For each child of owner element's children, in tree order:

    1. If child's focus navigation scope owner is owner and output does not contain child, ToggleEventInit : EventInit {

    2. Return output.

      3. -
    -
    +
    -

    The following shows an example of how to compute the reading flow order.

    +
    +

    The following example shows how to get the flattened tabindex-ordered focus navigation + scope for wrapper.

    <!DOCTYPE html>
 <html lang="en">
@@ -80194,60 +80207,154 @@ dictionary ToggleEventInit : EventInit {
 </body>
 </html>
    -

    +

    -

    For a reading-flow-ordered focus navigation scope where wrapper is the focus scope owner:

    +

    In this example, wrapper is the focus navigation scope owner + of a reading-flow-ordered focus navigation scope and a reading flow + container. Its reading flow order is computed as follows:

    -
      -

    1. Let output be [].

      2. +
        +

      • Per step 4, we get wrapper's rendering-defined sibling + reading flow items as « A, F, + C, H ».

        • -

      • Let owner be wrapper.

        • +
      • +

        Per step 5, we loop through items:

        -

      • Let container be wrapper.

        • +
          +

        • A's focus navigation scope owner is wrapper, it is added to output.

          • -

        • The rendering-defined sibling reading flow is sorted by the CSS order attribute. The - items list is [A, F, C, H].

          • +
        • +

          F's focus navigation scope owner is DC.

          -

        • Looping through the items, F and C do not have wrapper as its owner, but its parent DC - do. Output is now [A, DC, H].

          • +
            +

          • Set item to be F's parent element within the + flat tree, DC.

            • -

          • Looping through the children of wrapper, we find PA as not visited reading flow item of - owner. Output is now [A, DC, H, PA].

            • +

          • DC's focus navigation scope owner is wrapper, it is added to output.

            • +
          + -

        • Return output [A, DC, H, PA].

          • -
    +
  • +

    C's focus navigation scope owner is DC.

    -

    For a reading-flow-ordered focus navigation scope where display: contents DC is the focus - scope owner:

    +
      +

    • Set item to be C's parent element within the + flat tree, DC.

      • -
        -

      1. Let output be [].

        2. +

      2. DC's focus navigation scope owner is wrapper, but it is already in output.

        3. +
    +
    • + +

  • H's focus navigation scope owner is wrapper, it is added to output.

    • -

  • Let owner be DC.

    • +

  • output is « A, DC, H ».

    • + + -

  • Let container be wrapper.

    • +
  • +

    Per step 6, we loop through the children of wrapper in tree order:

    -

  • The rendering-defined sibling reading flow is sorted by the CSS order attribute. The - items list is [A, F, C, H].

    • +
      +

    • A is already in output.

      • -

    • Looping through the items, only F and C's owner is DC. Output is now [F, C].

      • +

    • DC is already in output.

      • -

    • Looping through the children of DC, there are no more child to append.

      • +

    • PA's focus navigation scope owner is wrapper, it is added to output.

      • -

    • Return output [F, C].

      • - +

    • H is already in output.

      • -

      Note that A, C, F, PA and H are focus scope owners because they are reading flow items. They - will follow a tabindex-ordered focus navigation scope and the ordering is not affected by the - CSS reading-flow property. In the focus navigation scope of C, the focus order will be [E, D] - because E has a positive tabindex.

      +

    • output is « A, DC, H, PA ».

      • +
    + + -

    Combining everything together, the flattened tabindex-ordered focus navigation scope is: - [Wrapper, A, B, DC, F, C, E, D, H, PA, G].

    +

    Notice that DC is the focus navigation scope owner of a + reading-flow-ordered focus navigation scope, but its reading flow + container is still wrapper. Its reading flow order is + computed as follows:

    - +
      +

    • Per step 4, we again get wrapper's rendering-defined sibling + reading flow items as « A, F, + C, H ».

      • + +
    • +

      Per step 5, we loop through items:

      + +
        +
      • +

        A's focus navigation scope owner is wrapper.

        + +
          +

        • Set item to be A's parent element within the + flat tree, wrapper.

          • + +

        • While loop ends because item is the container.

          • +
        +
        • + +

      • F's focus navigation scope owner is DC, it is added to output.

        • + +

      • C's focus navigation scope owner is DC, it is added to output.

        • + +
      • +

        H's focus navigation scope owner is wrapper.

        + +
          +

        • Set item to be H's parent element within the + flat tree, wrapper.

          • + +

        • While loop ends because item is the container.

          • +
        +
        • + +

      • output is « F, C ».

        • +
      +
      • + +
    • +

      Per step 6, we loop through the children of wrapper in tree order:

      + +
        +

      • C is already in output.

        • + +

      • F is already in output.

        • + +

      • output is « F, C ».

        • +
      +
      • +
    +

    A, C, F, PA and H are reading flow + items. Each is the focus navigation scope owner of a tabindex-ordered + focus navigation scope that does not follow the reading flow order. For example, + the focus navigation scope of C will be « E, D » because E has a higher positive tabindex + value than D.

    + +

    Combining everything together, the flattened tabindex-ordered focus navigation scope + for wrapper is « wrapper, A, + B, DC, F, C, E, D, H, + PA, G ».

    From 910492d23dbab77e3088d9a263ec0f8d62ca3186 Mon Sep 17 00:00:00 2001 From: Di Zhang Date: Wed, 4 Dec 2024 11:25:15 -0500 Subject: [PATCH 16/25] Fix wrong nesting of node --- source | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/source b/source index 93e045fd4fc..4bd07de3191 100644 --- a/source +++ b/source @@ -80141,12 +80141,12 @@ dictionary ToggleEventInit : EventInit {

  • Break.

    • - -

    Different items can have the same inclusive ancestor. - Only add to output if it is not already in the reading flow order. This - loop stops when the inclusive ancestor of item within the flat - tree is in the scope.

    +

    Different items can have the same inclusive ancestor. + Only add to output if it is not already in the reading flow order. This + loop stops when the inclusive ancestor of item within the flat + tree is in the scope.

    +

  • Set item to the parent element of item within the flat tree.

    • From 7fe3c3e78eaded54128a736882507ad1b97132e4 Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Tue, 17 Dec 2024 16:37:18 -0500 Subject: [PATCH 17/25] Reword a couple definitions and add a note --- source | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/source b/source index 4bd07de3191..3552089d6c4 100644 --- a/source +++ b/source @@ -79853,16 +79853,20 @@ dictionary ToggleEventInit : EventInit { the case with reading-flow-ordered focus navigation scopes.

    -

    A reading-flow-ordered focus navigation scope is a tabindex-ordered focus - navigation scope whose focus navigation scope owner is a - reading-flow-ordered scope owner.

    +

    The tabindex value rules do not give a precise ordering, as they are + composed mostly of "should" statements and relative orderings.

    -

    The order within a reading-flow-ordered focus navigation scope is determined by - the reading flow order only. Each element's tabindex value is used to - determine whether the element is focusable, but it does not affect the order within the scope.

    +

    Every reading-flow-ordered scope owner's tabindex-ordered focus navigation + scope is specifically a reading-flow-ordered focus navigation scope. The order + within a reading-flow-ordered focus navigation scope is determined by the + reading flow order algorithm; the use of tabindex value only determines + an item's focusability, but does not affect order within the scope.

    -

    The rules there do not give a precise ordering, as they are composed mostly of - "should" statements and relative orderings.

    +

    The tabindex-ordered focus navigation scope of a reading flow + item — and any other focus navigation scope owner for that matter — is not + specifically a reading-flow-ordered focus navigation scope; it is a normal + tabindex-ordered focus navigation scope whose order is determined by tabindex + value as usual.

    A flattened tabindex-ordered focus navigation scope is a list of focusable areas. Every focus navigation scope owner @@ -80092,7 +80096,7 @@ dictionary ToggleEventInit : EventInit {

    -

    The reading flow

    +

    Reading flow

    A reading-flow-ordered scope owner is either: CSSDISPLAY

    @@ -80142,10 +80146,10 @@ dictionary ToggleEventInit : EventInit {

  • Break.

    • -

    Different items can have the same inclusive ancestor. - Only add to output if it is not already in the reading flow order. This - loop stops when the inclusive ancestor of item within the flat - tree is in the scope.

    +

    Different items can have the same inclusive + ancestor. Only add to output if it is not already in the reading + flow order. This loop stops when the inclusive ancestor of + item within the flat tree is in the scope.

  • Set item to the parent element of item within the flat From 58bd0b0632b384d4c4180d7a700e834c53ff8275 Mon Sep 17 00:00:00 2001 From: Di Zhang Date: Wed, 18 Dec 2024 15:37:03 -0800 Subject: [PATCH 18/25] review changes --- images/reading-flow-order-example.svg | 2 +- source | 41 ++++++++++++++++----------- 2 files changed, 25 insertions(+), 18 deletions(-) diff --git a/images/reading-flow-order-example.svg b/images/reading-flow-order-example.svg index e4825978f34..5f4cf634664 100644 --- a/images/reading-flow-order-example.svg +++ b/images/reading-flow-order-example.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/source b/source index 3552089d6c4..4cb27728921 100644 --- a/source +++ b/source @@ -3821,7 +3821,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute

  • CSS parent box
  • reading flow container
  • rendering-defined sibling reading flow
    • -
  • The 'reading-flow' property

    • The following features are defined in CSS Flexible Box Layout: @@ -79812,11 +79811,11 @@ dictionary ToggleEventInit : EventInit {

  • If element is in the popover showing state and has a popover invoker set, then return element.

    • -

  • If element is a reading-flow-ordered scope owner, then return - element.

    • +

  • If element's parent is a reading-flow-ordered scope owner, then + return element's parent.

    • -

  • If element is a reading flow item, then return - element.

    • +

  • If element's parent is a reading flow item, then return + element's parent.

  • Return element's parent's associated focus navigation owner.

    • @@ -80122,6 +80121,9 @@ dictionary ToggleEventInit : EventInit {

  • Let owner be the focus navigation scope owner of scope.

    • +

  • Assert: owner is a reading-flow-ordered scope + owner.

    • +

  • Let container be the reading flow container associated with owner.

    • @@ -80132,11 +80134,13 @@ dictionary ToggleEventInit : EventInit {

    For each item of items:

      +

    1. Assert: item is a reading flow item.

      2. +
    2. -

      While item is an element that is not the container:

      +

      While item is not container:

      1. -

        If item's focus navigation scope owner is owner:

        +

        If item's associated focus navigation owner is owner:

        1. If output does not contain @@ -80148,8 +80152,7 @@ dictionary ToggleEventInit : EventInit {

          Different items can have the same inclusive ancestor. Only add to output if it is not already in the reading - flow order. This loop stops when the inclusive ancestor of - item within the flat tree is in the scope.

          + flow order.

        2. Set item to the parent element of item within the flat @@ -80158,20 +80161,24 @@ dictionary ToggleEventInit : EventInit {

        -

        The rendering-defined sibling reading flow includes descendants of the reading flow container that are not in - the reading-flow-ordered focus navigation scope. This step traverses the inclusive ancestors of item within the flat - tree to find a potential element to include in the reading flow order.

        +

        The rendering-defined sibling reading flow of container + includes descendants of this reading flow + container that might not be in scope. For example, if a direct child of + container has CSS 'display: contents' and its nested children are included in + items. Some elements in items will have the container while + others will have 'display: contents' child as its associated focus navigation + owner. This step traverses the inclusive + ancestors of item within the flat tree to make sure we only + include an element in the reading flow order if it is in scope.

      2. For each child of owner element's children, in tree order:

          -

        1. If child's focus navigation scope owner is owner and - output does not contain child, append child to output.

          2. +

        2. If child's associated focus navigation owner is owner + and output does not contain child, + append child to output.

        3. From 4e4a4c358709f5034ca02651f43588d7efb5884b Mon Sep 17 00:00:00 2001 From: Di Zhang Date: Thu, 19 Dec 2024 11:13:43 -0800 Subject: [PATCH 19/25] Address more review comments --- source | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/source b/source index 4cb27728921..5063398d273 100644 --- a/source +++ b/source @@ -3236,6 +3236,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      3. The child concept
      4. The root and shadow-including root concepts
      5. The inclusive ancestor, + ancestor, descendant, shadow-including ancestor, shadow-including descendant, @@ -80025,8 +80026,8 @@ dictionary ToggleEventInit : EventInit { regardless.

        -
        If the value is a zero or if the value is a greater than zero and the element is a reading - flow item
        +
        If the value is either a zero, or
        +
        If the value is greater than zero and the element is a reading flow item

        The user agent must allow the element to be considered as a focusable area and @@ -80162,14 +80163,13 @@ dictionary ToggleEventInit : EventInit {

      The rendering-defined sibling reading flow of container - includes descendants of this reading flow - container that might not be in scope. For example, if a direct child of - container has CSS 'display: contents' and its nested children are included in - items. Some elements in items will have the container while - others will have 'display: contents' child as its associated focus navigation - owner. This step traverses the inclusive - ancestors of item within the flat tree to make sure we only - include an element in the reading flow order if it is in scope.

      + includes descendants of this reading flow container + that might not be in scope. For example, if a direct child of container has + CSS 'display: contents' and its nested children are included in items. Some elements in + items will have the container while others will have 'display: contents' child + as its associated focus navigation owner. This step traverses the ancestors of item within the flat tree to make sure + we only include an element in the reading flow order if it is in scope.

    3. From 1d6b374fdf97dbb42304085214767560bf0b4e5e Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Fri, 20 Dec 2024 13:55:07 -0500 Subject: [PATCH 20/25] Some clean-ups, clarification, and wording --- source | 59 ++++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 37 insertions(+), 22 deletions(-) diff --git a/source b/source index 5063398d273..45f4e86d807 100644 --- a/source +++ b/source @@ -80128,32 +80128,35 @@ dictionary ToggleEventInit : EventInit {

    4. Let container be the reading flow container associated with owner.

      5. -

    5. Let items be the rendering-defined sibling reading flow of - container.

      6. +

    6. Let items be container's rendering-defined sibling reading + flow.

      7. + +

    7. Assert: items is a list of reading flow items.

    8. For each item of items:

        -

      1. Assert: item is a reading flow item.

        2. -

      2. While item is not container:

        +
        1. -

          If item's associated focus navigation owner is owner:

          +

          If scope contains item:

            -

          1. If output does not contain - item, append item to - output.

            2. +
          2. +

            If output does not contain + item, then append item to + output.

            + +

            Different items can share the same ancestor in + scope; only add it to output the first time it is encountered.

            +

          3. Break.

          - -

          Different items can have the same inclusive - ancestor. Only add to output if it is not already in the reading - flow order.

        2. Set item to the parent element of item within the flat @@ -80162,22 +80165,34 @@ dictionary ToggleEventInit : EventInit {

        -

        The rendering-defined sibling reading flow of container - includes descendants of this reading flow container - that might not be in scope. For example, if a direct child of container has - CSS 'display: contents' and its nested children are included in items. Some elements in - items will have the container while others will have 'display: contents' child - as its associated focus navigation owner. This step traverses the ancestors of item within the flat tree to make sure - we only include an element in the reading flow order if it is in scope.

        +
        +

        items can include descendants of + container that are not in scope. For example, when a direct child of + container has display: contents:

        + +
          +

        • The display: contents child will be in scope, but not + in items.

          • + +

        • The display: contents's own children will not be in scope (their + associated focus navigation owner is their parent), but can be in + items.

          • +
        + +

        This step includes in output the first inclusive ancestor of each + item that is also in scope. The result is that output is just + scope, but in reading flow order, as established by items.

        +

      3. For each child of owner element's children, in tree order:

        +
          -

        1. If child's associated focus navigation owner is owner - and output does not contain child, +

        2. If scope contains child and + output does not contain child, then append child to output.

        4. From da9d18bf87ec883cd764b4e6ca1623309be01489 Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Fri, 20 Dec 2024 15:36:58 -0500 Subject: [PATCH 21/25] Example wording --- source | 149 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 73 insertions(+), 76 deletions(-) diff --git a/source b/source index 45f4e86d807..768ab5ba5ed 100644 --- a/source +++ b/source @@ -80236,151 +80236,148 @@ dictionary ToggleEventInit : EventInit {

        -

        In this example, wrapper is the focus navigation scope owner - of a reading-flow-ordered focus navigation scope and a reading flow - container. Its reading flow order is computed as follows:

        +

        In this example, wrapper is a reading-flow-ordered scope + owner, and thus has a reading-flow-ordered focus navigation scope. Its + reading flow order is computed as follows:

          -

        • Per step 4, we get wrapper's rendering-defined sibling - reading flow items as « A, F, - C, H ».

          • +

        • First, we get wrapper's rendering-defined sibling reading + flow items as « A, F, C, H ».

        • -

          Per step 5, we loop through items:

          +

          Next, we loop through items:

            -

          • A's focus navigation scope owner is wrapper, it is added to output.

            • +

          • A is in scope, so it's added to + output.

          • -

            F's focus navigation scope owner is DC.

            +

            F is not in scope; its associated focus navigation + owner is DC.

              -

            • Set item to be F's parent element within the - flat tree, DC.

              • +

            • Set item to F's parent element within the + flat tree, which is DC.

              • -

            • DC's focus navigation scope owner is wrapper, it is added to output.

              • +

            • DC's is in scope, so it's added to + output.

          • -

            C's focus navigation scope owner is DC.

            +

            C is not in scope; it's associated focus + navigation owner is also DC.

              -

            • Set item to be C's parent element within the - flat tree, DC.

              • +

            • Set item to C's parent element within the + flat tree, which is DC.

              • -

            • DC's focus navigation scope owner is wrapper, but it is already in output.

              • +

            • DC is in scope, but it's already in + output, so we do nothing.

            • -

          • H's focus navigation scope owner is wrapper, it is added to output.

            • +

          • H is in scope, so it's added to + output.

            • -

          • output is « A, DC,

            output is now « A, DC, H ».

        • -

          Per step 6, we loop through the children of wrapper in tree order:

          - -
            -

          • A is already in output.

            • - -

          • DC is already in output.

            • - -

          • PA's focus navigation scope owner is wrapper, it is added to output.

            • +

            Finally, we loop through the children of wrapper in tree order.

            -

          • H is already in output.

            • +
              +

            • The only child that's in scope but not already in output is + PA; it gets added to output.

              -

            • output is « A, DC, H, PA ».

              • -
            +

          • output is now « A, DC, H, PA ».

            • +
        -

        Notice that DC is the focus navigation scope owner of a - reading-flow-ordered focus navigation scope, but its reading flow - container is still wrapper. Its reading flow order is - computed as follows:

        +

        Notice that DC is also a reading-flow-ordered scope owner; + the reading flow order of its reading-flow-ordered focus navigation + scope is computed as follows:

          -

        • Per step 4, we again get wrapper's rendering-defined sibling +

        • First, we compute DC's reading flow container as + wrapper.

          • + +

        • Then, we again get wrapper's rendering-defined sibling reading flow items as « A, F, C, H ».

        • -

          Per step 5, we loop through items:

          +

          Next, we loop through items:

          • -

            A's focus navigation scope owner is wrapper.

            +

            A is not in scope; its associated focus navigation + owner is wrapper, not DC.

            • Set item to be A's parent element within the - flat tree, wrapper.

              • + flat tree, which is wrapper.

              -

            • While loop ends because item is the container.

              • +

            • While loop ends because item is container.

            • -

          • F's focus navigation scope owner is DC, it is added to output.

            • +

          • F is in scope so it's added to + output.

            • -

          • C's focus navigation scope owner is DC, it is added to output.

            • +

          • C is in scope so it's added to + output.

          • -

            H's focus navigation scope owner is wrapper.

            +

            H is not in scope; its associated focus navigation + owner is wrapper, not DC.

            • Set item to be H's parent element within the - flat tree, wrapper.

              • + flat tree, which is wrapper.

              -

            • While loop ends because item is the container.

              • +

            • While loop ends because item is container.

            • -

          • output is « F, C ».

            • +

          • output is now « F, C + ».

        • -

          Per step 6, we loop through the children of Finally, we loop through the children of wrapper in tree order:

            -

          • C is already in output.

            • - -

          • F is already in output.

            • - -

          • output is « F, C ».

            • +

          • There are no children that are not already in + output, so we add nothing to output.

        -

        A, C, F, PA and H are reading flow - items. Each is the focus navigation scope owner of a tabindex-ordered - focus navigation scope that does not follow the reading flow order. For example, - the focus navigation scope of C will be « E, D » because E has a higher positive tabindex - value than D.

        - -

        Combining everything together, the flattened tabindex-ordered focus navigation scope - for wrapper is « wrapper, A, - B, DC, F, C, E, D, H, - PA, G ».

        +

        Each of A, C, F, PA, and H are reading + flow items, and the focus navigation scope owner of a tabindex-ordered + focus navigation scope that does not follow the reading flow order. For + example, the tabindex-ordered focus navigation scope of C is + « E, D », because E has a + higher positive tabindex value than D.

        + +

        Finally, when computing the flattened tabindex-ordered focus navigation scope of + wrapper, the two reading-flow-ordered focus navigation scopes we computed above, along with every + ordinary tabindex-ordered focus navigation scope previously mentioned, are all + recursively composed to form the following: « wrapper, A, B, DC, F, C, E, D, + H, PA, G ».

    From 790976dab02faa6ceafa9790422d3f5436a7e30a Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Fri, 20 Dec 2024 15:43:05 -0500 Subject: [PATCH 22/25] Match CONTRIBUTING.md file for conditions --- source | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source b/source index 768ab5ba5ed..fde2e322d06 100644 --- a/source +++ b/source @@ -80101,7 +80101,7 @@ dictionary ToggleEventInit : EventInit {

    A reading-flow-ordered scope owner is either: CSSDISPLAY

      -

    • a reading flow container, or

      • +

    • a reading flow container; or

    • an element delegating its rendering to its children whose CSS parent box is a reading flow container.

      • From 84883e840d9b431aaa144267ef9094e0c9b25402 Mon Sep 17 00:00:00 2001 From: Di Zhang Date: Fri, 20 Dec 2024 13:15:12 -0800 Subject: [PATCH 23/25] Improve example + remove unnecessary association description --- source | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/source b/source index fde2e322d06..52674e7bcd8 100644 --- a/source +++ b/source @@ -80107,9 +80107,6 @@ dictionary ToggleEventInit : EventInit { box is a reading flow container.

    -

    Every reading-flow-ordered scope owner has an associated reading flow - container.

    -

    A reading flow item is an element whose parent element is a reading-flow-ordered scope owner.

    @@ -80214,7 +80211,7 @@ dictionary ToggleEventInit : EventInit { </style> </head> <body> - <div class="wrapper" tabindex="0"> + <div class="wrapper"> <div id="A" tabindex="0" style="order: 1">A <div id="B" tabindex="1">B</div> </div> @@ -80233,7 +80230,7 @@ dictionary ToggleEventInit : EventInit { </body> </html>     -

    In this example, wrapper is a reading-flow-ordered scope @@ -80374,10 +80371,10 @@ dictionary ToggleEventInit : EventInit { wrapper, the two reading-flow-ordered focus navigation scopes we computed above, along with every ordinary tabindex-ordered focus navigation scope previously mentioned, are all - recursively composed to form the following: « wrapper, A, B, DC, F, C, E, D, - H, PA, G ».

    + recursively composed to form the following: « A, B, + DC, F, C, E, D, H, PA, + G ».

    From 6a79572f9b3e932a7395f7490d4a602a986578df Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Fri, 20 Dec 2024 16:23:49 -0500 Subject: [PATCH 24/25] Run `specfmt` --- source | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/source b/source index 52674e7bcd8..963b170153c 100644 --- a/source +++ b/source @@ -79848,10 +79848,10 @@ dictionary ToggleEventInit : EventInit { is a negative integer.

    -

    By default, the order within a tabindex-ordered focus navigation scope is determined - by each element's tabindex value. This ordering criteria is sometimes overridden, as is - the case with reading-flow-ordered focus - navigation scopes.

    +

    By default, the order within a tabindex-ordered focus navigation scope is + determined by each element's tabindex value. This ordering criteria is sometimes + overridden, as is the case with reading-flow-ordered focus navigation scopes.

    The tabindex value rules do not give a precise ordering, as they are composed mostly of "should" statements and relative orderings.

    @@ -80128,8 +80128,8 @@ dictionary ToggleEventInit : EventInit {

  • Let items be container's rendering-defined sibling reading flow.

    • -

  • Assert: items is a list of reading flow items.

    • +

  • Assert: items is a list of reading flow items.

  • For each item of items:

    @@ -80184,8 +80184,8 @@ dictionary ToggleEventInit : EventInit {
  • -

    For each child of owner element's children, in tree order:

    +

    For each child of owner element's + children, in tree order:

    1. If scope contains child and @@ -80373,8 +80373,8 @@ dictionary ToggleEventInit : EventInit { ordinary tabindex-ordered focus navigation scope previously mentioned, are all recursively composed to form the following: « A, B, DC, F, C, E, D, H, PA, - G ».

      + data-x="">E      , D, H, PA, G ».

    • From 8aacc860d3c84feca40176539ee052021c9cea24 Mon Sep 17 00:00:00 2001 From: Di Zhang Date: Fri, 20 Dec 2024 14:09:28 -0800 Subject: [PATCH 25/25] center content in reading-flow-order-example.svg --- images/reading-flow-order-example.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/images/reading-flow-order-example.svg b/images/reading-flow-order-example.svg index 5f4cf634664..7452d12fc80 100644 --- a/images/reading-flow-order-example.svg +++ b/images/reading-flow-order-example.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file