arrowtab 0.0.1

package/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "all"
+}

package/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "git.branchProtection": [],
+  "cSpell.words": ["arrowtab"]
+}

package/README.md

@@ -0,0 +1,35 @@
+# ArrowTab
+
+**ArrowTab** allows you to navigate a webpage using the arrow keys, automatically selecting the nearest focusable element. This enables fast and efficient keyboard-only navigation across the page.
+
+ArrowTab is particularly **useful for business applications**, where power users need to prioritize **high productivity**.
+
+Instead of hitting `Tab` a thousand times, you can simply use the arrow keys to indicate the direction and jump to the next input, button, or link you want to select.
+
+## Setup
+
+pnpm:
+
+```sh
+pnpm install arrowtab
+```
+
+yarn:
+
+```sh
+yarn add arrowtab
+```
+
+npm:
+
+```sh
+npm install arrowtab
+```
+
+## Usage
+
+```js
+import { initArrowTab } from 'arrowtab'
+
+initArrowTab()
+```

package/dist/index.d.mts

@@ -0,0 +1 @@
+export declare const initArrowTab: () => void;

package/dist/index.mjs

@@ -0,0 +1,177 @@
+// TODO: Options
+// modifierKey: 'ctrlKey',
+// onlyWithModifierKey: false, // TODO: Better name
+// strategy: arrowTab.XWalkEuclidean,
+// selector: undefined,
+// elementFilter: () => boolean,
+// getElementPosition: (element) => { x: number, y: number },
+// eventTriggerName: 'keydown' | 'keyup',
+// earlyReturn: (event) => boolean, // TODO: Better name
+import { getFocusable } from './lib/getFocusable.mjs';
+import { getMiddle } from './lib/positions.mjs';
+import { strategy } from './lib/strategies.js';
+import { sumBy } from './lib/sumBy.mjs';
+export const initArrowTab = () => {
+    document.addEventListener('keydown', (event) => {
+        const activeStrategy = strategy.XWalkEuclidean;
+        const activeElement = document.activeElement === document.body
+            ? getFocusable()?.[0]
+            : document.activeElement;
+        if (!activeElement) {
+            return;
+        }
+        if (event.key !== 'ArrowLeft' &&
+            event.key !== 'ArrowRight' &&
+            event.key !== 'ArrowUp' &&
+            event.key !== 'ArrowDown') {
+            return;
+        }
+        if (activeElement instanceof HTMLInputElement ||
+            activeElement instanceof HTMLTextAreaElement) {
+            const selectionStart = activeElement.selectionStart;
+            const selectionEnd = activeElement.selectionEnd;
+            if (event.key === 'ArrowLeft' &&
+                selectionStart !== undefined &&
+                selectionStart !== null &&
+                selectionStart !== 0) {
+                return;
+            }
+            if (event.key === 'ArrowRight' &&
+                selectionStart !== undefined &&
+                selectionStart !== null &&
+                selectionStart !== activeElement.value?.length) {
+                return;
+            }
+            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') &&
+                selectionStart !== undefined &&
+                selectionEnd !== undefined &&
+                selectionStart !== null &&
+                selectionEnd !== null &&
+                selectionStart !== selectionEnd) {
+                return;
+            }
+            if (event.key === 'ArrowUp' &&
+                selectionStart !== undefined &&
+                selectionStart !== null &&
+                activeElement instanceof HTMLTextAreaElement) {
+                const rows = activeElement.value?.split('\n');
+                const start = selectionStart;
+                const firstRow = rows.at(0);
+                if (firstRow && start > firstRow.length) {
+                    return;
+                }
+            }
+            if (event.key === 'ArrowDown' &&
+                selectionStart !== undefined &&
+                selectionStart !== null &&
+                activeElement instanceof HTMLTextAreaElement) {
+                const rows = activeElement.value?.split('\n');
+                const withoutLastRow = rows.slice(0, -1);
+                const lengthUntilLastRow = sumBy(withoutLastRow, (row) => row.length);
+                const start = selectionStart;
+                if (start <= lengthUntilLastRow + 1) {
+                    return;
+                }
+            }
+        }
+        const inputTypesThatNeedModifierKey = {
+            date: ['ArrowDown', 'ArrowUp'],
+            time: ['ArrowDown', 'ArrowUp'],
+            datetime: ['ArrowDown', 'ArrowUp'],
+            'datetime-local': ['ArrowDown', 'ArrowUp'],
+            month: ['ArrowDown', 'ArrowUp'],
+            week: ['ArrowDown', 'ArrowUp'],
+            number: ['ArrowDown', 'ArrowUp'],
+            range: ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'],
+        };
+        if (activeElement instanceof HTMLInputElement) {
+            const inputType = activeElement.type;
+            if (inputTypesThatNeedModifierKey[inputType] &&
+                inputTypesThatNeedModifierKey[inputType].includes(event.key)) {
+                // TODO: Use modifierKey
+                if (!event.shiftKey) {
+                    return;
+                }
+                else {
+                    event.preventDefault();
+                }
+            }
+        }
+        const activePosition = getMiddle(activeElement);
+        const allFocusable = getFocusable();
+        const withoutActiveElement = allFocusable.filter((element) => element !== activeElement);
+        const withPosition = withoutActiveElement.map((element) => {
+            const position = getMiddle(element);
+            // Calculate angle between active element and focusable element
+            const xDistance = position.x - activePosition.x;
+            const yDistance = position.y - activePosition.y;
+            let angle = Math.acos(yDistance / Math.sqrt(xDistance ** 2 + yDistance ** 2)) *
+                (180 / Math.PI);
+            const direction = xDistance > 0 ? 'right' : 'left';
+            if (direction === 'right') {
+                angle = 360 - angle;
+            }
+            return {
+                xDistance,
+                yDistance,
+                element,
+                angle,
+                position,
+            };
+        });
+        const withDistance = withPosition.map((focusable) => {
+            const distance = activeStrategy.distanceMetric({ ...focusable, event });
+            return {
+                ...focusable,
+                distance,
+            };
+        });
+        const withWithinReach = withDistance.map((focusable) => {
+            const withinReach = activeStrategy.withinReachMetric({
+                ...focusable,
+                event,
+            });
+            return {
+                ...focusable,
+                withinReach,
+            };
+        });
+        const reversed = [...withWithinReach].reverse(); // Prefer down / right if same distance
+        const sorted = reversed.sort((a, b) => {
+            return a.distance - b.distance;
+        });
+        const withinReach = sorted.filter(({ withinReach }) => withinReach);
+        let nearest = withinReach.at(0);
+        if (!nearest) {
+            return;
+        }
+        // const nearlySameDistance = _.filter(candidates, (candidate) => {
+        //   return candidate.distance - nearest.distance < 10
+        // })
+        // console.log('nearlySameDistance', nearlySameDistance)
+        // if (nearlySameDistance.length > 1) {
+        //   const ordered = _.orderBy(nearlySameDistance, (candidate) => {
+        //     if (event.key === 'ArrowDown') {
+        //       console.log('ArrowDown', candidate.xDistance)
+        //       return -candidate.xDistance
+        //     }
+        //     if (event.key === 'ArrowUp') {
+        //       return candidate.xDistance
+        //     }
+        //     if (event.key === 'ArrowLeft') {
+        //       return candidate.yDistance
+        //     }
+        //     if (event.key === 'ArrowRight') {
+        //       console.log('ArrowRight', candidate.yDistance)
+        //       return -candidate.yDistance
+        //     }
+        //   })
+        //   console.log('ordered', ordered)
+        //   nearest = _.first(ordered)
+        // }
+        if (nearest.element instanceof HTMLElement) {
+            nearest.element.focus();
+        }
+    }, { capture: true });
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../src/index.mts"],"names":[],"mappings":"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"}

