Focus events that tell you which way the user is heading

focus-event.js

// Assuming `app` is some sort of event bus that can emit events...

document.addEventListener("keydown", (e) => {
  if (e.key !== "Tab") {
    return;
  }

  const focusDirection = e.shiftKey ? "previous" : "next";
  const handler = () => {
    app.trigger(`focus:${focusDirection}`);
    app.trigger(`focus:change`, { direction: focusDirection });
    document.removeEventListener("focusin", handler);
  };
  document.addEventListener("focusin", handler);
});