[css-nav-1] Modify example about spatial-navigation-contain

Author: Jihye Hong

css-nav-1/Overview.bs

@@ -1338,15 +1338,15 @@ Note: In addition, as per [[#grouping]], the viewport of a <a for="/">browsing c
 
 <div class=example>
     The following example shows a simplified TV program schedule or calendar.
-    It has a grid of elements representing TV shows or calendar entries,
+    It has a grid of elements representing TV shows or calendar entries
     and some UI buttons around it.
 
     In this case, the grid is quite sparse,
     so if the user tries to move down from "Foo",
     focus would be moved to "Next Week",
     as it is objectively closer in the down direction.
     The same is true for going down from "Bar":
-    the focus would be moved to "Previous Week".
+    the focus would move to "Previous Week".
 
     <div class=output>
         <div id=example-cal>
@@ -1355,9 +1355,9 @@ Note: In addition, as per [[#grouping]], the viewport of a <a for="/">browsing c
                 <tr><td><th>M<th>T<th>W<th>T<th>F<th>S<th>S
                 <tr><td>0-6<td><td><td><td><td><td><td><a href="#">Foo</a>
                 <tr><td>6-9<td><a href="#">Bar</a><td><td><td><td><td><td>
-                <tr><td>9-12<td><td><td><td><td><td><td>
+                <tr><td>9-12<td><td><a href="#">Bat</a><td><td><td><td><td>
                 <tr><td>12-18<td><td><td><td><td><td><td>
-                <tr><td>18-21<td><td><td><td><td><td><td>
+                <tr><td>18-21<td><td><td><td><td><td><td><a href="#">Woo</a>
                 <tr><td>21-24<td><td><td><td><td><td><a href="#">Baz</a><td>
             </table>
             <button>Next Week</button>
@@ -1389,41 +1389,28 @@ Note: In addition, as per [[#grouping]], the viewport of a <a for="/">browsing c
                 &lt;tr>&lt;td>&lt;th>M&lt;th>T&lt;th>W&lt;th>T&lt;th>F&lt;th>S&lt;th>S
                 &lt;tr>&lt;td>0-6&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>&lt;a href="#">Foo&lt;/a>
                 &lt;tr>&lt;td>6-9&lt;td>&lt;a href="#">Bar&lt;/a>&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>
-                &lt;tr>&lt;td>9-12&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>
+                &lt;tr>&lt;td>9-12&lt;td>&lt;td>&lt;a href="#">Bat&lt;/a>&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>
                 &lt;tr>&lt;td>12-18&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>
-                &lt;tr>&lt;td>18-21&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>
+                &lt;tr>&lt;td>18-21&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>&lt;a href="#">Woo&lt;/a>
                 &lt;tr>&lt;td>21-24&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>&lt;td>&lt;a href="#">Baz&lt;/a>&lt;td>
             &lt;/table>
             &lt;button>Next Week&lt;/button>
         &lt;/div>
     </code></pre>
-    <pre><code highlight=css>
-        table, td, th {
-            border-collapse: collapse;
-            border: solid 1px;
-        }
-        td { width: 12.5%; }
-        div {
-            display: grid;
-            grid-template-columns: auto 1fr auto;
-        }
-        button { align-self: center; }
-    </code></pre>
 
-    Because the elements in the table are semantically related to each other,
-    the author may want to provide a different navigation experience
-    giving priority to movements inside the grid once you have focused one of its items.
+    However, the author may want to provide a different navigation experience
+    giving priority to movements inside the grid once you have focused one of its items
+    because the elements in the table are semantically related to each other.
 
     Adding <code highlight=css>table { spatial-navigation-contain: contain; }</code> to the stylesheet
     would result this behavior.
-    It would still be possible to move the focus out of the table,
-    for example by going right from "Foo".
-    Since there is nothing in the grid that is to the right,
-    the focus would move to "Next week".
-
-    However, if the user navigates down from "Foo",
-    there is something inside the grid,
-    so focus will move there without considering things that are outside.
+
+    After that, the focus would move down from "Foo" to "Woo" instead of "Next Week",
+    and from "Bar" to "Bat" instead of "Previous Week".
+
+    It would still be possible to move the focus out of the table.
+    For example, the focus would move to "Next week" by going right from "Foo"
+    since there is nothing in the grid that is to the right.
 </div>
 
 Note: the 'spatial-navigation-contain' property is <a>at-risk</a>.