Tabindex не работает одинаково в Chrome и Firefox - PullRequest
Новая
       13

Tabindex не работает одинаково в Chrome и Firefox

0 голосов
/ 29 октября 2018

Прекрасно работает в Firefox, но имеет проблемы в Chrome и Safari

Проблема в Chrome и Safari возникает при нажатии клавиши TAB link 1 находится в фокусе (как и ожидалось). Но при нажатии TAB во второй раз ничего не происходит. В идеале фокус должен переместиться на dropdown 1. Работает, когда вкладка нажата во второй раз.

Ожидается, что будет вести себя так же, как 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>

1 Ответ

0 голосов
/ 29 октября 2018

Решением вашей проблемы является добавление отрицательного индекса вкладки (tabindex="-1") к ссылкам внутри <li>.

Для получения более подробной информации о 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>
...