package/dist/lib/getFocusable.d.mts

@@ -0,0 +1 @@
+export declare const getFocusable: () => Element[];

package/dist/lib/getFocusable.mjs

@@ -0,0 +1,15 @@
+export const getFocusable = () => {
+    // Selectors from https://zellwk.com/blog/keyboard-focusable-elements/
+    const allFocusable = document.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex^="-"])');
+    const focusable = Array.from(allFocusable).filter((element) => {
+        if ('disabled' in element && element.disabled)
+            return false;
+        if ('hidden' in element && element.hidden)
+            return false;
+        if (element.getAttribute('aria-hidden') === 'true')
+            return false;
+        return true;
+    });
+    return focusable;
+};
+//# sourceMappingURL=getFocusable.mjs.map

package/dist/lib/getFocusable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFocusable.mjs","sourceRoot":"","sources":["../../src/lib/getFocusable.mts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,sEAAsE;IACtE,MAAM,YAAY,GAAG,QAAQ,CAAC,gBAAgB,CAC5C,oFAAoF,CACrF,CAAA;IACD,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE;QAC5D,IAAI,UAAU,IAAI,OAAO,IAAI,OAAO,CAAC,QAAQ;YAAE,OAAO,KAAK,CAAA;QAC3D,IAAI,QAAQ,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM;YAAE,OAAO,KAAK,CAAA;QACvD,IAAI,OAAO,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,MAAM;YAAE,OAAO,KAAK,CAAA;QAChE,OAAO,IAAI,CAAA;IACb,CAAC,CAAC,CAAA;IACF,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA"}

