tabindex 在 chrome 和 firefox 中工作不一样

Question

在 firefox 中完美运行，但在 chrome 和 safari

中有问题

chrome 和 safari 中的问题是当 TAB 键被按下时 link 1 被聚焦（正如预期的那样）。但是当 TAB 被第二次按下时什么也没有发生。理想情况下焦点应该移动到 dropdown 1。第二次按 Tab 键时有效。

预计与 firefox 具有相同的行为。

* {
  margin: 0;
  padding: 0;
}
.menu ul {
  list-style: none;
}
.menu ul > li {
  display: inline-block;
  position: relative;
}
.menu ul > li a {
  display: block;
  padding: 5px 10px;
}
.menu ul > li > ul {
  position: absolute;
  display: none;
}
.menu ul > li.open > ul,
.menu ul > li:hover > ul {
  display: block;
}

<div class="menu">
  <ul>
    <li tabindex="0"><a href="#">Link 1</a></li>
    <li tabindex="0" ><span>dropdown 1</span>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </li>
    <li tabindex="0"><a href="#">Link 2</a></li>
    <li tabindex="0"><a href="#">Link dropdown</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

您的问题的解决方案是在 <li>.

内的链接中添加负标签索引 (tabindex="-1")

有关 tabindex 的更多详细信息，您可以阅读此内容。

https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex

* {
  margin: 0;
  padding: 0;
}
.menu ul {
  list-style: none;
}
.menu ul > li {
  display: inline-block;
  position: relative;
}
.menu ul > li a {
  display: block;
  padding: 5px 10px;
}
.menu ul > li > ul {
  position: absolute;
  display: none;
}
.menu ul > li.open > ul,
.menu ul > li:hover > ul {
  display: block;
}

<div class="menu">
  <ul>
    <li tabindex="0"><a tabindex="-1" href="#">Link 1</a></li>
    <li tabindex="0" ><span>dropdown 1</span>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </li>
    <li tabindex="0"><a tabindex="-1" href="#">Link 2</a></li>
    <li tabindex="0"><a href="#">Link dropdown</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </li>
  </ul>
</div>

tabindex 在 chrome 和 firefox 中工作不一样

tabindex not working same in chrome and firefox

html

css

firefox

google-chrome

tabindex