Remove using the enter key to navigate inside scrollers

Instead, navigating down (resp. up, left, right) when
a scroller is focused will automatically chose between
* focusing the child nearest from the edge in that direction
  if there is any focusable child
* scrolling otherwise

This also removes much of the special casing needed for the root.

Some ambiguities / inacuracies were resolved along the way.

Closes w3c#15
Closes w3c#18

Partly relates to w3c#29

Author: frivoal

index.bs

@@ -171,27 +171,6 @@ until it has either moved focus,
 scrolled,
 or reached the root.
 
-Additionally, when the user has focused a <a>scroll container</a> which contains focusable elements,
-the user may ask the User Agent to move the focus to the nested elements
-(for instance by pressing <code class=key>Enter</code>).
-
-The User Agent will then follow a similar logic: first, search for visible and focusable items
-within the currently focused <a>scroll container</a>,
-and if there is any,
-select the best one and move the focus there.
-
-<div class=note>Note: This feature is needed because elements inside a scrollable container
-are neither to its top, bottom, left or right.
-They are inside, and could not be reached otherwise using spatial navigation only.
-
-Issue(15): While this ability is needed, it could be achieved by different mechanisms,
-such as for example automatically moving the focus inside of a scroll container
-instead of focusing it,
-if it contains focusable elements.
-The current proposition is felt to be more intuitive for end users.
-Feedback appreciated.
-</div>
-
 At key points during this search for the appropriate response to the spatial navigation request,
 the User Agent will fires events.
 These enable authors to prevent the upcoming action