package/dist/lib/positions.d.mts

@@ -0,0 +1,8 @@
+export declare const getMiddle: (element: Element) => {
+    x: number;
+    y: number;
+};
+export declare const getTopLeft: (element: Element) => {
+    x: number;
+    y: number;
+};

package/dist/lib/positions.mjs

@@ -0,0 +1,12 @@
+export const getMiddle = (element) => {
+    const { x, y, width, height } = element.getBoundingClientRect();
+    return {
+        x: x + width / 2,
+        y: y + height / 2,
+    };
+};
+export const getTopLeft = (element) => {
+    const { x, y } = element.getBoundingClientRect();
+    return { x, y };
+};
+//# sourceMappingURL=positions.mjs.map

package/dist/lib/positions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"positions.mjs","sourceRoot":"","sources":["../../src/lib/positions.mts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,OAAgB,EAAE,EAAE;IAC5C,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAA;IAC/D,OAAO;QACL,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC;QAChB,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,CAAC;KAClB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,OAAgB,EAAE,EAAE;IAC7C,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAA;IAChD,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;AACjB,CAAC,CAAA"}

package/dist/lib/strategies.d.ts

@@ -0,0 +1,26 @@
+type StrategyInput = {
+    event: KeyboardEvent;
+    xDistance: number;
+    yDistance: number;
+    element: Element;
+    angle: number;
+    position: {
+        x: number;
+        y: number;
+    };
+};
+export declare const strategy: {
+    XWalkEuclidean: {
+        withinReachMetric: ({ angle, event }: StrategyInput) => boolean;
+        distanceMetric: ({ xDistance, yDistance }: StrategyInput) => number;
+    };
+    XWalkManhattan: {
+        withinReachMetric: ({ angle, event }: StrategyInput) => boolean;
+        distanceMetric: ({ xDistance, yDistance }: StrategyInput) => number;
+    };
+    XWalkManhattanWeighted: {
+        withinReachMetric: ({ angle, event }: StrategyInput) => boolean;
+        distanceMetric: ({ xDistance, yDistance, event }: StrategyInput) => number | undefined;
+    };
+};
+export {};

package/dist/lib/strategies.js

@@ -0,0 +1,48 @@
+const withinReachMetrics = {
+    XWalk: ({ angle, event }) => {
+        if (event.key === 'ArrowDown' && (angle >= 315 || angle <= 45)) {
+            return true;
+        }
+        if (event.key === 'ArrowLeft' && angle > 45 && angle < 135) {
+            return true;
+        }
+        if (event.key === 'ArrowUp' && angle >= 135 && angle <= 225) {
+            return true;
+        }
+        if (event.key === 'ArrowRight' && angle > 225 && angle < 315) {
+            return true;
+        }
+        return false;
+    },
+};
+const distanceMetrics = {
+    euclidean: ({ xDistance, yDistance }) => {
+        return Math.sqrt(xDistance ** 2 + yDistance ** 2);
+    },
+    manhattan: ({ xDistance, yDistance }) => {
+        return Math.abs(xDistance) + Math.abs(yDistance);
+    },
+    manhattanWeighted: ({ xDistance, yDistance, event }) => {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            return Math.abs(xDistance) + Math.abs(yDistance) * 0.1;
+        }
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            return Math.abs(xDistance) * 0.1 + Math.abs(yDistance);
+        }
+    },
+};
+export const strategy = {
+    XWalkEuclidean: {
+        withinReachMetric: withinReachMetrics.XWalk,
+        distanceMetric: distanceMetrics.euclidean,
+    },
+    XWalkManhattan: {
+        withinReachMetric: withinReachMetrics.XWalk,
+        distanceMetric: distanceMetrics.manhattan,
+    },
+    XWalkManhattanWeighted: {
+        withinReachMetric: withinReachMetrics.XWalk,
+        distanceMetric: distanceMetrics.manhattanWeighted,
+    },
+};
+//# sourceMappingURL=strategies.js.map

