Add example

Closes w3c#16

Author: frivoal

index.bs

@@ -52,6 +52,10 @@ code.key {
     border-radius: 0.5ch;
     padding: 1px 5px;
 }
+.output {
+    background: white;
+    padding: 1em;
+}
 </style>
 
 
@@ -1211,7 +1215,95 @@ Note: In addition, as per [[#grouping]], the viewport of a <a for="/">browsing c
         (not limited to the <a>top-level browsing context</a>)
         also establishes a <a>spatial navigation focus container</a>.
 
-Issue(16): Add an example
+<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,
+    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".
+
+    <div class=output>
+        <div id=example-cal>
+            <button>Previous Week</button>
+            <table>
+                <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>12-18<td><td><td><td><td><td><td>
+                <tr><td>18-21<td><td><td><td><td><td><td>
+                <tr><td>21-24<td><td><td><td><td><td><a href="#">Baz</a><td>
+            </table>
+            <button>Next Week</button>
+        </div>
+        <style>
+        #example-cal table, #example-cal td, #example-cal th {
+            border-collapse: collapse;
+            border: solid 1px;
+        }
+        #example-cal th { text-align: center; }
+        #example-cal td { width: 12.5%; }
+        #example-cal {
+            display: grid;
+            grid-template-columns: auto 1fr auto;
+        }
+        #example-cal button { align-self: center; }
+
+        /* For browsers that don't support grid */
+        #example-cal table {
+            display:inline-table
+            vertical-align: middle;
+        }
+        </style>
+    </div>
+    <pre><code highlight=markup>
+        &lt;div>
+            &lt;button>Previous Week&lt;/button>
+            &lt;table>
+                &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>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>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 eachother,
+    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.
+
+    Adding <code highlight=css>table { spatial-navigation-contain: contain; }</code> to the stylesheet
+    would result it 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.
+</div>
 
 Note: the 'spatial-navigation-contain' property is <a>at-risk</a>.