[css-display-4] Change reading-order-items to reading-flow

Fixes: #9921

css-display-4/Overview.bs

@@ -1148,17 +1148,15 @@ Reordering and Accessibility</h3>
  A well-implemented spatial navigation feature would need to consider
  all the layout features of CSS that modify spatial relationships.
 
-<h2 id='reading-order-items'>
-Reading Order: the 'reading-order-items' property</h2>
-
-ISSUE(9921): Should this property be 'reading-order' or 'reading-flow'?
+<h2 id='reading-flow'>
+Reading Order: the 'reading-flow' property</h2>
 
 ISSUE(9922): Should this property also apply to tables?
 
-ISSUE(9923): A proposed alternative syntax.
+ISSUE(9230): Define how reading-flow interacts with focusable display: contents elements.
 
  <pre class='propdef'>
- Name: reading-order-items
+ Name: reading-flow
  Value: normal | flex-visual | flex-flow | grid-rows | grid-columns | grid-order
  Initial: normal
  Applies to: flex and grid containers
@@ -1167,13 +1165,13 @@ ISSUE(9923): A proposed alternative syntax.
  Animation type: not animatable
  </pre>
 
- The 'reading-order-items' property controls the order in which
+ The 'reading-flow' property controls the order in which
  elements in a flex or grid layout are rendered to speech
  or are navigated to when using (linear) sequential navigation methods.
 
  It takes one keyword value. Values are defined as follows:
 
- <dl dfn-for=reading-order-items dfn-type=value>
+ <dl dfn-for=reading-flow dfn-type=value>
  <dt><dfn>normal</dfn>
  <dd>
  Follow the order of elements in the DOM.
@@ -1183,7 +1181,7 @@ ISSUE(9923): A proposed alternative syntax.
  Follows the visual reading order of flex items,
  taking the writing mode into account.
  Therefore, a document in English, with a 'flex-direction' of 'row-reverse'
- and 'reading-order-items' of 'flex visual'
+ and 'reading-flow' of 'flex visual'
  would have a reading order of left to right.
  <dt><dfn>flex-flow</dfn>
  <dd>
@@ -1208,7 +1206,7 @@ ISSUE(9923): A proposed alternative syntax.
 
  <div class='example'>
  In this example, there are three flex items displayed as a row,
- The 'reading-order-items' property has a value of 'flex-visual'.
+ The 'reading-flow' property has a value of 'flex-visual'.
  The 'flex-direction' property is 'row-reverse'.
  We are in English with a text direction of left to right.
  The reading order of these items is therefore
@@ -1226,15 +1224,15 @@ ISSUE(9923): A proposed alternative syntax.
  .wrapper {
  display: flex;
  flex-direction: row-reverse;
- reading-order-items: flex-visual;
+ reading-flow: flex-visual;
  }
  </pre>
  </div>
 
  <div class='example'>
  In this example there are four grid items,
  placed on a grid and displayed visually out of DOM order.
- The 'reading-order-items' property has a value of 'grid-rows',
+ The 'reading-flow' property has a value of 'grid-rows',
  and the document is in English.
  The reading order of these items is therefore
  "Item 4", "Item 2", "Item 3", "Item 1".
@@ -1254,7 +1252,7 @@ ISSUE(9923): A proposed alternative syntax.
  grid-template-columns: repeat(3, 150px);
  grid-template-areas: "d b b"
  "c c a"; 
- reading-order-items: grid-rows;
+ reading-flow: grid-rows;
  }
 
  .a { grid-area: a; }
@@ -1264,15 +1262,15 @@ ISSUE(9923): A proposed alternative syntax.
  </pre>
  </div>
 
- The 'reading-order-items' property affects neither layout nor painting order
+ The 'reading-flow' property affects neither layout nor painting order
  and therefore has no effect on rendering to the visual [=canvas=].
 
  When using a 'flex-*' or 'grid-*' keyword value,
  the 'order' property is taken into account.
 
  <div class='example'>
  In this example, there are three flex items displayed as a row,
- The 'reading-order-items' property has a value of 'flex-flow'.
+ The 'reading-flow' property has a value of 'flex-flow'.
  The third item in the DOM has 'order=-1'.
  The reading order of these items is therefore
  "Item 3", "Item 1", "Item 2".
@@ -1292,14 +1290,14 @@ ISSUE(9923): A proposed alternative syntax.
 
  .wrapper {
  display: flex;
- reading-order-items: flex-flow;
+ reading-flow: flex-flow;
  }
  </pre>
  </div>
 
  Advisement: The source document should express
  the underlying logical order of elements.
- The 'reading-order-items' property exists for cases where a given document
+ The 'reading-flow' property exists for cases where a given document
  can have multiple reading orders depending on layout changes,
  e.g. in response to [=media queries=].
  In such cases, the most common or most fundamental reading order
@@ -1309,8 +1307,8 @@ ISSUE(9923): A proposed alternative syntax.
  If the host language defines features for explicitly controlling
  the reading or navigation order
  (such as <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex"><code>tabindex</code></a> [[HTML]]),
- these take precedence over 'reading-order-items':
- the modified document order created by 'reading-order-items'
+ these take precedence over 'reading-flow':
+ the modified document order created by 'reading-flow'
  essentially replaces the underlying source order
  for the purpose of such features.
 
@@ -1320,7 +1318,7 @@ ISSUE(9923): A proposed alternative syntax.
  <summary>Design Considerations and Background</summary>
 
  Some of the considerations that went into the design
- of 'reading-order-items' are:
+ of 'reading-flow' are:
 
  * There are clear use cases for disconnecting
  the [=reading and navigation order=] from the box layout order,
@@ -1355,7 +1353,7 @@ ISSUE(9923): A proposed alternative syntax.
  ISSUE(7387): DOM needs a convenient reordering function
  so that authors (even authors who don't usually write JS)
  can easily perform source order reordering when necessary
- instead of misusing 'order' or 'reading-order-items'.
+ instead of misusing 'order' or 'reading-flow'.
 
 <!--
 ██ ██ ████ ██████ ████ ████████
@@ -2148,7 +2146,7 @@ Additions since Level 3</h3>
 
  The following features were added since <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>:
 
- * the 'reading-order-items' property 
+ * the 'reading-flow' property 
  (<a href="https://github.com/w3c/csswg-drafts/issues/8589#issuecomment-1721504153">Issue 8589</a>)
  * the ability to animate 'display'