package/dist/lib/strategies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"strategies.js","sourceRoot":"","sources":["../../src/lib/strategies.ts"],"names":[],"mappings":"AASA,MAAM,kBAAkB,GAAG;IACzB,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAiB,EAAE,EAAE;QACzC,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC;YAC/D,OAAO,IAAI,CAAA;QACb,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,GAAG,EAAE,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;YAC3D,OAAO,IAAI,CAAA;QACb,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,IAAI,GAAG,IAAI,KAAK,IAAI,GAAG,EAAE,CAAC;YAC5D,OAAO,IAAI,CAAA;QACb,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,IAAI,KAAK,GAAG,GAAG,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;YAC7D,OAAO,IAAI,CAAA;QACb,CAAC;QAED,OAAO,KAAK,CAAA;IACd,CAAC;CACF,CAAA;AAED,MAAM,eAAe,GAAG;IACtB,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAiB,EAAE,EAAE;QACrD,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC,CAAA;IACnD,CAAC;IACD,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAiB,EAAE,EAAE;QACrD,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IAClD,CAAC;IACD,iBAAiB,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAiB,EAAE,EAAE;QACpE,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YACzD,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,GAAG,CAAA;QACxD,CAAC;QACD,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YAC5D,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;QACxD,CAAC;IACH,CAAC;CACF,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,cAAc,EAAE;QACd,iBAAiB,EAAE,kBAAkB,CAAC,KAAK;QAC3C,cAAc,EAAE,eAAe,CAAC,SAAS;KAC1C;IACD,cAAc,EAAE;QACd,iBAAiB,EAAE,kBAAkB,CAAC,KAAK;QAC3C,cAAc,EAAE,eAAe,CAAC,SAAS;KAC1C;IACD,sBAAsB,EAAE;QACtB,iBAAiB,EAAE,kBAAkB,CAAC,KAAK;QAC3C,cAAc,EAAE,eAAe,CAAC,iBAAiB;KAClD;CACF,CAAA"}

package/dist/lib/sumBy.d.mts

@@ -0,0 +1 @@
+export declare const sumBy: <T extends unknown>(arr: Array<T>, func: (item: T) => number) => number;

package/dist/lib/sumBy.mjs

@@ -0,0 +1,2 @@
+export const sumBy = (arr, func) => arr.reduce((acc, item) => acc + func(item), 0);
+//# sourceMappingURL=sumBy.mjs.map

package/dist/lib/sumBy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sumBy.mjs","sourceRoot":"","sources":["../../src/lib/sumBy.mts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,CACnB,GAAa,EACb,IAAyB,EACzB,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA"}

package/index.html

