Maybe/app/javascript/controllers/list_keyboard_navigation_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="list-keyboard-navigation"
export default class extends Controller {
  focusPrevious() {
    this.focusLinkTargetInDirection(-1)
  }

  focusNext() {
    this.focusLinkTargetInDirection(1)
  }

  focusLinkTargetInDirection(direction) {
    const element = this.getLinkTargetInDirection(direction)
    element?.focus()
  }

  getLinkTargetInDirection(direction) {
    const indexOfLastFocus = this.indexOfLastFocus()
    let nextIndex = (indexOfLastFocus + direction) % this.focusableLinks.length
    if (nextIndex < 0) nextIndex = this.focusableLinks.length - 1
      
    return this.focusableLinks[nextIndex]
  }

  indexOfLastFocus(targets = this.focusableLinks) {
    const indexOfActiveElement = targets.indexOf(document.activeElement)

    if (indexOfActiveElement !== -1) {
      return indexOfActiveElement
    } else {
      return targets.findIndex(target => target.getAttribute("tabindex") === "0")
    }
  }

  get focusableLinks() {
    return Array.from(this.element.querySelectorAll("a[href]"))
  }
}