如何使用键盘方向键在按钮之间导航？

<button tabindex="0">按钮1</button>
<button tabindex="0">按钮2</button>
<button tabindex="0">按钮3</button>

<script>
  const buttons = document.querySelectorAll('button');

  buttons.forEach((button, index) => {
    button.addEventListener('keydown', (event) => {
      const key = event.key;
      let nextIndex;

      if (key === 'ArrowUp' || key === 'ArrowLeft') {
        nextIndex = index === 0 ? buttons.length - 1 : index - 1;
      } else if (key === 'ArrowDown' || key === 'ArrowRight') {
        nextIndex = index === buttons.length - 1 ? 0 : index + 1;
      }

      if (nextIndex !== undefined) {
        buttons[nextIndex].focus();
      }
    });
  });
</script>