@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>arrowTab</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <div class="flex flex-col gap-48">
+      <div class="grid grid-cols-3 gap-4 p-4 items-baseline">
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" value="Hello" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+      </div>
+
+      <div class="grid grid-cols-3 gap-4 p-4 items-baseline">
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" disabled class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" disabled class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" disabled class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" disabled class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+      </div>
+
+      <div class="grid grid-cols-3 gap-4 p-4 items-baseline">
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input
+          type="text"
+          class="border-2 border-gray-300 p-2"
+          value="✅ Input with Text"
+        />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+
+        <hr class="col-span-3" />
+
+        <input
+          type="text"
+          class="border-2 border-gray-300 p-2"
+          value="✅ input"
+        />
+        <div>
+          <span>❌ input hidden</span>
+          <input type="text" hidden class="border-2 border-gray-300 p-2" />
+        </div>
+        <input
+          type="text"
+          disabled
+          class="border-2 border-gray-300 p-2"
+          value="❌ input disabled"
+        />
+        <button>✅ Button</button>
+        <button disabled>❌ button disabled</button>
+        <button aria-hidden="true">❌ button aria-hidden</button>
+        <a href="#" class="focus:outline">✅ a tag with href</a>
+        <a class="focus:outline">❌ only a tag</a>
+        <div></div>
+        <div tabindex="10">✅ tabindex="10"</div>
+        <div tabindex="0">✅ tabindex="0"</div>
+        <div tabindex="-1">❌ tabindex="-1"</div>
+
+        <hr class="col-span-3" />
+
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <textarea class="border-2 border-gray-300 p-2">
+          ✅ Multiline
+          Textarea
+        </textarea>
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+
+        <hr class="col-span-3" />
+
+        <input
+          type="button"
+          class="border-2 border-gray-300 p-2"
+          value="input button"
+        />
+        <input
+          type="submit"
+          class="border-2 border-gray-300 p-2"
+          value="input submit"
+        />
+        <input
+          type="reset"
+          class="border-2 border-gray-300 p-2"
+          value="input reset"
+        />
+
+        <input type="password" class="border-2 border-gray-300 p-2" />
+        <input type="checkbox" class="border-2 border-gray-300 p-2" />
+        <input type="radio" class="border-2 border-gray-300 p-2" />
+        <input type="file" class="border-2 border-gray-300 p-2" />
+        <input type="image" class="border-2 border-gray-300 p-2" />
+        <input type="email" class="border-2 border-gray-300 p-2" />
+        <input type="url" class="border-2 border-gray-300 p-2" />
+        <input type="tel" class="border-2 border-gray-300 p-2" />
+        <input type="search" class="border-2 border-gray-300 p-2" />
+        <input type="date" class="border-2 border-gray-300 p-2" />
+        <input type="time" class="border-2 border-gray-300 p-2" />
+        <input type="datetime" class="border-2 border-gray-300 p-2" />
+        <input type="datetime-local" class="border-2 border-gray-300 p-2" />
+        <input type="month" class="border-2 border-gray-300 p-2" />
+        <input type="week" class="border-2 border-gray-300 p-2" />
+        <input type="number" class="border-2 border-gray-300 p-2" />
+        <input type="range" class="border-2 border-gray-300 p-2" />
+        <input type="color" class="border-2 border-gray-300 p-2" />
+
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+        <input type="text" class="border-2 border-gray-300 p-2" />
+
+        <!-- TODO: select, details -->
+        <!-- TODO: summary, iframe (?) -->
+      </div>
+    </div>
+    <script type="module">
+      import { initArrowTab } from './dist/index.mjs'
+      initArrowTab()
+    </script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "arrowtab",
+  "version": "0.0.1",
+  "description": "",
+  "main": "dist/index.js",
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "type": "module",
+  "devDependencies": {
+    "concurrently": "^8.2.2",
+    "http-server": "^14.1.1",
+    "typescript": "^5.5.4"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "concurrently \"tsc --watch\" \"http-server -o\"",
+    "build": "tsc",
+    "clean": "rm -rf dist",
+    "prepublish": "pnpm clean && pnpm build"
+  }
+}

package/src/index.mts

