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

Fixes: w3c#9921

Author: rachelandrew

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'