[css-nav-1] Move the examples related to NavigationEvent to the right place

Author: Jihye Hong

css-nav-1/Overview.bs

@@ -557,72 +557,6 @@ this only searches through the visible focusable areas of the nearest
 <em>If there isn't any, this does not climb further up the ancestry chain,
 and the result will be <code>null</code>.</em>
 </div>
-
-<div class=example id=delegation>
-    The following code changes the behavior of spatial navigation
-    so that when a scroll container would get focused,
-    if it has at least one visible focusable descendant,
-    the focus is automatically transferred to it,
-    recursively.
-
-    <pre><code highlight=javascript>
-    document.addEventListener('navbeforefocus', e => {
-        e.preventDefault();
-
-        let target = e.relatedTarget;
-        while (target.isSameNode(target.getSpatialNavigationContainer())) {
-            const areas = target.focusableAreas();
-
-            if (areas.length === 0) { break; }
-
-            target = target.spatialNavigationSearch(e.dir, { candidates: areas });
-        }
-        target.focus();
-    });
-    </code></pre>
-</div>
-
-<div class=example id=loop>
-    The following code changes the behavior of spatial navigation
-    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 <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.
-
-    However, the focus can still be moved outside by sequential navigation,
-    mouse interaction,
-    or programmatic calls to {{focus()}}…
-
-    <pre><code highlight=javascript>
-    document.addEventListener('navnotarget', e => {
-        e.preventDefault();
-
-        const container = e.relatedTarget;
-        const areas = container.focusableAreas({mode: 'all'});
-
-        if (areas.length === 0) {
-            switch (e.dir) {
-                case 'down':
-                    container.scrollTop = 0;
-                    break;
-                case 'up':
-                    container.scrollTop = container.scrollHeight;
-                    break;
-                case 'right':
-                    container.scrollLeft = 0;
-                    break;
-                case 'left':
-                    container.scrollLeft = container.scrollWidth;
-                    break;
-            }
-        } else {
-            const target = container.spatialNavigationSearch(e.dir, { candidates: areas });
-            target.focus();
-        }
-    });
-    </code></pre>
-</div>
 </div>
 
 <div class=example id=searchInside>
@@ -773,6 +707,30 @@ the <a spec=html for="/">origin</a> of the [=active document=] of the [=top-leve
     </table>
 </div>
 
+<div class=example id=delegation>
+    The following code changes the behavior of spatial navigation
+    so that when a scroll container would get focused,
+    if it has at least one visible focusable descendant,
+    the focus is automatically transferred to it,
+    recursively.
+
+    <pre><code highlight=javascript>
+    document.addEventListener('navbeforefocus', e => {
+        e.preventDefault();
+
+        let target = e.relatedTarget;
+        if (target.isSameNode(target.getSpatialNavigationContainer())) {
+            const areas = target.focusableAreas();
+
+            if (areas.length === 0) { break; }
+
+            target = target.spatialNavigationSearch(e.dir, { candidates: areas });
+        }
+        target.focus();
+    });
+    </code></pre>
+</div>
+
 <h4 id="event-type-navnotarget" class="non-normative">
 <dfn event for=NavigationEvent>navnotarget</dfn></h4>
 
@@ -921,6 +879,49 @@ the <a spec=html for="/">origin</a> of the [=active document=] of the [=top-leve
         &lt;/div>
    </pre>
 </div>
+
+<div class=example id=loop>
+    The following code changes the behavior of spatial navigation
+    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 <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.
+
+    However, the focus can still be moved outside by sequential navigation,
+    mouse interaction,
+    or programmatic calls to {{focus()}}.
+
+    <pre><code highlight=javascript>
+    document.addEventListener('navnotarget', e => {
+        e.preventDefault();
+
+        const container = e.relatedTarget;
+        const areas = container.focusableAreas({ mode: 'all' });
+
+        if (areas.length === 0) {
+            switch (e.dir) {
+                case 'down':
+                    container.scrollTop = 0;
+                    break;
+                case 'up':
+                    container.scrollTop = container.scrollHeight;
+                    break;
+                case 'right':
+                    container.scrollLeft = 0;
+                    break;
+                case 'left':
+                    container.scrollLeft = container.scrollWidth;
+                    break;
+            }
+        } else {
+            const target = container.spatialNavigationSearch(e.dir, { candidates: areas });
+            target.focus();
+        }
+    });
+    </code></pre>
+</div>
+
 </div>
 </div>
 
@@ -970,7 +971,7 @@ to fully define the behavior.
 Issue(w3c/csswg-drafts#3376): The following currently does not account
 for <a href="https://github.com/WICG/overscroll-behavior">the proposed overscroll-behavior specification</a>.
 
-<h3 id=grouping>
+<h3 id=glossary>
 Glossary</h3>
 
 The following term definitions have been specified to explain the processing model for spatial navigation.