Merge pull request w3c#109 from jihyerish/polyfill-setting-starting-point

Jihye Hong · web-flow · commit e3e9a38b9c0e · 2018-09-14T15:33:57.000+09:00
Modify the way to set the spatial navigation starting point
diff --git a/demo/sample/heuristic_non_scrollable_iframe.html b/demo/sample/heuristic_non_scrollable_iframe.html
@@ -12,7 +12,7 @@
 	<script src="../../polyfill/spatnav-heuristic.js"></script>
 </head>
 <body>
-	<iframe src="heuristic_non_scrollable_iframe_element.html" tabindex="0" class="container c2"></iframe>
+	<iframe src="heuristic_non_scrollable_iframe_element.html" class="container c2"></iframe>
 	<div tabindex="0" class="box b1" style="left: 70px; top: -180px;"></div>
 	<div tabindex="0" class="box b1" style="left: 180px; top: -120px;"></div>
 	<div tabindex="0" class="box b1" style="left: 20px; top: -90px;"></div>
diff --git a/polyfill/spatnav-heuristic.js b/polyfill/spatnav-heuristic.js
@@ -68,16 +68,17 @@
           navigate(dir);
 
           spatNavManager.startingPosition = null;
-        }      
+        }
       }
-    
+
       if (e.keyCode === TAB_KEY_CODE)
         spatNavManager.startingPosition = null;
     });
 
     /**
     * mouseup EventListener :
     * If the mouse click a point in the page, the point will be the starting point.
+    * *NOTE: Let UA set the spatial navigation starting point based on click
     */
     document.addEventListener('mouseup', function(e) {
       spatNavManager.startingPosition = {xPosition: e.clientX, yPosition: e.clientY};
@@ -95,19 +96,25 @@
     // spatial navigation steps
 
     // 1
-    const startingPoint = findStartingPoint();
-
-    // 2 Optional step, not handled
-    // UA defined starting point
+    let startingPoint = findStartingPoint();
+    let eventTarget = null;
+    let elementFromPosition = null;
 
-    // 3
-    let eventTarget = startingPoint;
-
-    // 3-2 : the mouse clicked position will be come the starting point
+    // 2 Optional step, UA defined starting point
     if (spatNavManager.startingPosition) {
-      eventTarget = document.elementFromPoint(spatNavManager.startingPosition.xPosition, spatNavManager.startingPosition.yPosition);
+      elementFromPosition = document.elementFromPoint(spatNavManager.startingPosition.xPosition, spatNavManager.startingPosition.yPosition);
+    }
 
+    if (elementFromPosition && startingPoint.contains(elementFromPosition)) {
+      startingPoint = spatNavManager.startingPosition;
       spatNavManager.startingPosition = null;
+
+      // 3
+      eventTarget = elementFromPosition;
+    }
+    else {
+      // 3
+      eventTarget = startingPoint;
     }
 
     // 4
@@ -310,7 +317,7 @@
     // find the best candidate within startingPoint
     if (candidates && candidates.length > 0) {
       if ((isContainer(targetElement) || targetElement.nodeName === 'BODY') && !(targetElement.nodeName === 'INPUT')) {
-        if (candidates.every(x => targetElement.focusableAreas().includes(x))) { 
+        if (candidates.every(x => targetElement.focusableAreas().includes(x))) {
           // if candidates are contained in the targetElement, then the focus moves inside the targetElement
           bestCandidate = selectBestCandidateFromEdge(targetElement, candidates, dir);
         }
@@ -320,9 +327,9 @@
       }
       else {
         bestCandidate = selectBestCandidate(targetElement, candidates, dir);
-      }    
+      }
     }
-    
+
     return bestCandidate;
   }
 
@@ -647,7 +654,7 @@
     }
   }
 
-  /** 
+  /**
   * isOverflow
   * Whether this element is overflow or not
   * @function
@@ -737,7 +744,6 @@
       return false;
     else
       return ((!element.parentElement) ||
-          (element.nodeName === 'IFRAME') ||
           (element.tabIndex >= 0) ||
           (isScrollable(element) && isOverflow(element)));
   }
@@ -1116,7 +1122,7 @@
   }
 
   window.addEventListener('load', function() {
-    
+
     // load SpatNav polyfill
     focusNavigationHeuristics();
   });