@@ -0,0 +1,228 @@
+// TODO: Options
+// modifierKey: 'ctrlKey',
+// onlyWithModifierKey: false, // TODO: Better name
+// strategy: arrowTab.XWalkEuclidean,
+// selector: undefined,
+// elementFilter: () => boolean,
+// getElementPosition: (element) => { x: number, y: number },
+// eventTriggerName: 'keydown' | 'keyup',
+// earlyReturn: (event) => boolean, // TODO: Better name
+
+import { getFocusable } from './lib/getFocusable.mjs'
+import { getMiddle } from './lib/positions.mjs'
+import { strategy } from './lib/strategies.js'
+import { sumBy } from './lib/sumBy.mjs'
+
+export const initArrowTab = () => {
+  document.addEventListener(
+    'keydown',
+    (event) => {
+      const activeStrategy = strategy.XWalkEuclidean
+
+      const activeElement =
+        document.activeElement === document.body
+          ? getFocusable()?.[0]
+          : document.activeElement
+
+      if (!activeElement) {
+        return
+      }
+
+      if (
+        event.key !== 'ArrowLeft' &&
+        event.key !== 'ArrowRight' &&
+        event.key !== 'ArrowUp' &&
+        event.key !== 'ArrowDown'
+      ) {
+        return
+      }
+
+      if (
+        activeElement instanceof HTMLInputElement ||
+        activeElement instanceof HTMLTextAreaElement
+      ) {
+        const selectionStart = activeElement.selectionStart
+        const selectionEnd = activeElement.selectionEnd
+
+        if (
+          event.key === 'ArrowLeft' &&
+          selectionStart !== undefined &&
+          selectionStart !== null &&
+          selectionStart !== 0
+        ) {
+          return
+        }
+
+        if (
+          event.key === 'ArrowRight' &&
+          selectionStart !== undefined &&
+          selectionStart !== null &&
+          selectionStart !== activeElement.value?.length
+        ) {
+          return
+        }
+
+        if (
+          (event.key === 'ArrowLeft' || event.key === 'ArrowRight') &&
+          selectionStart !== undefined &&
+          selectionEnd !== undefined &&
+          selectionStart !== null &&
+          selectionEnd !== null &&
+          selectionStart !== selectionEnd
+        ) {
+          return
+        }
+
+        if (
+          event.key === 'ArrowUp' &&
+          selectionStart !== undefined &&
+          selectionStart !== null &&
+          activeElement instanceof HTMLTextAreaElement
+        ) {
+          const rows = activeElement.value?.split('\n')
+          const start = selectionStart
+          const firstRow = rows.at(0)
+          if (firstRow && start > firstRow.length) {
+            return
+          }
+        }
+
+        if (
+          event.key === 'ArrowDown' &&
+          selectionStart !== undefined &&
+          selectionStart !== null &&
+          activeElement instanceof HTMLTextAreaElement
+        ) {
+          const rows = activeElement.value?.split('\n')
+          const withoutLastRow = rows.slice(0, -1)
+          const lengthUntilLastRow = sumBy(withoutLastRow, (row) => row.length)
+
+          const start = selectionStart
+          if (start <= lengthUntilLastRow + 1) {
+            return
+          }
+        }
+      }
+
+      const inputTypesThatNeedModifierKey: Record<string, string[]> = {
+        date: ['ArrowDown', 'ArrowUp'],
+        time: ['ArrowDown', 'ArrowUp'],
+        datetime: ['ArrowDown', 'ArrowUp'],
+        'datetime-local': ['ArrowDown', 'ArrowUp'],
+        month: ['ArrowDown', 'ArrowUp'],
+        week: ['ArrowDown', 'ArrowUp'],
+        number: ['ArrowDown', 'ArrowUp'],
+        range: ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'],
+      }
+
+      if (activeElement instanceof HTMLInputElement) {
+        const inputType = activeElement.type
+        if (
+          inputTypesThatNeedModifierKey[inputType] &&
+          inputTypesThatNeedModifierKey[inputType].includes(event.key)
+        ) {
+          // TODO: Use modifierKey
+          if (!event.shiftKey) {
+            return
+          } else {
+            event.preventDefault()
+          }
+        }
+      }
+
+      const activePosition = getMiddle(activeElement)
+
+      const allFocusable = getFocusable()
+      const withoutActiveElement = allFocusable.filter(
+        (element) => element !== activeElement,
+      )
+      const withPosition = withoutActiveElement.map((element) => {
+        const position = getMiddle(element)
+
+        // Calculate angle between active element and focusable element
+        const xDistance = position.x - activePosition.x
+        const yDistance = position.y - activePosition.y
+        let angle =
+          Math.acos(yDistance / Math.sqrt(xDistance ** 2 + yDistance ** 2)) *
+          (180 / Math.PI)
+        const direction = xDistance > 0 ? 'right' : 'left'
+        if (direction === 'right') {
+          angle = 360 - angle
+        }
+
+        return {
+          xDistance,
+          yDistance,
+          element,
+          angle,
+          position,
+        }
+      })
+      const withDistance = withPosition.map((focusable) => {
+        const distance = activeStrategy.distanceMetric({ ...focusable, event })
+
+        return {
+          ...focusable,
+          distance,
+        }
+      })
+      const withWithinReach = withDistance.map((focusable) => {
+        const withinReach = activeStrategy.withinReachMetric({
+          ...focusable,
+          event,
+        })
+
+        return {
+          ...focusable,
+          withinReach,
+        }
+      })
+
+      const reversed = [...withWithinReach].reverse() // Prefer down / right if same distance
+
+      const sorted = reversed.sort((a, b) => {
+        return a.distance - b.distance
+      })
+
+      const withinReach = sorted.filter(({ withinReach }) => withinReach)
+
+      let nearest = withinReach.at(0)
+
+      if (!nearest) {
+        return
+      }
+
+      // const nearlySameDistance = _.filter(candidates, (candidate) => {
+      //   return candidate.distance - nearest.distance < 10
+      // })
+
+      // console.log('nearlySameDistance', nearlySameDistance)
+
+      // if (nearlySameDistance.length > 1) {
+      //   const ordered = _.orderBy(nearlySameDistance, (candidate) => {
+      //     if (event.key === 'ArrowDown') {
+      //       console.log('ArrowDown', candidate.xDistance)
+      //       return -candidate.xDistance
+      //     }
+      //     if (event.key === 'ArrowUp') {
+      //       return candidate.xDistance
+      //     }
+      //     if (event.key === 'ArrowLeft') {
+      //       return candidate.yDistance
+      //     }
+      //     if (event.key === 'ArrowRight') {
+      //       console.log('ArrowRight', candidate.yDistance)
+      //       return -candidate.yDistance
+      //     }
+      //   })
+      //   console.log('ordered', ordered)
+      //   nearest = _.first(ordered)
+      // }
+
+      if (nearest.element instanceof HTMLElement) {
+        nearest.element.focus()
+      }
+    },
+    { capture: true },
+  )
+}