@@ -375,7 +354,6 @@ enum SpatialNavigationDirection {
     "down",
     "left",
     "right",
-    "inside"
 };
 
 enum FocusableAreaSearchMode {
@@ -409,7 +387,9 @@ Note: the {{focusableAreas()}} and {{getSpatnavContainer()}} methods are <a>at-r
 
 <div algorithm="getSpatnavContainer steps">
 The {{Element/getSpatnavContainer()}} method must follow these steps:
-1. Return the nearest ancestor of the element that is a <a>spatnav container</a>
+1. Return the element if it is a <a>spatnav container</a>,
+    or the nearest ancestor of the element that is a <a>spatnav container</a>,
+    or the <a>document</a> if the nearest <a>spatnav container</a> is the viewport.
 
 </div>
 
@@ -462,7 +442,7 @@ The {{Element/seqNavSearch()}} method must follow these steps:
 
     <pre><code highlight=javascript>
     document.addEventListener("navbeforescroll", function(e) {
-        var container = e.target.getSpatnavContainer();
+        var container = e.relatedTarget;
         var areas = container.focusableAreas({ mode: "all" });
 
         if (areas.length == 0)) { return; }
@@ -495,7 +475,6 @@ enum NavigationDirection {
       "down",
       "left",
       "right",
-      "inside",
       "forward",
       "backward"
 };
@@ -874,11 +853,10 @@ 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 | spatnav container | spatnav containers">spatial navigation focus containers</dfn> (or <strong>spatnav containers</strong> for short).
 
 By default, <a>spatnav containers</a> are established by:
-* the <a>document element</a> of a <a for="/">browsing context</a>'s <a>document</a>
+* The viewport of a <a for="/">browsing context</a>
     (not limited to the <a>top-level browsing context</a>)
 
-    Issue(18): Should that be the viewport rather than the document element?
-* a <a>scroll containers</a>
+* <a>scroll containers</a>
 
 Additional <a>spatnav containers</a> can be created using the 'spatial-navigation-contain' property (see [[#container]]).
 
@@ -899,27 +877,40 @@ Issue(23): The focusing steps should probably reset the <a>spatial navigation st
 To run the <dfn>spatial navigation steps</dfn> in <var>direction</var>, do the following:
 
 1. Let <var>startingPoint</var> be the <a>DOM anchor</a> of the <a>currently focused area of a top-level browsing context</a>.
-2. If <var>startingPoint</var> is the <a>Document</a> of the <a>top-level browsing context</a>
-    set <var>startingPoint</var> to <a>the body element</a> if it is not <code>null</code>
-    or to the <a>document element</a> otherwise.
-3. If the <a>spatial navigation starting point</a> is not <code>null</code>
-    and it is a descendant of <var>startingPoint</var>
+2. If the <a>spatial navigation starting point</a> is not <code>null</code>
+    and it is inside <var>startingPoint</var>
     then set <var>startingPoint</var> to the <a>spatial navigation starting point</a>
-4. If the <var>direction</var> is <code>inside</code>,
-    then run the <a>navigate inside steps</a> on <var>startingPoint</var>.
-1. Let <var>eventTarget</var> be <var>startingPoint</var> if <var>startingPoint</var> is an element,
-    or let <var>eventTarget</var> be the element which contains <var>startingPoint</var>
-    if <var>startingPoint</var> is a position.
-    (<a>assert</a>: There is no other alternative)
-2. If <var>starting point</var> is the <a>document element</a> or the <a>the body element</a> of the <a>top-level browsing context</a>
-    then set <var>starting point</var> to:
-    * the top edge of the viewport    if <var>direction</var> is <code>down</code>
-    * the bottom edge of the viewport if <var>direction</var> is <code>up</code>
-    * the left edge of the viewport   if <var>direction</var> is <code>right</code>
-    * the right edge of the viewport  if <var>direction</var> is <code>left</code>
-
-    Note: We special case the situation where we're navigating from the state where nothing was focused,
-    to start searching from the edges of the viewport.
+4.
+    * If <var>startingPoint</var> is an <a>node</a>,
+        let <var>eventTarget</var> be <var>startingPoint</var>
+    * else (<a>assert</a>: the starting point is a position)
+        let <var>eventTarget</var> be the <a>node</a> which contains <var>startingPoint</var>
+5. If <var>eventTarget</var> is the <a>Document</a> or the <a>document element</a>,
+        set <var>eventTarget</var> be <a>the body element</a> if it is not <code>null</code>
+        or to the <a>document element</a> otherwise.
+5. If <var>startingPoint</var> is either a <a>scroll container</a> or the <a>document</a>
+    1. Let <var>candidates</var> be the result of <a>finding focusable areas</a>
+        within <var>startingPoint</var>
+    2.
+        * If <var>candidates</var> contains at least 1 item
+            1. Let <var>bestCandidate</var> be the result of <a>selecting the best candidate</a>
+                within <var>candidates</var> in <var>direction</var> starting from <var>startingPoint</var>
+            2. <a>Fire an event</a> named <a event>navbeforefocus</a> at <var>eventTarget</var> using {{NavigationEvent}}
+                with its {{NavigationEvent/dir}} set to <var>direction</var> and {{NavigationEvent/relatedTarget}} set to <var>bestCandidate</var>
+                and with it's <code>bubbles</code> and <code>cancelable</code> attributes set to <code>true</code>,
+                and let <var>allowFocusChange</var> be the result.
+            3. If <var>allowFocusChange</var> is <code>false</code>, return
+            4. Run the <a>focusing steps</a> for <var>bestCandidate</var> and return
+        * Else if <var>eventTarget</var> <a>can be manually scrolled</a>
+            1. <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 let <var>allowScroll</var> be the result.
+            2. If <var>allowScroll</var> is <code>true</code>,
+                then <a>Directionally scroll the element</a> <var>eventTarget</var> in <var>direction</var> and return,
+                else return.
+        * Else, fallback to the next step
 3. Let <var>container</var> be the nearest ancestor of <var>eventTarget</var> that is a <a>spatnav container</a>.
 4. <i>Loop</i>: Let <var>candidates</var> be the result of <a>finding focusable areas</a>
     within <var>container</var>
@@ -931,7 +922,7 @@ 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 let <var>allowScroll</var> be the result.
             2. If <var>allowScroll</var> is <code>true</code>,
-                then return <a>Directionally scroll the element</a> <var>container</var> in <var>direction</var> the return,
+                then <a>Directionally scroll the element</a> <var>container</var> in <var>direction</var> and return,
                 else return.
     * Else,
         1. <a>Fire an event</a> named <a event>navnotarget</a> at <var>eventTarget</var> using {{NavigationEvent}}
@@ -962,27 +953,6 @@ To run the <dfn>spatial navigation steps</dfn> in <var>direction</var>, do the f
 
 </div>
 
-<div algorithm="to run the navigate inside steps">
-To run the <dfn>navigate inside steps</dfn> on <var>eventTarget</var>, do the following:
-1. Let <var>candidates</var> be the result of <a>finding focusable areas</a>
-    within <var>eventTarget</var>
-2. If <var>candidates</var> is <code>null</code>,
-    <a>Fire an event</a> named <a event>navnotarget</a> at <var>eventTarget</var> using {{NavigationEvent}}
-    with its {{NavigationEvent/dir}} set to <code>inside</code> 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>,
-    then return.
-3. Let <var>bestCandidate</var> be the result of <a>selecting the best candidate</a>
-    within <var>candidates</var> in direction <code>inside</code>
-    starting from the <a>inline start</a> <a>block start</a> corner of <var>eventTarget</var>'s <a>scrollport</a>.
-4. <a>Fire an event</a> named <a event>navbeforefocus</a> at <var>eventTarget</var> using {{NavigationEvent}}
-    with its {{NavigationEvent/dir}} set to <code>inside</code> and {{NavigationEvent/relatedTarget}} set to <var>bestCandidate</var>
-    and with it's <code>bubbles</code> and <code>cancelable</code> attributes set to <code>true</code>,
-    and let <var>allowFocusChange</var> be the result.
-5. If <var>allowFocusChange</var> is <code>false</code>, return
-6. Run the <a>focusing steps</a> for <var>bestCandidate</var> and return
-
-</div>
-
 For consistency between <a>sequential focus navigation</a> and the model defined above,
 the following is also defined:
 
@@ -1018,10 +988,9 @@ All geometrical operations in this section are defined to work on the result of
 including all graphical transformations, such as <a>relative positioning</a> or [[CSS-TRANSFORMS-1]].
 
 The <dfn>boundary box</dfn> of an object is defined as follows:
-* if the object is a point, the boundary is that point
-* if the object is an element, the boundary is the <a>border box</a> of the element's <a>principal box</a>.
-* if the object is a <a>focusable area</a> which is not an element, the boundary is the axis-aligned the bounding box of that <a>focusable area</a>
-* if the object is a geometric shape, the boundary is the axis-aligned the bounding box of that shape
+* if the object is a point, the boundary box is that point
+* if the object is an element, the boundary box is the <a>border box</a> of the element's <a>principal box</a>.
+* if the object is a <a>focusable area</a> which is not an element, the boundary box is the axis-aligned the bounding box of that <a>focusable area</a>
 
 Issue(w3c/csswg-drafts#2324): CSS should have a term for “border box taking into account corner shaping properties like border-radius”.
 
@@ -1040,12 +1009,16 @@ follow the following steps:
     return <var>focusables</var>.
 
     Note: <var>focusables</var> may be empty
+3. Let <var>insideArea</var> be
+    * the <a>optimal viewing region</a> of <var>C</var> if <var>C</var> is a <a>scroll container</a>,
+
+	    Issue(29): Should that be C's <a>optimal viewing region</a> or <a>scrollport</a>?
+
+    * the viewport of C's <a for="/">browsing context</a> if <var>C</var> is a <a>Document</a>,
+    * the <a>border box</a> of <var>C</var> otherwise.
 3. Let <var>visibles</var> be the subset of items in <var>focusables</var>
     whose <a>boundary box</a>
-    is at least partly within <var>C</var>'s <a>scrollport</a>.
-
-    Issue(29): Should that be C's <a>optimal viewing region</a> instead?
-    Probably not, given the next step, but maybe.
+    is at least partly within <var>insideArea</var>.
 4. Remove from <var>visibles</var> items are <a>obscured</a> by other parts of the page:
     If no point of the area enclosed by an item's <a>boundary box</a> can be hit by a hit test due to some other object(s) overlapping it,
     it is said to be <dfn>obscured</dfn>.
@@ -1080,36 +1053,58 @@ follow the following steps:
 
 1. If <var>candidates</var> is <a spec=infra for=set>empty</a>, return <code>null</code>
 2. If <var>candidates</var> contains a single item, return that item
-3. If <var>dir</var> is not <code>inside</code>,
-	set <var>candidates</var> be the subset of its items
-        whose <a>boundary box</a>'s geometric center is within the closed half plane
-        whose boundary goes through the geometric center of the <var>starting point</var>
-        and is perpendicular to <var>D</var>.
-3. For each <var>candidate</var> in <var>candidates</var>,
-    find the points <var>P1</var> inside the <a>boundary box</a> of <var>starting point</var>
-    and <var>P2</var> inside the <a>boundary box</a> of <var>candidate</var>
-    that minimize the <var>distance</var> between these two points,
-    when <var>distance</var> is defined as follows:
-
-    <dl>
-      <dt><var>distance</var>:
-        <dd><var>A</var> + <var>B</var> + <var>C</var> - <var>D</var>
-
-      <dt><var>A</var>:
-        <dd>The euclidian distance between <var>P1</var> and <var>P2</var>.
-
-      <dt><var>B</var>:
-        <dd>The absolute distance in the <var>dir</var> direction between <var>P1</var> and <var>P2</var>,
-            or 0 if <var>dir</var> is <code>inside</code>.
-
-      <dt><var>C</var>:
-        <dd>The absolute distance in the direction which is orthogonal to <var>dir</var> between <var>P1</var> and <var>P2</var>,
-            or 0 if <var>dir</var> is <code>inside</code>.
-
-      <dt><var>D</var>:
-        <dd>The square root of the area of intersection between the <a>boundary boxes</a> of <var>candidate</var> and <var>starting point</var>
-    </dl>
-4. Return the item of the <var>candidates</var> set that has the smallest <var>distance</var>
+3. Let <var>insideArea</var> be
+    * the <a>optimal viewing region</a> of <var>starting point</var> if <var>starting point</var> is a <a>scroll container</a>,
+    * the viewport if <var>starting point</var> is a <a>Document</a>,
+    * the <a>border box</a> of <var>starting point</var> otherwise.
+4. Let <var>insiders</var> be the subset of <var>candidates</var> items
+    who are descendants of <var>starting point</var>
+    and whose <a>boundary box</a>'s
+    * top edge is below the top edge of <var>insideArea</var> if <var>D</var> is <code>down</code>
+    * bottom edge is above the bottom edge of <var>insideArea</var> if <var>D</var> is <code>up</code>
+    * right edge is left of the right edge of <var>insideArea</var> if <var>D</var> is <code>left</code>
+    * left edge is right of the left edge of <var>insideArea</var> if <var>D</var> is <code>right</code>
+
+    Note: this sub-setting is necessary to avoid going in the opposite direction than the one requested.
+3.
+    * If <var>insiders</var> is non empty
+        1. Let <var>closest subset</var> be the subset of <var>insiders</var> whose <a>boundary box</a>'s
+            * top edge is closest to the top edge of <var>insideArea</var> if <var>D</var> is <code>down</code>
+            * bottom edge is closest to the bottom edge of <var>insideArea</var> if <var>D</var> is <code>up</code>
+            * right edge is closest to the right edge of <var>insideArea</var> if <var>D</var> is <code>left</code>
+            * left edge is closest to the left edge of <var>insideArea</var> if <var>D</var> is <code>right</code>
+        2. If <var>closest subset</var> contains a single item,
+            return that item,
+            else return the first item of <var>closest subset</var> in document order
+    * Else
+        1. Set <var>candidates</var> be the subset of its items
+            whose <a>boundary box</a>'s geometric center is within the closed half plane
+            whose boundary goes through the geometric center of the <var>starting point</var>
+            and is perpendicular to <var>D</var>.
+        2. For each <var>candidate</var> in <var>candidates</var>,
+            find the points <var>P1</var> inside the <a>boundary box</a> of <var>starting point</var>
+            and <var>P2</var> inside the <a>boundary box</a> of <var>candidate</var>
+            that minimize the <var>distance</var> between these two points,
+            when <var>distance</var> is defined as follows:
+
+            <dl>
+              <dt><var>distance</var>:
+                <dd><var>A</var> + <var>B</var> + <var>C</var> - <var>D</var>
+
+              <dt><var>A</var>:
+                <dd>The euclidian distance between <var>P1</var> and <var>P2</var>
+
+              <dt><var>B</var>:
+                <dd>The absolute distance in the <var>dir</var> direction between <var>P1</var> and <var>P2</var>
+
+              <dt><var>C</var>:
+                <dd>The absolute distance in the direction which is orthogonal to <var>dir</var> between <var>P1</var> and <var>P2</var>
+
+              <dt><var>D</var>:
+                <dd>The square root of the area of intersection between the <a>boundary boxes</a> of <var>candidate</var> and <var>starting point</var>
+            </dl>
+        3. Return the item of the <var>candidates</var> set that has the smallest <var>distance</var>.
+
 
 </div>
 
@@ -1128,18 +1123,18 @@ Inherited: no
 
 <dl dfn-for=spatial-navigation-contain dfn-type=value>
     <dt><dfn>auto</dfn>
-    <dd>If the element is either
-    the <a>document element</a> of a <a for="/">browsing context</a>'s <a>document</a>
-    (not limited to the <a>top-level browsing context</a>)
-    or
-    a <a>scroll container</a>
-    then it establishes a <a>spatial navigation focus container</a>,
-    otherwise it does not.
+    <dd>If the element is a <a>scroll container</a>
+        then it establishes a <a>spatial navigation focus container</a>,
+        otherwise it does not.
 
     <dt><dfn>contain</dfn>
     <dd>The element establishes a <a>spatial navigation focus container</a>
 </dl>
 
+Note: In addition, as per [[#grouping]], the viewport of a <a for="/">browsing context</a>
+        (not limited to the <a>top-level browsing context</a>)
+        also establishes a <a>spatial navigation focus container</a>.
+
 Issue(16): Add an example
 
 Note: the 'spatial-navigation-contain' property is <a>at-risk</a>.