Skip to content

Commit

Permalink
Merge pull request w3c#3 from WICG/master
Browse files Browse the repository at this point in the history 
Merge WICG master
  • Loading branch information
Jihye Hong authored Apr 4, 2018
2 parents fba3d6d + 358c736 commit c4a1bcb
Show file tree
Hide file tree
Showing 2 changed files with 244 additions and 5 deletions.
96 changes: 95 additions & 1 deletion index.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@ code.key {
border-radius: 0.5ch;
padding: 1px 5px;
}
.output {
background: white;
padding: 1em;
}
</style>


Expand Down Expand Up @@ -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>.

Expand Down Expand Up @@ -1263,4 +1355,6 @@ The editors of this specification would like to thank the following individuals
* Elika Etemad
* Hugo Holgersson
* Hyojin Song
* Junho Seo
* Rob Dodson
* Seungcheon Baek
153 changes: 149 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1178,14 +1178,37 @@
</style>
<meta content="Bikeshed version 5afc3ab5248efd53ff0fd6d61ad878a3dc5a357a" name="generator">
<link href="http://wicg.github.io/spatial-navigation" rel="canonical">
<meta content="f1fff803092ab6b6f111dfc8e93dc62c6a03f1ec" name="document-revision">
<meta content="2fdd3a99c8a15e4c03ec4f7e49440107529b59f3" name="document-revision">
<style>
code.key {
border: solid 1px;
border-radius: 0.5ch;
padding: 1px 5px;
}
.output {
background: white;
padding: 1em;
}
</style>
<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>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
Expand Down Expand Up @@ -1432,7 +1455,7 @@
<div class="head">
<p data-fill-with="logo"></p>
<h1 class="p-name no-ref" id="title">Spatial Navigation</h1>
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2018-03-30">30 March 2018</time></span></h2>
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2018-04-04">4 April 2018</time></span></h2>
<div data-fill-with="spec-metadata">
<dl>
<dt>This version:
Expand Down Expand Up @@ -2591,7 +2614,126 @@ <h3 class="heading settled" data-level="8.1" id="container"><span class="secno">
</dl>
<p class="note" role="note"><span>Note:</span> In addition, as per <a href="#grouping">§7.1 Groupings of elements</a>, the viewport of a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context③">browsing context</a> (not limited to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context②">top-level browsing context</a>)
also establishes a <a data-link-type="dfn" href="#spatial-navigation-focus-container" id="ref-for-spatial-navigation-focus-container②④">spatial navigation focus container</a>.</p>
<p class="issue" id="issue-89f1d2b1"><a class="self-link" href="#issue-89f1d2b1"></a> Add an example <a href="https://github.com/wicg/spatial-navigation/issues/16">&lt;https://github.com/wicg/spatial-navigation/issues/16></a></p>
<div class="example" id="example-a34092a0">
<a class="self-link" href="#example-a34092a0"></a> 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.
<p>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".</p>
<div class="output">
<div id="example-cal">
<button>Previous Week</button>
<table>
<tbody>
<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>
</div>
<pre><code class="highlight"><span class="p">&lt;</span><span class="nt">div</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">button</span><span class="p">></span>Previous Week<span class="p">&lt;/</span><span class="nt">button</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">table</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">th</span><span class="p">></span>M<span class="p">&lt;</span><span class="nt">th</span><span class="p">></span>T<span class="p">&lt;</span><span class="nt">th</span><span class="p">></span>W<span class="p">&lt;</span><span class="nt">th</span><span class="p">></span>T<span class="p">&lt;</span><span class="nt">th</span><span class="p">></span>F<span class="p">&lt;</span><span class="nt">th</span><span class="p">></span>S<span class="p">&lt;</span><span class="nt">th</span><span class="p">></span>S
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">></span>0-6<span class="p">&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Foo<span class="p">&lt;/</span><span class="nt">a</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">></span>6-9<span class="p">&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Bar<span class="p">&lt;/</span><span class="nt">a</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">></span>9-12<span class="p">&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">></span>12-18<span class="p">&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">></span>18-21<span class="p">&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">></span>21-24<span class="p">&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">>&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Baz<span class="p">&lt;/</span><span class="nt">a</span><span class="p">>&lt;</span><span class="nt">td</span><span class="p">></span>
<span class="p">&lt;/</span><span class="nt">table</span><span class="p">></span>
<span class="p">&lt;</span><span class="nt">button</span><span class="p">></span>Next Week<span class="p">&lt;/</span><span class="nt">button</span><span class="p">></span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">></span>
</code></pre>
<pre><code class="highlight"><span class="nt">table, td, th </span><span class="p">{</span>
<span class="k">border-collapse</span><span class="p">:</span> collapse<span class="p">;</span>
<span class="k">border</span><span class="p">:</span> solid <span class="m">1</span><span class="l">px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">td </span><span class="p">{</span> <span class="k">width</span><span class="p">:</span> <span class="m">12.5</span><span class="l">%</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">div </span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> grid<span class="p">;</span>
<span class="k">grid-template-columns</span><span class="p">:</span> auto <span class="m">1</span><span class="l">fr</span> auto<span class="p">;</span>
<span class="p">}</span>
<span class="nt">button </span><span class="p">{</span> <span class="k">align-self</span><span class="p">:</span> center<span class="p">;</span> <span class="p">}</span>
</code></pre>
<p>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.</p>
<p>Adding <code class="highlight"><span class="nt">table </span><span class="p">{</span> <span class="k">spatial-navigation-contain</span><span class="p">:</span> contain<span class="p">;</span> <span class="p">}</span></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".</p>
<p>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.</p>
</div>
<p class="note" role="note"><span>Note:</span> the <a class="property" data-link-type="propdesc" href="#propdef-spatial-navigation-contain" id="ref-for-propdef-spatial-navigation-contain④">spatial-navigation-contain</a> property is <a data-link-type="dfn" href="#at-risk" id="ref-for-at-risk①">at-risk</a>.</p>
<h2 class="no-num heading settled" id="scrolling"><span class="content">Appendix A. Scroll extensions</span><a class="self-link" href="#scrolling"></a></h2>
<p>This section proposes a few extensions to CSS
Expand Down Expand Up @@ -2652,8 +2794,12 @@ <h2 class="no-num heading settled" id="ack"><span class="content">Acknowledgemen
<p>Hugo Holgersson</p>
<li data-md="">
<p>Hyojin Song</p>
<li data-md="">
<p>Junho Seo</p>
<li data-md="">
<p>Rob Dodson</p>
<li data-md="">
<p>Seungcheon Baek</p>
</ul>
</main>
<div data-fill-with="conformance">
Expand Down Expand Up @@ -3179,7 +3325,6 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
<div class="issue"> CSS should have a term for “border box taking into account corner shaping properties like border-radius”. <a href="https://github.com/w3c/csswg-drafts/issues/2324">&lt;https://github.com/w3c/csswg-drafts/issues/2324></a><a href="#issue-c7f6d991"> ↵ </a></div>
<div class="issue"> Should that be C’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-1/#optimal-viewing-region">optimal viewing region</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollport">scrollport</a>? <a href="https://github.com/wicg/spatial-navigation/issues/29">&lt;https://github.com/wicg/spatial-navigation/issues/29></a><a href="#issue-f4c587b2"> ↵ </a></div>
<div class="issue"> Some CSS spec needs to define hit testing. <a href="https://github.com/w3c/csswg-drafts/issues/2325">&lt;https://github.com/w3c/csswg-drafts/issues/2325></a><a href="#issue-88cc7acf"> ↵ </a></div>
<div class="issue"> Add an example <a href="https://github.com/wicg/spatial-navigation/issues/16">&lt;https://github.com/wicg/spatial-navigation/issues/16></a><a href="#issue-89f1d2b1"> ↵ </a></div>
<div class="issue"> Terminology like this should be in <a data-link-type="biblio" href="#biblio-cssom-view-1">[CSSOM-VIEW-1]</a>, <a data-link-type="biblio" href="#biblio-css-overflow-3">[CSS-OVERFLOW-3]</a>, <a data-link-type="biblio" href="#biblio-css-scroll-snap-1">[CSS-SCROLL-SNAP-1]</a>. <a href="https://github.com/w3c/csswg-drafts/issues/2322">&lt;https://github.com/w3c/csswg-drafts/issues/2322></a><a href="#issue-56c2d572"> ↵ </a></div>
<div class="issue"> <a data-link-type="biblio" href="#biblio-cssom-view-1">[CSSOM-VIEW-1]</a> should probably define
how to perform a scroll in a given direction without an explicit position.
Expand Down

0 comments on commit c4a1bcb

Please sign in to comment.