使用javascript控制选项卡的顺序（react）

我正在制作一个电子商务菜单，我需要它完全可以通过键盘访问。为此，我需要中断自然tabindex顺序，但我不确定这里的最佳方法是什么。我想我有三个选择

当我想忽略它时，将我想忽略的所有内容的tabindex设置为-1 将我要关注的下一个项目的tabindex设置为1，该值不起作用 聚焦下一个我想聚焦的元素，使用.Focus方法这意味着需要处理很多边缘情况 我在下面添加了一个我想要实现的草图，顶框是普通菜单，每个链接打开自己的子菜单，例如

有没有一种简单的方法来处理这种情况？我阅读了wai aria模式，并且知道我需要分配的所有角色和标签，这正是给我带来麻烦的焦点。

根据经验，不要使用正向选项卡索引。完全如果希望能够对某个对象进行制表，只需将tabindex的值设为零，然后使用标记顺序来指定序列

只有在需要关注非交互元素时，才应使用负tabindex。超链接是交互式的，所以就这样了

一般来说，如果你在超链接之间导航，你根本不应该弄乱tabindex。超链接已经可以通过键盘聚焦。请不要在或元素上放置tabindex属性。它们已经是选项卡序列的一部分

如果您有很好的理由在序列中跳转，那么就有一个aria flowto属性，该属性用于此目的，但是它的支持性很差，并且没有完全指定。不过，你可能想试试。如果副导航链路1的id为SUNBNAVLINK1，则您可以这样标记链路1：

<a href="whatever.html" aria-flowto="subnavlink1">Link 1</a>

var lnk = document.querySelector("nav > a:nth-child(1)");
var snl = document.querySelector("#subnav > a:nth-child(1)");

lnk.addEventListener("focusout", function () {
    snl.focus();
});

当然，您应该在选择器字符串中对导航索引进行软编码，以便在必要时对所有链接使用相同的技巧。

根据经验，不要使用正选项卡索引。完全如果希望能够对某个对象进行制表，只需将tabindex的值设为零，然后使用标记顺序来指定序列

只有在需要关注非交互元素时，才应使用负tabindex。超链接是交互式的，所以就这样了

一般来说，如果你在超链接之间导航，你根本不应该弄乱tabindex。超链接已经可以通过键盘聚焦。请不要在或元素上放置tabindex属性。它们已经是选项卡序列的一部分

如果您有很好的理由在序列中跳转，那么就有一个aria flowto属性，该属性用于此目的，但是它的支持性很差，并且没有完全指定。不过，你可能想试试。如果副导航链路1的id为SUNBNAVLINK1，则您可以这样标记链路1：

<a href="whatever.html" aria-flowto="subnavlink1">Link 1</a>

var lnk = document.querySelector("nav > a:nth-child(1)");
var snl = document.querySelector("#subnav > a:nth-child(1)");

lnk.addEventListener("focusout", function () {
    snl.focus();
});

---

当然，您应该在选择器字符串中对导航索引进行软编码，以便在必要时可以在所有链接上使用相同的技巧。

Zalando的菜单一团糟，您试图实现的模拟功能恐怕无法访问。按tab键进入子菜单，然后仅使用向上和向下箭头导航（添加左箭头和右箭头）可能会有所帮助。任何使用屏幕阅读器的人都可能迷路/困惑

其中有一个顶级链接，然后旁边有一个向下箭头，可按enter键激活该箭头，以显示子菜单

对于移动设备，您可以将它们转换为每行一个菜单项，并使向下箭头大得多，至少48px乘以48px，并且它也可以在那里工作

---

该示例是一个可访问的模式，具有逻辑选项卡顺序，无需求助于tabindex，您应该不惜一切代价避免使用tabindex。

Zalando的菜单一团糟，您试图通过模拟它们来实现的功能恐怕无法访问。按tab键进入子菜单，然后仅使用向上和向下箭头导航（添加左箭头和右箭头）可能会有所帮助。任何使用屏幕阅读器的人都可能迷路/困惑

其中有一个顶级链接，然后旁边有一个向下箭头，可按enter键激活该箭头，以显示子菜单

对于移动设备，您可以将它们转换为每行一个菜单项，并使向下箭头大得多，至少48px乘以48px，并且它也可以在那里工作

---

该示例是一个可访问的模式，具有逻辑选项卡顺序，无需求助于tabindex，您应该不惜一切代价避免这种情况。

到目前为止，我找到的最佳解决方案是尽可能保持自然选项卡顺序，然后通过css定位subnav。这可能看起来像那样

<nav>
  <Tab tabindex='0' >link 1</Tab>
  <Tab tabindex='-1'>link 2</Tab>
  <Tab tabindex='-1'>link 3</Tab>
  <Subnav>
   ...
  </Subnav>
  <Searchbar />
<nav>

其他选项卡上的tabindex为-1，因此按tab键时会跳过这些选项卡。要获得它们，它们需要以编程方式聚焦，例如，当用户按下向右箭头按钮时，转到向右选项卡

---

这里有一个使用react的例子，使用reach ui tabs组件到目前为止，我发现最好的解决方案是 尽可能保持自然的标签顺序，然后通过css定位subnav。这可能看起来像那样

<nav>
  <Tab tabindex='0' >link 1</Tab>
  <Tab tabindex='-1'>link 2</Tab>
  <Tab tabindex='-1'>link 3</Tab>
  <Subnav>
   ...
  </Subnav>
  <Searchbar />
<nav>

其他选项卡上的tabindex为-1，因此按tab键时会跳过这些选项卡。要获得它们，它们需要以编程方式聚焦，例如，当用户按下向右箭头按钮时，转到向右选项卡

---

这里有一个例子，在react中使用react ui tabs组件

Guess将tabindex设置为第一个选项是很好的，仅将它们设置为1是不够的，将tab设置为1、2、3是按照您希望它们的行为顺序。Guess将tabindex设置为第一个选项是很好的，仅将它们设置为1是不够的，将tab设置为1，2，3按照你希望他们表现的顺序。这也是我更愿意采取的方法！我的答案是为了那些出于某种原因需要在树的其他地方使用subnav的人。这也是我更愿意采用的方法！我的答案是为了那些出于某种原因需要在树的其他地方使用subnav的人。