package/src/lib/getFocusable.mts

@@ -0,0 +1,13 @@
+export const getFocusable = () => {
+  // Selectors from https://zellwk.com/blog/keyboard-focusable-elements/
+  const allFocusable = document.querySelectorAll(
+    'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex^="-"])',
+  )
+  const focusable = Array.from(allFocusable).filter((element) => {
+    if ('disabled' in element && element.disabled) return false
+    if ('hidden' in element && element.hidden) return false
+    if (element.getAttribute('aria-hidden') === 'true') return false
+    return true
+  })
+  return focusable
+}

package/src/lib/positions.mts

@@ -0,0 +1,12 @@
+export const getMiddle = (element: Element) => {
+  const { x, y, width, height } = element.getBoundingClientRect()
+  return {
+    x: x + width / 2,
+    y: y + height / 2,
+  }
+}
+
+export const getTopLeft = (element: Element) => {
+  const { x, y } = element.getBoundingClientRect()
+  return { x, y }
+}

package/src/lib/strategies.ts

@@ -0,0 +1,62 @@
+type StrategyInput = {
+  event: KeyboardEvent
+  xDistance: number
+  yDistance: number
+  element: Element
+  angle: number
+  position: { x: number; y: number }
+}
+
+const withinReachMetrics = {
+  XWalk: ({ angle, event }: StrategyInput) => {
+    if (event.key === 'ArrowDown' && (angle >= 315 || angle <= 45)) {
+      return true
+    }
+
+    if (event.key === 'ArrowLeft' && angle > 45 && angle < 135) {
+      return true
+    }
+
+    if (event.key === 'ArrowUp' && angle >= 135 && angle <= 225) {
+      return true
+    }
+
+    if (event.key === 'ArrowRight' && angle > 225 && angle < 315) {
+      return true
+    }
+
+    return false
+  },
+}
+
+const distanceMetrics = {
+  euclidean: ({ xDistance, yDistance }: StrategyInput) => {
+    return Math.sqrt(xDistance ** 2 + yDistance ** 2)
+  },
+  manhattan: ({ xDistance, yDistance }: StrategyInput) => {
+    return Math.abs(xDistance) + Math.abs(yDistance)
+  },
+  manhattanWeighted: ({ xDistance, yDistance, event }: StrategyInput) => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      return Math.abs(xDistance) + Math.abs(yDistance) * 0.1
+    }
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      return Math.abs(xDistance) * 0.1 + Math.abs(yDistance)
+    }
+  },
+}
+
+export const strategy = {
+  XWalkEuclidean: {
+    withinReachMetric: withinReachMetrics.XWalk,
+    distanceMetric: distanceMetrics.euclidean,
+  },
+  XWalkManhattan: {
+    withinReachMetric: withinReachMetrics.XWalk,
+    distanceMetric: distanceMetrics.manhattan,
+  },
+  XWalkManhattanWeighted: {
+    withinReachMetric: withinReachMetrics.XWalk,
+    distanceMetric: distanceMetrics.manhattanWeighted,
+  },
+}

package/src/lib/sumBy.mts

@@ -0,0 +1,4 @@
+export const sumBy = <T extends unknown>(
+  arr: Array<T>,
+  func: (item: T) => number,
+) => arr.reduce((acc, item) => acc + func(item), 0)

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "module": "NodeNext",
+    "outDir": "dist",
+    "sourceMap": true,
+    "declaration": true,
+    "lib": ["es2022", "dom", "dom.iterable"]
+  }
+}