tabindex native javascript

[s24344]

Ребята, подскажите, пожалуйста, как мне решить следующую задачу:

У меня есть некий список элементов:

ul.nav__list
  li.nav__item
    a.nav__item-link
      span Players
  li.nav__item
    a.nav__item-link
      span Coaches
  li.nav__item
    a.nav__item-link
      span Refereed

div.navigation
  a(href="#") Navigation

Мне необходимо реализовать следующий функционал.
После загрузки документа, при нажатии на клавишу Tab, ссылки поочередно получают focus. Мне необходимо, чтобы порядок был слудующий. После фокуса на первой ссылке:
a.nav__item-link

при следующем нажатии на кноку Tab, у меня фокус перешел на:
a(href="#") Navigation

Затем на вторую ссылку:
a.nav__item-link

А после этого сноав на:
a(href="#") Navigation

Далее на третью ссылку
a.nav__item-link

И при следующем нажатии на Tab снова на:
a(href="#") Navigation

И так далее.

И наиболее важный вопрос: как мне в момент фокуса ссылки, вызывать какой либо обработчик.
Пример логики, которую я хочу реализовать есть на следующем сайте:
http://www.kentfa.com/

[Dilettante_Pro]

<style>
ul li { display:inline; 
    border: 1px solid gray; 
}
div a{ border: 1px solid gray; }

</style>
<ul class='nav__list'>
  <li class = 'nav__item'>
    <a href="#" class='nav__item-link'>
      <span> Players </span>
    </a>
  </li>
  <li class = 'nav__item'>
    <a  href="#" class='nav__item-link'>
      <span> Coaches </span>
    </a>
  </li>
  <li class = 'nav__item'>
    <a  href="#" class='nav__item-link'>
      <span> Referees </span>
    </a>
  </li>

<div class='navigation'>
  <a  href="#"><span> Navigation</span> </a>
</div>
<script>
    var flag = true, idx = 0;
    var list = document.querySelectorAll('li a');
    var nav = document.querySelector('div a');
    nav.focus();
    document.onkeydown = function(e) {
        if(e.keyCode == 9) {
           e.preventDefault();
           if(flag) { 
              list[idx].focus(); 
              // здесь можно вызвать обработчик
              idx = (idx < list.length - 1)? idx + 1: 0;
           }
           else { nav.focus(); }
           flag = !flag;
        }
    }
    document.onkeyup = function(e) { if(e.keyCode == 9) e.preventDefault(); }
</script>

[s24344]

Спасибо. Но в данном случае мне не надо делать e.preventDefault();
А без этого функция работает не корректно.

[Dilettante_Pro]

s24344,
Делайте e.preventDefault(); только для e.keyCode == 9

Внес изменения в пример пост 2

И обработчики можно вешать не на document.onkeydown, а на нужный вам блок, в котором лежат эти элементы - если надо, чтобы в других частях страницы TAB работал по-другому

[s24344]

Спасибо.

[s24344]

Вы могли бы подсказать ответ ещё на один вопрос. А если использовать событие focus, а не привязываться к onkeydown. Каким образом мне сделать такую же очередность? Например с помощью атрибута tabindex.

[Dilettante_Pro]

с помощью атрибута tabindex.

Атрибут tabindex задает для каждого элемента только одно значение в последовательности переходов по нажатию клавиши TAB. Поэтому не получатся прыжки через раз на элемент Navigation.

А если использовать событие focus

Как вы себе это представляете? Что нужно делать при наступлении на элементе события focus?

[s24344]

Я уже реализовал задачу с помощью вашего решения, и всё работало отлично. Но teamlead сказал, что это не вариант и надо сделать с помощью tabindex. Сейчас это реализовываю, onFocusPrimaryLink(event) { console.log(event.target); } при событии focus и динамически меняю tabindex.

[Dilettante_Pro]

По фокусу c tabindex.

<style>
ul li { display:inline; 
    border: 1px solid gray; 
}
div a{ border: 1px solid gray; }
:focus { background-color:lightgreen;}
</style>
<ul class='nav__list'>
  <li class = 'nav__item'>
    <a href="#" class='nav__item-link' tabindex="2">
      <span> Players </span>
    </a>
  </li>
  <li class = 'nav__item'>
    <a  href="#" class='nav__item-link' tabindex="4">
      <span> Coaches </span>
    </a>
  </li>
  <li class = 'nav__item'>
    <a  href="#" class='nav__item-link' tabindex="6">
      <span> Referees </span>
    </a>
  </li>
</ul>
<div class='navigation'>
  <a  href="#" tabindex="1"><span> Navigation</span> </a>
</div>
<script>
    var refs = document.querySelectorAll('a');
    var list = document.querySelectorAll('li a');
    var nav = document.querySelector('div a');
    nav.focus();
    [].forEach.call(refs, function(it) {
        it.addEventListener('focus',  function() {
           var ti = +this.getAttribute('tabindex');
           if(this == nav && (ti - 1)%list.length == 0) {
                [].forEach.call(list, function(el) {
                    el.setAttribute('tabindex',(+el.getAttribute('tabindex') + list.length * 2).toString() );
                });
           }
           ti = (ti + 1).toString();
           if(this != nav) nav.setAttribute('tabindex',ti );
       });
    });
</script>

[рони]

надо сделать с помощью tabindex.

хотел бы я видеть, как это возможно.
ниже иная вариация того, что предложил Dilettante_Pro,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  </head>

<body>
<style>
ul li { display:inline;
    border: 1px solid gray;
}
div a{ border: 1px solid gray; }
:focus {
    background-color: #228B22;
}

</style>
<ul class='nav__list'>
  <li class = 'nav__item'>
    <a href="#" class='nav__item-link'>
      <span> Players </span>
    </a>
  </li>
  <li class = 'nav__item'>
    <a  href="#" class='nav__item-link'>
      <span> Coaches </span>
    </a>
  </li>
  <li class = 'nav__item'>
    <a  href="#" class='nav__item-link'>
      <span> Referees </span>
    </a>
  </li>
</ul>
<div class='navigation' >
  <a  href="#"><span> Navigation</span> </a>
</div>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var tabindex = document.querySelectorAll("[tabindex]");
    var li = document.querySelectorAll(".nav__item");
    var nav = document.querySelector(".navigation");
    var idx = 0;
    var ln = li.length;
    [].forEach.call(tabindex, function(elem) {
        elem.removeAttribute("tabindex")
    });
    [].forEach.call(li, function(elem, i) {
        elem.setAttribute("tabindex", i);
        elem.addEventListener("click", function() {
            idx = i
        })
    });
    li[0].focus();
    nav.setAttribute("tabindex", ln);
    document.addEventListener("keydown",
        function(event) {
            if (event.keyCode == 9 && event.target.closest(".nav__item")) {
                event.preventDefault();
                nav.focus()
            } else if (event.keyCode == 9 && event.target.closest(".navigation")) {
                event.preventDefault();
                idx = ++idx % ln;
                li[idx].focus()
            }
        }, true)
});
</script>

</body>
</html>