Refine the spec

* Modify the code example
* Modify for the clear description

Author: Jihye Hong

css-nav-1/Overview.bs

@@ -327,8 +327,8 @@ even if the author has not invoked any of the APIs.
 Regardless of the actual mechanism chosen to trigger spatial navigation,
 the following requirements apply:
 * If the mechanism the user must use to trigger spatial navigation
-    would normally fire a {{UIEvent}},
-    then that event must be fired prior to running the <a>spatial navigation steps</a>
+    would normally fire a {{UIEvent}}.
+    The event must be fired prior to running the <a>spatial navigation steps</a>
     and these steps must not be run if that event's <a>canceled flag</a>
     gets set.
 
@@ -348,8 +348,8 @@ the following requirements apply:
         would follow the same sequence.
     </div>
 * If the mechanism the user must use to trigger spatial navigation
-    would in some contexts trigger other actions,
-    the User Agent should in these contexts
+    would trigger other actions in some contexts.
+    The User Agent should in these contexts
     give priority to these other actions
     and execute them instead of spatial navigation.
     It must not trigger both.
@@ -403,12 +403,12 @@ the same chain of events will be fired and
 the same element will be scrolled or focused.
 
 Note: Authors can use this to trigger spatial navigation
-based on a different UI mechanism than the one assigned by the User Agent,
-such as mapping to different keys,
-or triggering spatial navigation from a clickable on-screen directional pad.
+based on a different UI mechanism than the one assigned by the User Agent.
+Such as mapping to different keys,
+or triggering spatial navigation from a clickable on-screen directional pad,
 or in reaction to other events than UI ones.
 It could also be used when an author wants to interrupt navigation to do some asynchronous operation
-(e.g. load more content in an infinite scroller) then resume where they cancelled.
+(e.g. load more content in an infinite scroller) then resume the navigation where they cancelled.
 
 Note: This API is also useful for testing purposes,
 as there is no other way to trigger spatial navigation
@@ -486,11 +486,9 @@ The {{Element/focusableAreas()}} method must follow these steps:
     if the argument's {{FocusableAreasOptions/mode}} attribute is present and equal to <code>'all'</code>,
     or <code>true</code> otherwise.
 2. Let <var>areas</var> be the result of <a>finding focusable areas</a> within the element with the <var>visibleOnly</var> argument.
-3. Loop: If there is a <a>spatial navigation container</a> <var>container</var> among <var>areas</var>,
-    then add the result of <a>finding focusable areas</a> to <var>areas</var> within the <var>container</var>.
-5. Let <var>anchors</var> be a <a for=list>clone</a> of <var>areas</var>,
+3. Let <var>anchors</var> be a <a for=list>clone</a> of <var>areas</var>,
     with every <a>focusable area</a> which is not itself a <a>Node</a> replaced with its <a>DOM anchor</a>.
-6. Return <var>anchors</var>
+4. Return <var>anchors</var>
 </div>
 
 <div class=example id=focusAreas-visible>
@@ -530,12 +528,12 @@ The {{Element/spatialNavigationSearch()}} method must follow these steps:
     else, let <var>areas</var> be the result of <a>finding focusable areas</a>
     within the argument's {{SpatialNavigationSearchOptions/container}} attribute is not <code>null</code>,
     or the element's nearest <a>spatial navigation container</a> ancestor
-4. Return the result of <a>selecting the best candidate</a> within <var>areas</var> in direction <var>d</var> from the element
+3. Return the result of <a>selecting the best candidate</a> within <var>areas</var> in direction <var>d</var> 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
 <a>spatial navigation container</a> ancestor.
-<strong>If none are found, this does not climb further up the ancestry chain,
+<strong>If there isn't any eligible element to navigate, this does not climb further up the ancestry chain,
 and the result will be <code>null</code>.</strong>
 </div>
 
@@ -546,20 +544,16 @@ and the result will be <code>null</code>.</strong>
     the focus is automatically transferred to it.
 
     <pre><code highlight=javascript>
-    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 <code>null</code>.</strong>
 
 <div class=example id=loop>
     The following code changes the behavior of spatial navigation
-    to trap the focus within a spatial navigation container:
+    to trap the focus within a <a>spatial navigation container</a>:
     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 <a>spatial navigation container</a> 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()}}…
 
     <pre><code highlight=javascript>
-    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();
+        }
     });
     </code></pre>
 </div>
@@ -922,7 +917,7 @@ if a suitable one cannot be found inside it (see [[#nav]] for details).
 
 Such groupings are called <dfn lt="spatial navigation focus container | spatial navigation focus containers | spatial navigation container | spatial navigation containers">spatial navigation focus containers</dfn>.
 
-<span class=cssapi>By default, </span><a>spatial navigation containers</a> are established by:
+<span class=cssapi>By default, </span><a>spatial navigation containers</a>(same with spatial navigation focus container) are established by:
 * The viewport of a <a for="/">browsing context</a>
     (not limited to the <a>top-level browsing context</a>)
 
@@ -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