Merge pull request w3c#1 from WICG/master

Merge from WICG/spartial-navigation
frivoal · Aug 16, 2018 · 8796856 · 8796856
2 parents e50093d + c6007b7
commit 8796856
Show file tree

Hide file tree

Showing 21 changed files with 1,010 additions and 976 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,12 @@
 # Spatial Navigation
 This is a repository for making the Web excellently embrace the spatial navigation's features so that the Web technology can be propagated into several industries such as TV, IVI, game console, and upcoming smart devices as well as PC and mobile for a11y.
 
-This repository consists of the basic description for the spatial navigation, landscapes of the relevant industries, the current status of [W3C standardization](explainer.md), and [Implementation of Web engines](implStatus.md) such as Blink, WebKit, Gecko, and EdgeHTML, while the relevant issues have been discussed in several W3C working groups and Web engine open source communities.
-
-You're welcome to contribute! If you have something to say for the spatial navigation, please kindly put it on [issues](https://github.com/WICG/spatial-navigation/issues) of this repository or send it via [email](mailto://[email protected]). Let's make the Web to be extensible for the several industries!
-
-An [experimental Polyfill](./polyfill/) is available.
+## Details
+* Read the [Explainer](explainer.md)
+* Read the [Spec](https://wicg.github.io/spatial-navigation/)
+* See the [Implementation Status](implStatus.md)
+* Try the [Demo](https://wicg.github.io/spatial-navigation/demo/)
+* Give feedback on [issues](https://github.com/WICG/spatial-navigation/issues) or via [email](mailto://[email protected])
 
 ## Overview
 **Spatial navigation (aka Spatnav)** is the ability to navigate between focusable elements based on their position within a structured document. Spatial navigation is often called 'directional navigation' which enables four(4) directional navigation. Users are usually familiar with the 2-way navigation using tab key for the forward direction and shift+tab key for the backward direction, but not familiar with the 4-way navigation using arrow keys.
@@ -20,7 +21,6 @@ In spatial navigation mode, the default behavior of arrow keys is changed from s
 2. Overriding methods on top of the heuristic algorithm (DOM method/attribute/event)
 3. The relevant API for efficiently supporting the spatial navigation (spatnav mode, container, etc.)
 
-
 See the [explainer](explainer.md) for the details of W3C standardization for #1, #2 and #3 above.
 
 See the [implStatus](implStatus.md) for the details of the implementation in Web engines for #2 above.

diff --git a/demo/blog/index.html b/demo/blog/index.html
@@ -18,7 +18,7 @@
 <body>
   <div class="blog">
     <!-- Side bar Section start -->
-    <div id="sidebar" class="col-sm-3 spatnav-contain" style="display: block;">
+    <div id="sidebar" class="col-sm-3" style="display: block; --spatial-navigation-contain: contain;">
       <div class="text-center">
         <img src="images/profile.png" alt="profile" style="width: 60%; height: 60%;">
         <br>
@@ -34,12 +34,12 @@
     <!-- Side bar Section end -->
 
     <!-- Feed Section starts -->
-    <div id="feed" class="col-sm-9 spatnav-contain tabcontent" style="display: block;">
+    <div id="feed" class="col-sm-9 tabcontent" style="display: block; --spatial-navigation-contain: contain;">
       <div class="my-5">
         <div class="gridrow mx-5">
           <!-- 1st column starts -->
           <div class="gridcolumn mr-4">
-            <div class="card mb-4 spatnav-contain">
+            <div class="card mb-4" style="--spatial-navigation-contain: contain;">
               <img tabindex="0" class="card-img-top" src="images/feed/1.jpg" style="height: 250px; width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -51,7 +51,7 @@
                 </div>
               </div>
             </div>
-            <div class="card mb-4 spatnav-contain">
+            <div class="card mb-4" style="--spatial-navigation-contain: contain;">
               <img tabIndex="0" class="card-img-top" src="images/feed/2.jpg" style="height: 300px; width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -63,7 +63,7 @@
                 </div>
               </div>
             </div>
-            <div class="card mb-4 spatnav-contain">
+            <div class="card mb-4" style="--spatial-navigation-contain: contain;">
               <img tabIndex="0" class="card-img-top" src="images/feed/9.jpg" style="height: 250px; width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -80,7 +80,7 @@
 
           <!-- 2st column starts -->
           <div class="gridcolumn mr-4">
-            <div class="card mb-4 spatnav-contain">
+            <div class="card mb-4"  style="--spatial-navigation-contain: contain;">
               <img tabIndex="0" class="card-img-top" src="images/feed/3.jpg" style="height: 225px; width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
@@ -92,7 +92,7 @@
                 </div>
               </div>
             </div>
-            <div class="card mb-4 spatnav-contain">
+            <div class="card mb-4" style="--spatial-navigation-contain: contain;">
               <img tabIndex="0" class="card-img-top" src="images/feed/4.jpg" style="height: 180px; width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text.</p>
@@ -104,7 +104,7 @@
                 </div>
               </div>
             </div>
-            <div class="card mb-4 spatnav-contain">
+            <div class="card mb-4" style="--spatial-navigation-contain: contain;">
               <img tabIndex="0" class="card-img-top" src="images/feed/5.jpg" style="height: 225px; width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
@@ -116,7 +116,7 @@
                 </div>
               </div>
             </div>
-            <div class="card mb-4 spatnav-contain">
+            <div class="card mb-4" style="--spatial-navigation-contain: contain;">
               <img tabIndex="0" class="card-img-top" src="images/feed/10.jpg" style="height: 400px; width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
@@ -133,7 +133,7 @@
 
           <!-- 3rd column starts -->
           <div class="gridcolumn mr-4">
-            <div class="card mb-4 spatnav-contain">
+            <div class="card mb-4" style="--spatial-navigation-contain: contain;">
               <img tabIndex="0" class="card-img-top" src="images/feed/6.jpg" style="height: 220px; width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -145,7 +145,7 @@
                 </div>
               </div>
             </div>
-            <div class="card mb-4 spatnav-contain">
+            <div class="card mb-4" style="--spatial-navigation-contain: contain;">
               <img tabIndex="0" class="card-img-top" src="images/feed/7.jpg" style="height: 200px; width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
@@ -157,7 +157,7 @@
                 </div>
               </div>
             </div>
-            <div class="card mb-4 spatnav-contain">
+            <div class="card mb-4" style="--spatial-navigation-contain: contain;">
               <img tabIndex="0" class="card-img-top" src="images/feed/8.jpg" style="height: 220px; width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
@@ -169,7 +169,7 @@
                 </div>
               </div>
             </div>
-            <div class="card mb-4 spatnav-contain">
+            <div class="card mb-4" style="--spatial-navigation-contain: contain;">
               <img tabIndex="0" class="card-img-top" src="images/feed/11.jpg" style="height: 220px; width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
@@ -186,7 +186,7 @@
 
           <!-- 4th column starts -->
           <div class="gridcolumn mr-4">
-            <div class="card mb-4 spatnav-contain">
+            <div class="card mb-4" style="--spatial-navigation-contain: contain;">
               <img tabIndex="0" class="card-img-top" src="images/feed/12.jpg" style="height: 300px; width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -198,7 +198,7 @@
                 </div>
               </div>
             </div>
-            <div class="card mb-4 spatnav-contain">
+            <div class="card mb-4" style="--spatial-navigation-contain: contain;">
               <img tabIndex="0" class="card-img-top" src="images/feed/13.jpg" style="height: 200px; width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
@@ -210,7 +210,7 @@
                 </div>
               </div>
             </div>
-            <div class="card mb-4 spatnav-contain">
+            <div class="card mb-4" style="--spatial-navigation-contain: contain;">
               <img tabIndex="0" class="card-img-top" src="images/feed/14.jpg" style="height: 240px; width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
@@ -231,8 +231,8 @@
     <!-- Feed Section end -->
 
     <!-- Sample Section start -->
-    <div id="sample" class="col-sm-9 spatnav-contain tabcontent" style="display: none;">
-      <iframe class="sampleFrame" src="../../sample/index.html" tabindex="0" frameborder="0" style="overflow-y: scroll;"></iframe>
+    <div id="sample" class="col-sm-9 tabcontent" style="display: none; --spatial-navigation-contain: contain;">
+      <iframe class="sampleFrame" src="../index.html" tabindex="0" frameborder="0" style="overflow-y: scroll;"></iframe>
     </div>
     <!-- Sample Section start -->
 

diff --git a/sample/index.html → demo/index.html b/sample/index.html → demo/index.html
@@ -95,13 +95,17 @@ <h2>1. Why Spatial Navigation?</h2>
     <a href="https://github.com/WICG/spatial-navigation/blob/master/README.md" title="why spatial navigation">Introduction of spatial navigation</a>
 
     <h2>2. Heuristic algorithm test cases using <a class="inline_link" href="https://github.com/WICG/spatial-navigation/tree/master/polyfill">a polyfill</a></h2>
-    <a href="heuristic_default_move.html">Default focus moving behavior</a>
-    <a href="heuristic_overflow_regions.html">Various overflow regions</a>
-    <a href="heuristic_scrollable.html">Scrollable region</a>
-    <a href="heuristic_iframe.html">iframe Element</a>
-    <a href="heuristic_input_elements.html">Input Element</a>
-    <a href="api_spatnav_contain.html">Spatial Navigation Container</a>
-  <a href="https://github.com/WICG/spatial-navigation/tree/master/sample" id="viewSource">View source on GitHub</a>
+    <a href="sample/heuristic_default_move.html">Default focus moving behavior</a>
+    <a href="sample/heuristic_overflow_regions.html">Various overflow regions</a>
+    <a href="sample/heuristic_scrollable.html">Scrollable region</a>
+    <a href="sample/heuristic_iframe.html">iframe Element</a>
+    <a href="sample/heuristic_input_elements.html">Input Element</a>
+    <a href="sample/api_spatnav_contain.html">Spatial Navigation Container</a>
+
+    <h2>3. Web Applications using <a class="inline_link" href="https://github.com/WICG/spatial-navigation/tree/master/polyfill">a polyfill</a></h2>
+    <a href="blog/index.html">Blog App</a>
+    <a href="calendar/index.html">Calender App</a>
+  <a href="https://github.com/WICG/spatial-navigation/tree/master/demo" id="viewSource">View source on GitHub</a>
 </div>
 <br><br>
 </body>

diff --git a/sample/api_spatnav_contain.html → demo/sample/api_spatnav_contain.html b/sample/api_spatnav_contain.html → demo/sample/api_spatnav_contain.html
@@ -6,12 +6,10 @@
     <meta name="application-name" content="Spatial Navigation Container">
     <meta name="author" content="Jihye Hong">
     <meta name="description" content="By default, spatial navigation container (a.k.a. spatnav container) are established by the viewport of a browsing context and scroll containers. Also, an element becomes spatnav container if it is specified with 'spatial-navigation-contain' CSS Property.">
-
     <link rel="stylesheet" href="spatnav-style.css">
     <script src="spatnav-utils.js"></script>
-    <script src="../polyfill/spatnav-heuristic.js"></script>
-    <script src="../polyfill/spatnav-api.js"></script>
-
+    <script src="../../polyfill/spatnav-heuristic.js"></script>
+    <script src="../../polyfill/spatnav-api.js"></script>
   </head>
   <body>
     <div style="width:600px; height: 400px; padding: 20px;">
@@ -22,10 +20,10 @@ <h4>
       </h4>
       <button class="box" style="top:100px; left:20px;"></button>
       <button class="box" style="top:98px; left:180px;"></button>
-      <div class="container c1" tabindex="0" style="position: relative; left:110px; width:500px; height:200px; overflow-x: scroll;">
+      <div class="container c1" tabindex="-1" style="position: relative; left:110px; width:500px; height:200px; overflow-x: scroll;">
         <button class="box b2" style="top:78px; left:25px;"></button>
         <button class="box b2" style="top:78px; left:120px;"></button>
-          <div class="container c2 spatnav-contain" style="position: relative; left:110px; width:250px; height:100px;">
+          <div class="container c2" style="position: relative; left:110px; width:250px; height:100px; --spatial-navigation-contain: contain;">
             <button class="box b3" style="top:40px; left:60px;"></button>
             <button class="box b3" style="top:30px; left:200px;"></button>
           </div>

diff --git a/.../heurisitic_candidates_same_distance.html → .../heurisitic_candidates_same_distance.html b/.../heurisitic_candidates_same_distance.html → .../heurisitic_candidates_same_distance.html
@@ -9,8 +9,8 @@
 
   <link rel="stylesheet" href="spatnav-style.css">
   <script src="spatnav-utils.js"></script>
-	<script src="../polyfill/spatnav-heuristic.js"></script>
-	<script src="../polyfill/spatnav-api.js"></script>
+	<script src="../../polyfill/spatnav-heuristic.js"></script>
+	<script src="../../polyfill/spatnav-api.js"></script>
 </head>
 <body>
 	<div tabindex="0" class="box b1" style="position: absolute; left: 80px; top: 20px;"></div>

diff --git a/sample/heuristic_default_move.html → demo/sample/heuristic_default_move.html b/sample/heuristic_default_move.html → demo/sample/heuristic_default_move.html
@@ -9,8 +9,8 @@
 
     <link rel="stylesheet" href="spatnav-style.css">
     <script src="spatnav-utils.js"></script>
-    <script src="../polyfill/spatnav-heuristic.js"></script>
-    <script src="../polyfill/spatnav-api.js"></script>
+    <script src="../../polyfill/spatnav-heuristic.js"></script>
+    <script src="../../polyfill/spatnav-api.js"></script>
   </head>
 
   <body>

diff --git a/sample/heuristic_iframe.html → demo/sample/heuristic_iframe.html b/sample/heuristic_iframe.html → demo/sample/heuristic_iframe.html
@@ -9,8 +9,8 @@
 
 	<link rel="stylesheet" href="spatnav-style.css">
   <script src="spatnav-utils.js"></script>
-	<script src="../polyfill/spatnav-heuristic.js"></script>
-	<script src="../polyfill/spatnav-api.js"></script>
+	<script src="../../polyfill/spatnav-heuristic.js"></script>
+	<script src="../../polyfill/spatnav-api.js"></script>
 </head>
 <body>
 	<iframe src="heuristic_iframe_sub.html" tabindex="0" class="container c2"></iframe>

diff --git a/sample/heuristic_iframe_sub.html → demo/sample/heuristic_iframe_sub.html b/sample/heuristic_iframe_sub.html → demo/sample/heuristic_iframe_sub.html
@@ -5,8 +5,8 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 	<link rel="stylesheet" href="spatnav-style.css">
-	<script src="../polyfill/spatnav-heuristic.js"></script>
-	<script src="../polyfill/spatnav-api.js"></script>
+	<script src="../../polyfill/spatnav-heuristic.js"></script>
+	<script src="../../polyfill/spatnav-api.js"></script>
 	<script type="text/javascript">
 	  window.addEventListener("load", function() {
 

diff --git a/sample/heuristic_input_elements.html → demo/sample/heuristic_input_elements.html b/sample/heuristic_input_elements.html → demo/sample/heuristic_input_elements.html
@@ -9,8 +9,8 @@
 
     <link rel="stylesheet" href="spatnav-style.css">
     <script src="spatnav-utils.js"></script>
-    <script src="../polyfill/spatnav-heuristic.js"></script>
-    <script src="../polyfill/spatnav-api.js"></script>
+    <script src="../../polyfill/spatnav-heuristic.js"></script>
+    <script src="../../polyfill/spatnav-api.js"></script>
 
   </head>
   <body>

diff --git a/sample/heuristic_overflow_regions.html → demo/sample/heuristic_overflow_regions.html b/sample/heuristic_overflow_regions.html → demo/sample/heuristic_overflow_regions.html
@@ -10,8 +10,8 @@
 
     <link rel="stylesheet" href="spatnav-style.css">
     <script src="spatnav-utils.js"></script>
-    <script src="../polyfill/spatnav-heuristic.js"></script>
-    <script src="../polyfill/spatnav-api.js"></script>
+    <script src="../../polyfill/spatnav-heuristic.js"></script>
+    <script src="../../polyfill/spatnav-api.js"></script>
   </head>
 
   <body>
@@ -51,12 +51,6 @@
         <button class="box" style="top: 70px; left: 50px;"></button>
         <button class="box" style="top: 180px; left: 50px;"></button>
       </div>
-
-      <div style="margin:15px; width: 250px; height: 150px; overflow: inherit; display: inline-flex;">
-        overflow: inherit
-        <button class="box" style="top: 70px; left: 50px;"></button>
-        <button class="box" style="top: 180px; left: 50px;"></button>
-      </div>
     </div>
 
     <div class="container" tabindex="0" style="height: 200px; width: 600px; overflow-y: scroll;">
@@ -67,11 +61,6 @@
         <button class="box b1" style="top: 180px; left: 50px;"></button>
       </p>
       <button class="box" style="position: absolute; top: 1350px; left: 180px;"></button>
-      <p style="margin:15px; width: 250px; height: 150px; overflow: inherit; display: inline-flex;">
-        &lt;p> tag<br> overflow: inherit
-        <button class="box" style="top: 70px; left: 50px;"></button>
-        <button class="box" style="top: 180px; left: 50px;"></button>
-      </p>
     </div>
 
     <p tabIndex=1 style="width:300px; height:100px; overflow-y:scroll; display: inline-flex;">This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br></p>

diff --git a/sample/heuristic_scrollable.html → demo/sample/heuristic_scrollable.html b/sample/heuristic_scrollable.html → demo/sample/heuristic_scrollable.html
@@ -9,11 +9,11 @@
 
   <link rel="stylesheet" href="spatnav-style.css">
   <script src="spatnav-utils.js"></script>
-	<script src="../polyfill/spatnav-heuristic.js"></script>
-	<script src="../polyfill/spatnav-api.js"></script>
+	<script src="../../polyfill/spatnav-heuristic.js"></script>
+	<script src="../../polyfill/spatnav-api.js"></script>
 </head>
 <body>
-  <div tabindex="0" class="container c1" style="overflow-y: scroll;">
+  <div class="container c1" tabindex="0" style="overflow-y: scroll;">
 		<div tabindex="0" class="box b2" style="left: 70px; top: 30px"></div>
 		<div tabindex="0" class="box b2" style="left: 50px; top: 90px"></div>
 		<div tabindex="0" class="box b2" style="left: 130px; top: 267px"></div>

diff --git a/sample/images/login_img.png → demo/sample/images/login_img.png b/sample/images/login_img.png → demo/sample/images/login_img.png
diff --git a/sample/spatnav-style.css → demo/sample/spatnav-style.css b/sample/spatnav-style.css → demo/sample/spatnav-style.css
diff --git a/sample/spatnav-utils.js → demo/sample/spatnav-utils.js b/sample/spatnav-utils.js → demo/sample/spatnav-utils.js
diff --git a/index.bs b/index.bs
@@ -996,7 +996,8 @@ Navigation</h3>
 There can be a <dfn>spatial navigation starting point</dfn>. It is initially unset.
 The user agent may set it when the user indicates that it should be moved.
 
-Note: For example, the user agent could set it to the position of the user's click if the user clicks on the document contents.
+Note: For example, the user agent could set it to the position of the user's click if the user clicks on the document contents,
+and unset when the focus is moved (by spatial navigation or any other means).
 
 If the UA sets both a <a>spatial navigation starting point</a> and a <a>sequential focus navigation starting point</a>,
 they must not be set differently.