HTML <a> 上的 tabindex 和 children

Question

我的切换导航菜单结构如下：

<li>
  <a href="mylink.page">
    <span class="text">Link Text</span>
    <span tabindex="0" class="button"></span>
  </a>
  <ul>... children ... </ul>
</li>

span.text 包含 link 文本，span.button 是用户可以单击或按键输入以切换嵌套 ul 的元素。

在菜单中切换（测试可访问性）时，我的浏览器（在 Chrome 的最新 public 版本和 Windows 上的 Firefox 中都尝试过）专注于容器 a，然后关注 span.text，然后最后关注 span.button。这是我想要但不希望容器 'a' 得到关注的行为 - 直接转到 span.text.

注意：当聚焦于容器 'a' 时，按回车不会激活 link，只有 children 跨度在聚焦时激活 link（我有在 span.button 上按键输入时阻止 link 工作，因此切换在按键输入上工作）。

这种行为很好，基本上就是我想要的（跨度是 links 由按键输入激活）预计我想在跳转时跳过容器 'a' 并直接进入children 跨越。

tabindex="-1" 对吧？没有。将 tabindex="-1" 添加到容器 'a' 时，span.text 不再获得焦点并且活动的 link 消失了。浏览器关注容器 'a'，然后跳过 span.text 到 span.button。这很奇怪（至少对我而言）。在我看来，tabindex="-1" 用于在跳格时跳过元素。

关于如何在容器 'a' 和 children 跨度的组合上使用 tabindex 以实现我上面所说的任何想法（在菜单中切换仅点击 span.name [哪个有活动 link] 和 span.button)？甚至 javascript/jquery 解决方案？

注意：让 tabindex="0" 似乎是跳转到 span.button 的唯一方法。

编辑：稍加修改后，我将 tabindex="0" 放在容器 'a' 上，它在 Chrome 中运行良好。 Firefox 仍然专注于容器 'a'.

Answer 1

在jQuery中尝试：

$('a:has(span[tabindex])').on('focus', function () {
    $(this).find('span[tabindex]').focus();
}).on('keypress', 'span[tabindex]', function (e) {
    if(e.which === 13) { 
       this.click(); //this not $(this), to call native click method
       //or: $(this).parent()[0].click();
    }
});

对于低于 1.7 的 jQuery，尝试：

$('a:has(span[tabindex])').bind('focus', function () {
    $(this).find('span[tabindex]')[0].focus(); // call js focus(), not jq
}).delegate('span[tabindex]', 'keypress', function (e) {
    if (e.which === 13) {
        this.click(); //this not $(this), to call native click method
        //or: $(this).parent()[0].click();
    }
});

HTML <a> 上的 tabindex 和 children

HTML tabindex on <a> with children

html

css

jquery

tabindex