Merge pull request w3c#4 from WICG/master

Merge from WICG master

Author: jeonghee27

README.md

@@ -10,7 +10,7 @@ This is a repository for making the Web excellently embrace the spatial navigati
 * Give feedback on [issues](https://github.com/WICG/spatial-navigation/issues) or via [email](mailto://lgewst@gmail.com)
 
 ## 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.
+**Spatial navigation** 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.
 
 Regarding TV remote control, game console pad, IVI jog dial with 4-way keys, and Web accessibility, the spatial navigation has been a rising important input mechanism in several industries. If the Web can embrace the spatial navigation and efficiently support the functionalities in Web engines and W3C APIs, it will be more promising technology for existing products as mentioned above and various upcoming smart devices.
 
@@ -20,33 +20,33 @@ Prior to the mission explanation, we need to understand how the arrow keys work
 In spatial navigation mode, the default behavior of arrow keys is changed from scrolling behavior to focus moving so that users can use the arrow keys to navigate between focusable elements based on their position. To support the functionalities of the spatial navigation, we should consider the following three steps:
 1. A heuristic algorithm for the spatial navigation supported in Web engines
 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.)
+3. The relevant API for efficiently supporting the spatial navigation (Setting the spatial navigation 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.
 
 ## FAQ
-**Q. I’m not sure how the Spatnav (directional) navigation works.**
-- You can see the video that shows the Spatnav operations in the YouTube page ([link](https://www.youtube.com/watch?v=TzDtcX9urUg)).
-- You can see the brief description for the Spatnav in Wikipedia ([link](https://en.wikipedia.org/wiki/Spatial_navigation)).
-- In several references below, you can get the help to understand the Spatnav operations well.
+**Q. I’m not sure how the spatial navigation works.**
+- You can see the video that shows the spatial navigation operations in the YouTube page ([link](https://www.youtube.com/watch?v=TzDtcX9urUg)).
+- You can see the brief description for the spatial navigation in Wikipedia ([link](https://en.wikipedia.org/wiki/Spatial_navigation)).
+- In several references below, you can get the help to understand the spatial navigation operations well.
 
 **Q. Isn’t it enough just using the relevant Web frameworks?**
-- Several Web frameworks and extensions for the Spatnav have been provided so far due to no support from web engines. For examples, [js-spatial-navigation](https://github.com/luke-chang/js-spatial-navigation) made by Mozilla seems one of the frameworks and its quality would be good to support the features of Spatnav. [Spotlight library](https://github.com/enyojs/spotlight) implemented by LGE is also an instance of the frameworks for the Spatnav, even though it was deprecated now. However, the support of Spatnav from Web frameworks has some limits as follows:
+- Several Web frameworks and extensions for the spatial navigation have been provided so far due to no support from web engines. For examples, [js-spatial-navigation](https://github.com/luke-chang/js-spatial-navigation) made by Mozilla seems one of the frameworks and its quality would be good to support the features of the spatial navigation. [Spotlight library](https://github.com/enyojs/spotlight) implemented by LGE is also an instance of the frameworks for the spatial navigation, even though it was deprecated now. However, the support of spatial navigation from Web frameworks has some limits as follows:
   - Difficult to align native scroll behavior when moving the focus to an element out of view
   - Difficult to align native focus method for a11y support
   - Performance degradation due to the expensive cost of DOM Access
   - Inconsistency of user experience (various kinds of frameworks)
   - Impossible to control isolated frames like iframe and shadow DOM
 
-**Q. The Spatnav seems not the general feature esp. in mobile with no physical key-based interface.**
-- Honestly, the mobile has been a first citizen of Spatnav about ten years old. Before touch-based interface, the majority of interface for mobile was the key-based interface. We're familiar with kind of mobile phone named a feature phone, and it has been supported in several developing countries such as South America, Africa even until now.
+**Q. The spatial navigation seems not the general feature esp. in mobile with no physical key-based interface.**
+- Honestly, the mobile has been a first citizen of the spatial navigation about ten years old. Before touch-based interface, the majority of interface for mobile was the key-based interface. We're familiar with kind of mobile phone named a feature phone, and it has been supported in several developing countries such as South America, Africa even until now.
 
 - In the future, the input mechanism for smart devices will change to something like voice command, hand gesture, and gaze direction, but the key-based interface will never disappear, even though it'll be used as a secondary method. The key-based interface used to be evaluated as one of the most intuitive ways with a strong sense feedback of finger after pushing a key, while we couldn't imagine a touch-based keyboard without any physical keys.
 
 **Q. Put any question on [issues](https://github.com/WICG/spatial-navigation/issues) of this repository :D**
-- Everything for Spatnav is welcome!
+- Everything for the spatial navigation is welcome!
 
 ## Reference
 - JavaScript Spatial Navigation (Mozilla)

demo/index.html

@@ -134,22 +134,22 @@ <h3 id="input-elements">* &lt;input&gt; elements</h3>
 
             <h3 id="spatnav-container">* Spatial navigation container</h3>
             <p class="iframe-description"></p>
-            <iframe src="sample/api_spatnav_contain.html"></iframe>
+            <iframe src="sample/api_spatial_navigation_contain.html"></iframe>
           </div>
 
           <div class="card-view">
             <h2 tabIndex="0" id="api">3. API</h2>
-            <h3 id="getSpatnavContainer">* getSpatnavContainer() <a href="https://wicg.github.io/spatial-navigation/#dom-element-getspatnavcontainer" target="_blank"><img src="link.png" width="20px"/></a></h3>
+            <h3 id="getSpatnavContainer">* getSpatialNavigationContainer() <a href="https://wicg.github.io/spatial-navigation/#dom-element-getspatialnavigationcontainer" target="_blank"><img src="link.png" width="20px"/></a></h3>
             <p class="iframe-description"></p>
-            <iframe src="sample/api_getSpatnavContainer.html"></iframe>
+            <iframe src="sample/api_getSpatialNavigationContainer.html"></iframe>
 
             <h3 id="focusableAreas">* focusableAreas(optional focusableAreasOptions) <a href="https://wicg.github.io/spatial-navigation/#dom-element-focusableareas" target="_blank"><img src="link.png" width="20px"/></a></h3>
             <p class="iframe-description"></p>
             <iframe src="sample/api_focusableAreas.html"></iframe>
 
-            <h3 id="spatNavSearch">* spatNavSearch(arg) <a href="https://wicg.github.io/spatial-navigation/#dom-element-spatnavsearch" target="_blank"><img src="link.png" width="20px"/></a></h3>
+            <h3 id="spatNavSearch">* spatialNavigationSearch() <a href="https://wicg.github.io/spatial-navigation/#dom-element-spatialnavigationsearch" target="_blank"><img src="link.png" width="20px"/></a></h3>
             <p class="iframe-description"></p>
-            <iframe class="api-sample" src="sample/api_spatNavSearch.html"></iframe>
+            <iframe class="api-sample" src="sample/api_spatialNavigationSearch.html"></iframe>
 
             <h3 id="navigate">* navigate(dir) <a href="https://wicg.github.io/spatial-navigation/#dom-window-navigate" target="_blank"><img src="link.png" width="20px"/></a></h3>
             <p class="iframe-description"></p>

demo/sample/api_getSpatnavContainer.html renamed to demo/sample/api_getSpatialNavigationContainer.html

@@ -3,10 +3,10 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="application-name" content="API : getSpatnavContainer()">
+    <meta name="application-name" content="API : getSpatialNavigationContainer()">
     <meta name="author" content="jeonghee Ahn">
-    <meta name="description" content="element.getSpatnavContainer() returns the nearest ancestor node which is the spatial navigation container (a.k.a. spatnav container).
-    You can check the result of element.getSpatnavContainer() via <b>'background-color' and 'red outline' whenever focus is changed.</b>">
+    <meta name="description" content="element.getSpatialNavigationContainer() returns the nearest ancestor node which is the spatial navigation container.
+    You can check the result of element.getSpatialNavigationContainer() via <b>'background-color' and 'red outline' whenever focus is changed.</b>">
     <link rel="stylesheet" href="spatnav-style.css">
     <script src="spatnav-utils.js"></script>
     <script src="../../polyfill/spatnav-heuristic.js"></script>
@@ -26,7 +26,7 @@
               previousContainer.style.background = previousBackground;
               previousContainer.style.outline = '';
             }
-            const spatnavContainer = e.target.getSpatnavContainer();
+            const spatnavContainer = e.target.getSpatialNavigationContainer();
             previousBackground = spatnavContainer.style.background;
             spatnavContainer.style.background = '#F0808099';
             spatnavContainer.style.outline = '5px red solid';
@@ -65,10 +65,10 @@ <h4>
       <button class="box" style="top:-120px; left:650px;"></button>
     </div>
     <pre class="code-area">
-      <code>        // Node getSpatnavContainer()
+      <code>        // Node getSpatialNavigationContainer()
         console.log(focusables);
         focusable.addEventListener('focus', function(e) {
-          let spatnavContainer = e.target.getSpatnavContainer();
+          let spatnavContainer = e.target.getSpatialNavigationContainer();
           spatnavContainer.style.background = '#F0808099';
           spatnavContainer.style.outline = '5px red solid';
           console.log(spatnavContainer);

demo/sample/api_navigate.html

@@ -19,7 +19,7 @@
         console.log('========init=======');
         const WASD_KEY_CODE = {65: 'left', 87: 'up', 68: 'right', 83: 'down'}
 
-        // Turn on spatnav heuristic
+        // Turn on the spatial navigation heuristic
         const container = document.getElementsByClassName('container c1')[0];
         container.addEventListener('keydown', function(e) {
           const dir = WASD_KEY_CODE[e.keyCode];

demo/sample/api_spatNavSearch.html renamed to demo/sample/api_spatialNavigationSearch.html

@@ -3,10 +3,10 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="application-name" content="API :spatNavSearch()">
+    <meta name="application-name" content="API :spatialNavigationSearch()">
     <meta name="author" content="jeonghee Ahn">
-    <meta name="description" content="element.spatNavSearch(SpatNavSearchOptions) returns the best candidate which will gain the focus.
-    You can check the result of element.spatNavSearch() as <b>'border-color' whenever the container gains the focus.</b>">
+    <meta name="description" content="element.spatialNavigationSearch(SpatialNavigationSearchOptions) returns the best candidate which will gain the focus.
+    You can check the result of element.spatialNavigationSearch() as <b>'border-color' whenever the container gains the focus.</b>">
     <link rel="stylesheet" href="spatnav-style.css">
     <script src="spatnav-utils.js"></script>
     <script src="../../polyfill/spatnav-heuristic.js"></script>
@@ -24,14 +24,14 @@
         const focusables = document.body.focusableAreas({'mode': 'all'});
 
         for(focusable of focusables) {
-          focusable.addEventListener('focus', callSpatNavSearch);
+          focusable.addEventListener('focus', callSpatialNavigationSearch);
         }
         redBoxes = [...document.getElementsByClassName('b2')];
         redContainer = document.getElementsByClassName('container c1')[0];
         onChangeSelect();
       };
 
-      function callSpatNavSearch(e) {
+      function callSpatialNavigationSearch(e) {
         const selectedOption = document.getElementById('option').value;
         const currentElement = e.target;
         if(previousTarget) {
@@ -42,16 +42,16 @@
           }
         }
 
-        let SpatNavSearchOptions;
+        let SpatialNavigationSearchOptions;
 
         for(let dir of DIRECTION) {
           let nextTarget;
           if (selectedOption === 'dir') {
-            nextTarget = currentElement.spatNavSearch(dir);
+            nextTarget = currentElement.spatialNavigationSearch(dir);
           } else if (selectedOption === 'candidates') {
-            nextTarget = currentElement.spatNavSearch(dir, redBoxes);
+            nextTarget = currentElement.spatialNavigationSearch(dir, redBoxes);
           } else if (selectedOption === 'container') {
-            nextTarget = currentElement.spatNavSearch(dir, redBoxes, redContainer);
+            nextTarget = currentElement.spatialNavigationSearch(dir, redBoxes, redContainer);
           }
 
           if(nextTarget && nextTarget.nodeName === 'BUTTON') {
@@ -75,17 +75,17 @@
           }
 
           let codeElement = document.getElementById('code');
-          codeElement.innerText =`          // Node spatNavSearch(SpatNavSearchOptions arg);
-          nextTarget = currentElement.spatNavSearch(${selectedOptionString.left});
+          codeElement.innerText =`          // Node spatialNavigationSearch(SpatialNavigationSearchOptions arg);
+          nextTarget = currentElement.spatialNavigationSearch(${selectedOptionString.left});
           if (nextTarget)
             nextTarget.style.innerHTML = '◀';
-          nextTarget = currentElement.spatNavSearch(${selectedOptionString.right});
+          nextTarget = currentElement.spatialNavigationSearch(${selectedOptionString.right});
           if (nextTarget.right)
             nextTarget.style.innerHTML = '▶';
-          nextTarget = currentElement.spatNavSearch(${selectedOptionString.up});
+          nextTarget = currentElement.spatialNavigationSearch(${selectedOptionString.up});
           if (nextTarget.up)
             nextTarget.style.innerHTML = '▲';
-          nextTarget = currentElement.spatNavSearch(${selectedOptionString.down});
+          nextTarget = currentElement.spatialNavigationSearch(${selectedOptionString.down});
           if (nextTarget.down)
             nextTarget.style.innerHTML = '▼';`
 

demo/sample/api_spatnav_contain.html renamed to demo/sample/api_spatial_navigation_contain.html

@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="application-name" content="Spatial Navigation Container">
     <meta name="author" content="Jihye Hong">
-    <meta name="description" content="By default, <b>spatial navigation container (a.k.a. spatnav container)</b> 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.">
+    <meta name="description" content="By default, <b>spatial navigation container</b> are established by the viewport of a browsing context and scroll containers.
+    Also, an element becomes a spatial navigation 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>

demo/sample/heuristic_inert_attribute.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="application-name" content="inert attribute">
+	<meta name="author" content="Jihye Hong">
+	<meta name="description" content="Element which has the value of inert is true is considered as a non-focusable element.
+		It is shown in the page, but it's impossible to interact with it.">
+	<link rel="stylesheet" href="spatnav-style.css">
+	<script src="spatnav-utils.js"></script>
+	<script src="../../polyfill/spatnav-heuristic.js"></script>
+</head>
+<body>
+	<div class="container" style="width:600px; height:500px;">
+	  <input type="text" value="You can edit this element"><br>
+	  <input id="option" type="checkbox">Check this to edit the forms below:
+
+		<br><br>
+		<div id="inert_elm" inert style="border: 1px solid gray; padding: 10px; opacity: 0.5;">
+			<textarea>type something</textarea><br>
+			<input type="radio" name="radio1" checked> radio1
+			<input type="radio" name="radio1" > radio2
+			<input type="radio" name="radio1" > radio3
+			<br><br>
+		  <select>
+		    <option>Hi</option>
+		    <option>Ho</option>
+			</select>
+		</div>
+	</div>
+</body>
+<script type="text/javascript">
+	const el = document.querySelector('#inert_elm');
+	let check_box = document.getElementById('option');
+
+	if(check_box.checked)
+		applyInert(el, check_box.checked);
+
+	check_box.onchange = function() {
+		applyInert(el, check_box.checked);
+	}
+
+	function applyInert(elm, boolean) {
+		if (boolean) {
+			elm.inert = false;
+			elm.style.opacity = '1';
+		} else {
+			elm.inert = true;
+			elm.style.opacity = '0.5';
+		}
+	}
+</script>
+</html>

demo/sample/heuristic_input_elements.html

@@ -57,6 +57,40 @@
       <div><p class="label">range</p><input type="range"></div>
       <div><p class="label">time</p><input type="time"></div>
       <div><p class="label">week</p><input type="week"></div>
+      <div><p class="label">datalist</p>
+        <form>
+          <input list="browsers" name="browser">
+          <datalist id="browsers">
+            <option value="Edge">
+            <option value="Firefox">
+            <option value="Chrome">
+            <option value="Opera">
+            <option value="Safari">
+          </datalist>
+        </form>
+      </div>
+      <div><p class="label">select</p>
+        <select>
+          <option value="edge">Edge</option>
+          <option value="firefox">Firefox</option>
+          <option value="chrome">Chrome</option>
+          <option value="opera">Opera</option>
+          <option value="safari">Safari</option>
+        </select>
+      </div>
+      <div><p class="label">optgroup</p>
+        <select>
+          <optgroup label="Swedish Cars">
+            <option value="volvo">Volvo</option>
+            <option value="saab">Saab</option>
+          </optgroup>
+          <optgroup label="German Cars">
+            <option value="mercedes">Mercedes</option>
+            <option value="audi">Audi</option>
+          </optgroup>
+        </select>
+      </div>
+    <!--end of the list -!>
     </div>
   </body>
 </html>