javascript - 用javascript控制TAB的顺序( react )

Question

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

• 将我想忽略的所有内容的 tabindex 设置为 -1(当我想忽略它时)
• 将我想要关注的下一个项目的 tabindex 设置为 1(这不起作用)
• 使用 .focus() 方法聚焦我想要聚焦的下一个元素(这意味着需要处理很多边缘情况)

我在下面添加了我想要实现的目标的草图，顶部框是普通菜单，每个链接都打开自己的子菜单(例如 zalando )

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

Answer 1

根据经验，不要使用正制表符索引。完全没有。如果您希望能够按 Tab 键切换到某些内容，只需将 tabindex 值设置为零，然后使用标记顺序来指定顺序。

仅当您需要聚焦非交互式元素时才应使用负 tabindexes。 (超链接是交互式的，所以就这样了)。

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

如果你有充分的理由在序列中跳转，那么有一个 aria-flowto属性旨在用于此目的，但支持很差，并且指定不完整​​。不过，您可能想尝试一下。如果子导航链接 1 的 ID 为 subnavlink1您可以像这样标记链接 1:

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

这可能适用于某些浏览器，但我注意到它不适用于 Chrome，即使开发者工具中的“辅助功能”选项卡识别出它的存在。

要获得与标记顺序选项卡序列的更可靠的偏差，请收听 focusout或blur事件，在您要“离开”的元素上，并使用该事件处理程序来关注其他一些元素。这些事件是very similar ，都允许您重定向选项卡序列。它们在下一个元素获得焦点之前触发，因此您可以将焦点集中在您喜欢的地方。您可能需要阻止默认或返回 false

基本模式可能是这样的:

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

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

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