Navigation 如何使用键盘箭头键在按钮之间导航？

我有一个这样的html结构

<div class="my-class" role="tablist" aria-label="upcoming week">
  <button id="Thu" class="title-box" role="tab" aria-controls="Thu-tab" aria-selected="false">Thu </button>
  <button id="Fri" class="title-box selected" role="tab" tabindex="0" aria-controls="Fri-tab" aria-selected="true">Fri</button>
  <button id="Sat" class="title-box" role="tab" tabindex="0" aria-controls="Sat-tab" aria-selected="false">Sat</button>
  <button id="Sun" class="title-box" role="tab" tabindex="0" aria-controls="Sun-tab" aria-selected="false">Sun</button>
  <button id="Mon" class="title-box" role="tab" tabindex="0" aria-controls="Mon-tab" aria-selected="false">Mon</button>
  <button id="Tue" class="title-box" role="tab" tabindex="0" aria-controls="Tue-tab" aria-selected="false">Tue</button>
  <button id="Wed" class="title-box" role="tab" tabindex="0" aria-controls="Wed-tab" aria-selected="false">Wed</button>
</div>

清华大学
星期五
坐
太阳
周一
星期二
结婚

使用键盘tab键，我可以移动到下一个按钮。但用键盘上的箭头键，它就不起作用了

是否可以使用键盘箭头键在这些按钮之间导航以向前或向后移动

---

键盘箭头键缺少哪些属性？

您没有忘记任何东西。默认情况下，不会自动提供使用箭头键导航。您需要自己实现它

您可以在web上的许多地方找到示例和指南，例如在本页上：

如果使用Angular、vueJS、React或其他类似框架，请注意其组件的键盘支持。

---

有些是非常容易通过键盘访问的，但大多数不是。

您必须实现这一点，它不是内置功能。您也不需要在按钮上设置

tabindex=“0”

，它们已经接收到焦点。从这里开始，您可以下载一个JS文件，它是所有功能的良好起点。