Merge pull request #3729 from jihyerish/drop-navbeforescroll

[css-nav-1] Drop navbeforescroll event

Author: Jihye Hong

css-nav-1/Overview.bs

@@ -540,29 +540,6 @@ this only searches through the visible focusable areas of the nearest
 and the result will be <code>null</code>.</strong>
 </div>
 
-
-<div class=example id=focus-only>
-    The following code changes the behavior of spatial navigation
-    from scrolling when there is no focusable element visible,
-    to jumping to focusable elements even when they are not visible.
-
-    <pre><code highlight=javascript>
-    document.addEventListener("navbeforescroll", function(e) {
-        var container = e.relatedTarget;
-        var areas = container.focusableAreas({ mode: "all" });
-
-        if (areas.length === 0) { return; }
-
-        e.preventDefault();
-        var t = e.target.spatialNavigationSearch({
-            dir: e.dir,
-            candidates: areas
-        });
-        t.focus();
-    });
-    </code></pre>
-</div>
-
 <div class=example id=delegation>
     The following code changes the behavior of spatial navigation
     so that when a scroll container would get focused,
@@ -744,113 +721,6 @@ The <a event>navbeforefocus</a> event occurs before spatial navigation changes t
     </table>
 </div>
 
-<h4 id="event-type-navbeforescroll" class="non-normative">
-<dfn event for=NavigationEvent>navbeforescroll</dfn></h4>
-
-The <a event>navbeforescroll</a> event occurs before spatial navigation triggers scrolling.
-<table class="def">
-    <tbody>
-        <tr>
-            <th>Type
-            <td><strong><code>navbeforescroll</code></strong>
-        <tr>
-            <th>Interface
-            <td>{{NavigationEvent}}
-        <tr>
-            <th>Bubbles
-            <td>Yes
-        <tr>
-            <th>Cancelable
-            <td>Yes
-        <tr>
-            <th>Attributes of the event
-                <td><dl>
-                    <dt>{{NavigationEvent}}.{{NavigationEvent/relatedTarget}}
-                    <dd>The element that will be scrolled if the event is not canceled
-
-                    <dt>{{NavigationEvent}}.{{NavigationEvent/dir}}
-                    <dd>The direction of the navigation as requested by the user
-                </dl>
-    </tbody>
-</table>
-
-<div class='example'>
-    This example shows the [[UI-EVENTS#event-order]] when pressing the <code class=key>ArrowDown</code>
-    key in the situation like the following figure.
-    For the sake of keeping the description simple,
-    this example assumes a UA where spatial navigation is triggered using arrow keys.
-
-		<figure>
-		    <img alt="An image about navbeforescroll" src="images/navbeforescroll-example-1.png" style="width: 200px;"/>
-		    <figcaption>"Box 2" gains the focus and there isn't any candidate in a downward direction
-            in the <a>scrollport</a>.</figcaption>
-		</figure>
-
-    <table class="complex data">
-        <thead>
-            <tr>
-                <th>
-                <th>Event type
-                <th>Event target
-                <th><code>relatedTarget</code>
-                <th>Notes
-        </thead>
-        <tbody>
-            <tr>
-                <td>1
-                <td>keydown
-                <td><code>#box2</code>
-                <td>N/A
-                <td>MUST be a key which can activate spatial navigation,
-                    such as the arrow keys,
-                    otherwise spatial navigation is not triggered.
-            <tr>
-                <td>2
-                <td>navbeforescroll
-                <td><code>#box2</code>
-                <td><code>#scrollContainer</code>
-                <td>Sent if <code>#scrollContainer</code> doesn't contain any candidate in the <a>scrollport</a>,
-                otherwise this would not be generated.
-        </tbody>
-    </table>
-
-    After <a event>navbeforescroll</a> is fired, pressing the <code class=key>ArrowDown</code> key triggers scrolling
-    down the scrollbar like in the figure below:
-
-    <figure>
-        <img alt="An image of the result about navnotarget" src="images/navbeforescroll-example-2.png" style="width: 200px;"/>
-        <figcaption>The result of moving focus when there isn't any candidate in the <a>scrollport</a>.</figcaption>
-    </figure>
-
-    This example uses the markup as follows:
-    <pre class="lang-css">
-        #scrollContainer {
-            width: 700px;
-            height: 700px;
-            overflow-x: hidden;
-            overflow-y: auto;
-        }
-
-        .item {
-            width: 150px;
-            height: 110px;
-            background-color: blue;
-        }
-
-        .item:focus {
-            background-color: red;
-        }
-    </pre>
-
-    <pre class="lang-html">
-        &lt;div id="scrollContainer">
-            &lt;div id="box1" class="item" tabindex="0">Box 1&lt;/div>
-            &lt;div id="box2" class="item" tabindex="0">Box 2&lt;/div>
-            &lt;div id="box3" class="item" tabindex="0">Box 3&lt;/div>
-        &lt;/div>
-   </pre>
-</div>
-
 <h4 id="event-type-navnotarget" class="non-normative">
 <dfn event for=NavigationEvent>navnotarget</dfn></h4>
 
@@ -1086,7 +956,7 @@ To run the <dfn>spatial navigation steps</dfn> in <var>direction</var>, do the f
 1. Let <var>searchOrigin</var> be the <a>DOM anchor</a> of the <a>currently focused area of a top-level browsing context</a>.
 2. If the <a>spatial navigation starting point</a> is not <code>null</code>
     and it is inside <var>searchOrigin</var>
-    then set <var>searchOrigin</var> to the <a>spatial navigation starting point</a>
+    then set <var>searchOrigin</var> to the <a>spatial navigation starting point</a>.
 3.
     * If <var>searchOrigin</var> is an <a>node</a>,
         let <var>eventTarget</var> be <var>searchOrigin</var>
@@ -1108,27 +978,15 @@ To run the <dfn>spatial navigation steps</dfn> in <var>direction</var>, do the f
                 and with it's <code>bubbles</code> and <code>cancelable</code> attributes set to <code>true</code>,
                 and return if the result is <code>false</code></span>
             3. Run the <a>focusing steps</a> for <var>bestCandidate</var> and return
-        * Else if <var>eventTarget</var> <a>can be manually scrolled</a>:
-            1. If <a>navigation-override</a> <a>is enabled</a> in the [=node document=] of <var>eventTarget</var> for the <a spec=html for="/">origin</a> of the [=active document=] of the [=top-level browsing context=], then
-                <span class=api><a>fire an event</a> named <a event>navbeforescroll</a> at <var>eventTarget</var> using {{NavigationEvent}}
-                with its {{NavigationEvent/dir}} set to <var>direction</var>
-                and {{NavigationEvent/relatedTarget}} set to <var>eventTarget</var>
-                and with it's <code>bubbles</code> and <code>cancelable</code> attributes set to <code>true</code>,
-                and return if the result is <code>false</code></span>
-            2. <a>Directionally scroll the element</a> <var>eventTarget</var> in <var>direction</var> and return.
-        * Else, fallback to the next step
+        * Else if <var>eventTarget</var> <a>can be manually scrolled</a>, <a>directionally scroll the element</a> 
+          <var>eventTarget</var> in <var>direction</var> and return.
+        * Else, fallback to the next step.
 6. Let <var>container</var> be the nearest ancestor of <var>eventTarget</var> that is a <a>spatial navigation container</a>.
 7. <i>Loop</i>: Let <var>candidates</var> be the result of <a>finding focusable areas</a>
     within <var>container</var>, excluding <var>searchOrigin</var>
 8. If <var>candidates</var> is empty:
-    * If <var>container</var> is a <a>scroll container</a> that <a>can be manually scrolled</a>:
-            1. If <a>navigation-override</a> <a>is enabled</a> in the [=node document=] of <var>eventTarget</var> for the <a spec=html for="/">origin</a> of the [=active document=] of the [=top-level browsing context=], then
-                <span class=api><a>fire an event</a> named <a event>navbeforescroll</a> at <var>eventTarget</var> using {{NavigationEvent}}
-                with its {{NavigationEvent/dir}} set to <var>direction</var>
-                and {{NavigationEvent/relatedTarget}} set to <var>container</var>
-                and with it's <code>bubbles</code> and <code>cancelable</code> attributes set to <code>true</code>,
-                and return if the result is <code>false</code></span>
-            2. <a>Directionally scroll the element</a> <var>container</var> in <var>direction</var> and return.
+    * If <var>container</var> is a <a>scroll container</a> that <a>can be manually scrolled</a>, <a>directionally scroll the element</a>
+       <var>container</var> in <var>direction</var> and return.
     * Else,
         1. If <a>navigation-override</a> <a>is enabled</a> in the [=node document=] of <var>eventTarget</var> for the <a spec=html for="/">origin</a> of the [=active document=] of the [=top-level browsing context=], then
             <span class=api><a>fire an event</a> named <a event>navnotarget</a> at <var>eventTarget</var> using {{NavigationEvent}}