Merge pull request #10 from knuton/fix-linear-moves

Fix linear moves
dividat · Aug 26, 2024 · 2956641 · 2956641
2 parents 112668e + 95eaa8f
commit 2956641
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 2 deletions.
diff --git a/cypress/e2e/spec.cy.ts b/cypress/e2e/spec.cy.ts
@@ -186,6 +186,38 @@ describe("focus-shift spec", () => {
     ])
   )
 
+  it(
+    "linear-type group with stretched item LR",
+    testFor("./cypress/fixtures/group-linear-stretch.html", { className: "rows" }, [
+      { eventType: "keydown", selector: "#button-big", options: keyevent({ key: "ArrowLeft" }) },
+      { eventType: "keydown", selector: "#button-small", options: keyevent({ key: "ArrowDown" }) }
+    ])
+  )
+
+  it(
+    "linear-type group with stretched item RL",
+    testFor("./cypress/fixtures/group-linear-stretch.html", { className: "rows" }, [
+      { eventType: "keydown", selector: "#button-big", options: keyevent({ key: "ArrowRight" }) },
+      { eventType: "keydown", selector: "#button-small", options: keyevent({ key: "ArrowDown" }) }
+    ])
+  )
+
+  it(
+    "linear-type group with stretched item TD",
+    testFor("./cypress/fixtures/group-linear-stretch.html", { className: "columns" }, [
+      { eventType: "keydown", selector: "#button-big", options: keyevent({ key: "ArrowDown" }) },
+      { eventType: "keydown", selector: "#button-small", options: keyevent({ key: "ArrowRight" }) }
+    ])
+  )
+
+  it(
+    "linear-type group with stretched item DT",
+    testFor("./cypress/fixtures/group-linear-stretch.html", { className: "columns" }, [
+      { eventType: "keydown", selector: "#button-big", options: keyevent({ key: "ArrowUp" }) },
+      { eventType: "keydown", selector: "#button-small", options: keyevent({ key: "ArrowRight" }) }
+    ])
+  )
+
   it(
     "memorize-type group TD",
     testFor("./cypress/fixtures/group-memorize.html", { className: "rows" }, [

diff --git a/cypress/fixtures/group-linear-stretch.html b/cypress/fixtures/group-linear-stretch.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles.css" />
+    <style>
+      .nav-group {
+        width: 800px;
+        height: 600px;
+      }
+      #button-big {
+        align-self: stretch;
+      }
+      #button-small {
+        align-self: center;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- With two group items, one spanning the entire length along the
+      direction of movement, we expect this expansive item to be chosen.
+    -->
+    <div class="nav-group" data-focus-group="linear">
+      <button id="button-big">Big Button</button>
+      <button id="button-small">Small Button</button>
+    </div>
+    <script src="../../index.js"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -77,7 +77,7 @@ function handleUserDirection(direction) {
  * Standard heuristics are used to determine which element should be the first to receive focus.
  *
  * 1. Look for elements with explicit tabindex attribute set, choose lowest index > 0
- * 2. If no tabindex was set, treat container as a 'first' group
+ * 2. If no tabindex was set, treat container as a 'linear' group
  *
  * @param {Direction} direction
  * @param {Element} container
@@ -515,7 +515,7 @@ function focusActiveElement(direction, origin, group) {
 function focusLinear(direction, origin, group) {
   const originPoint = makeOrigin(opposite(direction), origin)
   const candidates = getFocusableElements(group).map((candidate) =>
-    annotate(opposite(direction), origin, candidate)
+    annotate(direction, origin, candidate)
   )
   const bestCandidate = getMinimumBy(candidates, (candidate) =>
     euclidean(originPoint, candidate.point)