-    document.addEventListener("navbeforefocus", function(e) {
+    document.addEventListener('navbeforefocus', function(e) {
         e.preventDefault();
 
-        if (e.dir === "forward" || e.dir === "backward") {
-            e.dir = "top";
-        }
-
-        var t = e.relatedTarget;
-        while (t.isSameNode(t.getSpatialNavigationContainer())) {
-            var areas = t.focusableAreas();
+        let target = e.relatedTarget;
+        while (target.isSameNode(target.getSpatialNavigationContainer())) {
+            const areas = target.focusableAreas();
 
             if (areas.length === 0) { break; }
 
-            t = t.spatialNavigationSearch({
+            target = target.spatialNavigationSearch({
                 dir:  e.dir,
                 candidates: areas
             });
@@ -571,44 +565,45 @@ and the result will be null.
 
 

     The following code changes the behavior of spatial navigation
-    to trap the focus within a spatial navigation container:
+    to trap the focus within a spatial navigation container:
     when no further focusable elements can be found in the requested direction
-    and the spatial navigation container cannot be scrolled any futher,
-    we loop back to the other side instead of searching outside of it,
+    and the spatial navigation container cannot be scrolled any further,
+    the focus loops back to the other side instead of moving outside of it,
     either by focusing or scrolling depending on what is available.
 
-    The focus can still be moved outside by sequential navigation,
+    However, the focus can still be moved outside by sequential navigation,
     mouse interaction,
-    programmatic calls to {{focus()}}…
+    and programmatic calls to {{focus()}}…
 
     

-    document.addEventListener("navnotarget", function(e) {
+    document.addEventListener('navnotarget', function(e) {
         e.preventDefault();
 
-        var c = e.relatedTarget;
-        var areas = c.focusableAreas({mode: "all"});
+        const container = e.relatedTarget;
+        const areas = container.focusableAreas({mode: 'all'});
 
         if (areas.length === 0) {
             switch (e.dir) {
-                case "down":
-                    c.scrollTop = 0;
+                case 'down':
+                    container.scrollTop = 0;
                     break;
-                case "up":
-                    c.scrollTop = c.scrollHeight;
+                case 'up':
+                    container.scrollTop = container.scrollHeight;
                     break;
-                case "right":
-                    c.scrollLeft = 0;
+                case 'right':
+                    container.scrollLeft = 0;
                     break;
-                case "left":
-                    c.scrollLeft = c.scrollWidth;
+                case 'left':
+                    container.scrollLeft = container.scrollWidth;
                     break;
             }
         } else {
-            var t = c.spatialNavigationSearch({
+            const target = container.spatialNavigationSearch({
                 dir: e.dir,
                 candidates: areas
             });
-            t.focus();
+            target.focus();
+        }
     });
     
 
@@ -922,7 +917,7 @@ if a suitable one cannot be found inside it (see [[#nav]] for details).
 
 Such groupings are called spatial navigation focus containers.
 
-By default, spatial navigation containers are established by:
+By default, spatial navigation containers(same with spatial navigation focus container) are established by:
 * The viewport of a browsing context
     (not limited to the top-level browsing context)
 
@@ -1476,6 +1471,5 @@ The editors of this specification would like to thank the following individuals
 * Hyojin Song
 * Jeonghee Ahn
 * Junho Seo
-
 * Rob Dodson
 * Seungcheon Baek

From cdac475ee0c7d83e0f4e2bd68e300e55be50d2b0 Mon Sep 17 00:00:00 2001
From: Jihye Hong 
Date: Wed, 3 Apr 2019 15:00:25 +0900
Subject: [PATCH 06/11] Minor fix related to indentations

---
 css-nav-1/Overview.bs | 62 ++++++++++++++++++++++++-------------------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/css-nav-1/Overview.bs b/css-nav-1/Overview.bs
index 637137fe2f4..0e5e95bd251 100644
--- a/css-nav-1/Overview.bs
+++ b/css-nav-1/Overview.bs
@@ -9,7 +9,7 @@ ED: https://drafts.csswg.org/css-nav-1/
 Editor: Jihye Hong, LG Electronics, jh.hong@lge.com
 Editor: Florian Rivoal, Invited Expert, https://florian.rivoal.net
 Abstract: This specification defines a general model for navigating the focus using the arrow keys,
-    as well as related CSS and JavaScript features.
+    as well as related CSS, JavaScript features and Events.
 At risk: {{getSpatialNavigationContainer()}}
 At risk: {{focusableAreas()}}
 At risk: 'spatial-navigation-contain'
@@ -232,8 +232,9 @@ this specification also defines JavaScript APIs
 that expose key constructs of the underlying model.
 
 
-See [[#events-nav-type]] for details about the various events,
-and [[#js-api]] for details about the JavaScript API.
+See [[#js-api]] for details about the JavaScript API,
+[[#events-nav-type]] for details about the various events,
+and [[#declarative]] for details about the CSS properties.
 
 
 

@@ -309,6 +310,7 @@ This intentionally left for User Agents to decide.
 
Note:
     It is expected that User Agents on devices with limited input capabilities,
     such as TVs operated with a remote control,
+    or smart feature phones,
     or devices operated with a game controller,
     will use spatial navigation as their primary or exclusive navigation mechanism.
 
@@ -499,16 +501,16 @@ The {{Element/focusableAreas()}} method must follow these steps:
 
     

     <body>
-        <button class="box" style="top:100px; left:20px;"></button>
-        <div class="container" style="left:110px; width:300px; height:200px; overflow-x: scroll;">
-            <button class="box" style="top:78px; left:25px;"></button>
-            <button class="box" style="top: 80px; left:150px;"></button>
-            <button class="box" style="top: 80px; left:350px;"></button>
+        <button class="box"></button>
+        <div class="container" style="width:300px; height:200px; overflow-x: scroll;">
+            <button class="box" style="left:25px;"></button>
+            <button class="box" style="left:150px;"></button>
+            <button class="box" style="left:350px;"></button>
         </div>
     </body>
     
     

-        const focusableAreas = document.body.focusableAreas({'mode': 'visible'});
+        const focusableAreas = document.body.focusableAreas({mode: 'visible'});
         focusableAreas && focusableAreas.forEach(focusable => {
           focusable.style.outline = '5px solid red';
         });
@@ -522,13 +524,13 @@ The {{Element/focusableAreas()}} method must follow these steps:
 
 

 The {{Element/spatialNavigationSearch()}} method must follow these steps:
-1. Let d be the argument's {{SpatialNavigationSearchOptions/dir}} attribute
+1. Let direction be the argument's {{SpatialNavigationSearchOptions/dir}} attribute
 2. If the argument's {{SpatialNavigationSearchOptions/candidates}} attribute is not null,
     then let areas be that attribute,
     else, let areas be the result of finding focusable areas
     within the argument's {{SpatialNavigationSearchOptions/container}} attribute is not null,
     or the element's nearest spatial navigation container ancestor
-3. Return the result of selecting the best candidate within areas in direction d from the element
+3. Return the result of selecting the best candidate within areas in direction direction from the element
 
 Note: When neither a container nor a list of candidates is provided,
 this only searches through the visible focusable areas of the nearest
@@ -551,14 +553,14 @@ and the result will be null.
         while (target.isSameNode(target.getSpatialNavigationContainer())) {
             const areas = target.focusableAreas();
 
-            if (areas.length === 0) { break; }
+            if (areas.length === 0) { target.navigate(e.dir); }
 
             target = target.spatialNavigationSearch({
                 dir:  e.dir,
                 candidates: areas
             });
         }
-        t.focus();
+        target.focus();
     });
     
 
@@ -967,10 +969,12 @@ To run the spatial navigation steps in direction, do the f
             1. Let bestCandidate be the result of selecting the best candidate
                 within candidates in direction starting from searchOrigin
             2. If navigation-override is enabled in the [=node document=] of eventTarget for the origin of the [=active document=] of the [=top-level browsing context=], then
-                fire an event named navbeforefocus at eventTarget using {{NavigationEvent}}
-                with its {{NavigationEvent/dir}} set to direction and {{NavigationEvent/relatedTarget}} set to bestCandidate
-                and with it's bubbles and cancelable attributes set to true,
-                and return if the result is false
+                fire an event named navbeforefocus at eventTarget using {{NavigationEvent}} with:
+                * Set {{NavigationEvent/dir}} to direction
+                * Set {{NavigationEvent/relatedTarget}} to bestCandidate
+                * Set bubbles and cancelable attributes to true
+
+                and return if the result is false.
             3. Run the focusing steps for bestCandidate and return
         * Else if eventTarget can be manually scrolled, directionally scroll the element 
           eventTarget in direction and return.
@@ -983,9 +987,11 @@ To run the spatial navigation steps in direction, do the f
        container in direction and return.
     * Else,
         1. If navigation-override is enabled in the [=node document=] of eventTarget for the origin of the [=active document=] of the [=top-level browsing context=], then
-            fire an event named navnotarget at eventTarget using {{NavigationEvent}}
-            with its {{NavigationEvent/dir}} set to direction and {{NavigationEvent/relatedTarget}} set to container
-            and with it's bubbles and cancelable attributes set to true,
+            fire an event named navnotarget at eventTarget using {{NavigationEvent}} with:
+            * Set {{NavigationEvent/dir}} to direction
+            * Set {{NavigationEvent/relatedTarget}} to container
+            * Set bubbles and cancelable attributes to true
+
             and return if the result is false.
         2.
             * If container is the document element of the top-level browsing context,
@@ -999,13 +1005,15 @@ To run the spatial navigation steps in direction, do the f
             * Else, set container to its closest ancestor that is itself a spatial navigation container
                 and return to the step labeled loop.
 9. Let bestCandidate be the result of selecting the best candidate
-    within candidates in direction starting from searchOrigin
+    within candidates in direction starting from searchOrigin.
 10. If navigation-override is enabled in the [=node document=] of eventTarget for the origin of the [=active document=] of the [=top-level browsing context=], then
-    fire an event named navbeforefocus at eventTarget using {{NavigationEvent}}
-    with its {{NavigationEvent/dir}} set to direction and {{NavigationEvent/relatedTarget}} set to bestCandidate
-    and with it's bubbles and cancelable attributes set to true,
-    and return if the result is false
-11. Run the focusing steps for bestCandidate and return
+    fire an event named navbeforefocus at eventTarget using {{NavigationEvent}} with: 
+    * Set {{NavigationEvent/dir}} to direction
+    * Set {{NavigationEvent/relatedTarget}} to bestCandidate
+    * Set bubbles and cancelable attributes to true
+    
+    and return if the result is false.
+11. Run the focusing steps for bestCandidate and return.
 
 
 
@@ -1099,7 +1107,7 @@ run the following steps:
 
     Note: this sub-setting is necessary to avoid going in the opposite direction than the one requested.
 5.
-    * If insiders is non empty
+    * If insiders is non empty,
         1. Let closest subset be the subset of insiders whose boundary box's
             * top edge is closest to the top edge of insideArea if dir is {{SpatialNavigationDirection/down}}
             * bottom edge is closest to the bottom edge of insideArea if dir is {{SpatialNavigationDirection/up}}

From 405c581171defeff7b13c2d4d14f512aa56bbfd3 Mon Sep 17 00:00:00 2001
From: Jihye Hong 
Date: Wed, 3 Apr 2019 15:35:23 +0900
Subject: [PATCH 07/11] Fix the misspelled words

---
 css-nav-1/Overview.bs | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/css-nav-1/Overview.bs b/css-nav-1/Overview.bs
index 0e5e95bd251..5e9609f9d4a 100644
--- a/css-nav-1/Overview.bs
+++ b/css-nav-1/Overview.bs
@@ -149,7 +149,7 @@ based on feedback and experience acquired through such JavaScript usage.
 Note: A few features are marked at-risk.
 The editors of this specification believe
 they represent an important part of the user or author experience
-of the features defined in specification.
+of the features defined in the specification.
 At the same time, the core functionality of this specification
 can be implemented without implementing these
 so it seems possible that implementors may choose to down-prioritize them
@@ -524,13 +524,14 @@ The {{Element/focusableAreas()}} method must follow these steps:
 
 

 The {{Element/spatialNavigationSearch()}} method must follow these steps:
-1. Let direction be the argument's {{SpatialNavigationSearchOptions/dir}} attribute
+1. Let direction be the argument's {{SpatialNavigationSearchOptions/dir}} attribute.
 2. If the argument's {{SpatialNavigationSearchOptions/candidates}} attribute is not null,
-    then let areas be that attribute,
-    else, let areas be the result of finding focusable areas
-    within the argument's {{SpatialNavigationSearchOptions/container}} attribute is not null,
-    or the element's nearest spatial navigation container ancestor
-3. Return the result of selecting the best candidate within areas in direction direction from the element
+    then let areas be that attribute.
+3. Else, let container be
+    * the argument's {{SpatialNavigationSearchOptions/container}} attribute, if it is not null,
+    * the element's nearest spatial navigation container ancestor, otherwise.
+4. Let areas be the result of finding focusable areas within container.
+3. Return the result of selecting the best candidate within areas in direction direction from the element.
 
 Note: When neither a container nor a list of candidates is provided,
 this only searches through the visible focusable areas of the nearest
@@ -1011,7 +1012,7 @@ To run the spatial navigation steps in direction, do the f
     * Set {{NavigationEvent/dir}} to direction
     * Set {{NavigationEvent/relatedTarget}} to bestCandidate
     * Set bubbles and cancelable attributes to true
-    
+
     and return if the result is false.
 11. Run the focusing steps for bestCandidate and return.
 
@@ -1116,7 +1117,7 @@ run the following steps:
         2. If closest subset contains a single item,
             return that item,
             else return the first item of closest subset in document order,
-            unless its [=boundary box=] overlaps with the [=boundary box=] of an other item
+            unless its [=boundary box=] overlaps with the [=boundary box=] of another item
             and that item is higher in the CSS [=painting order=].
             In that case, return that item instead,
             unless it too is overlapped with another higher item, recursively.
@@ -1147,14 +1148,14 @@ run the following steps:
 To calculate the distance, the function is defined as below:
 
 
-    distance = euclidian + displacement - alignment - sqrt(Overlap)
+    distance = euclidean + displacement - alignment - sqrt(Overlap)
 
 
 The meaning of each factor in the function is as follows:
 
 

-    
euclidian
-    
The euclidian distance between P1 and P2
+    
euclidean
+    
The euclidean distance between P1 and P2
 
     
displacement
     
The degree of displacement in dir between searchOrigin and candidate
@@ -1323,12 +1324,12 @@ Note: In addition, as per [[#grouping]], the viewport of a browsing c
         button { align-self: center; }
     

-[Constructor(DOMString type, optional NavigationEventInit eventInitDict)]
+[Exposed=Window,
+  Constructor (DOMString type, optional NavigationEventInit eventInitDict)]
 interface NavigationEvent : UIEvent {
-      readonly attribute SpatialNavigationDirection dir;
-      readonly attribute EventTarget? relatedTarget;
+    readonly attribute SpatialNavigationDirection dir;
+    readonly attribute EventTarget? relatedTarget;
 };
 
 dictionary NavigationEventInit : UIEventInit {
-      required SpatialNavigationDirection dir;
-      EventTarget? relatedTarget = null;
+    SpatialNavigationDirection dir;
+    EventTarget? relatedTarget = null;
 };
 

@@ -1054,7 +1054,7 @@ run the following steps:
 2. The User Agent should remove from focusables items that have a [=DOM anchor=] whose tabindex attribute is set to a negative value.
 
     Note: This is a "SHOULD" in order to mirror the exclusion of elements with negative tabindex
-    from the sequential focus navigation order as defined in [[HTML#the-tabindex-attribute]].
+    from the sequential focus navigation order as defined in [[HTML#attr-tabindex]].
 3. If visibleOnly is false,
     return focusables.
 
@@ -1078,7 +1078,7 @@ run the following steps:
     authors should use make these elements unreachable to spatial navigation
     using the same best practices as for making elements unreachable to sequential navigation,
     such as using tab-index="-1"
-    or the inert attribute.
+    or the inert attribute.