рони,
Таки смотрите пост 9

Dilettante_Pro,
ок, но я предполагал только некую секретную установку tabindex, без следующего изменения. :)

Так можно сделать только один проход (но менять tabindex элемента Navigator все равно нужно).
Если не менять tabindex у li a, то нужен в конце холостой элемент, на котором делать focus() на начало.

Вариант, работающий также в IE и FF

<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>
  <li class = 'nav__item'>
    <a  href="#" class='nav__item-link' tabindex="8">
      <span> &lArr; </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');
           ti = (ti + 1).toString();
           if(this != nav) nav.setAttribute('tabindex',ti );
           if(this == list[list.length - 1]) list[0].focus();
       });
    });
</script>

Замучился с корректным решением, поэтому более детально опишу задачу, очень надеюсь на вашу помощь.

#app

  a.some-links link
  a.some-links link

  ul.list
    li.list__item
      a(href="#" data-nav-id="_1").list__link First

    li.list__item
      a(href="#" data-nav-id="_2").list__link Second

    li.list__item
      a(href="#" data-nav-id="_3").list__link Third

  ul.nav
    li(data-nav-id="_1").nav__item
      a(href="#").nav__link first

      .nav__popup
        ul.nav__popup-list
          li.nav__popup-item
            a(href="#").nav__popup-link first 1
          li.nav__popup-item
            a(href="#").nav__popup-link first 2

    li(data-nav-id="_2").nav__item
      a(href="#").nav__link second

      .nav__popup
        ul.nav__popup-list
          li.nav__popup-item
            a(href="#").nav__popup-link second 1

    li(data-nav-id="_3").nav__item
      a(href="#").nav__link Third

      .nav__popup
        ul.nav__popup-list
          li.nav__popup-item
            a(href="#").nav__popup-link third 1

  a(href="#").nav-pane pane

  a.some-links link
  a.some-links link

Должно работать как данном примере: http://www.kentfa.com/

При первом нажатии на tab, первый элемент a или button принимает focus, после чего в default порядке происходит смена focus, но когда focus принимает .list__link, далее при нажатии на клавишу tab, focus переходит на .nav-pane(без фокуса он скрыт). Далее мы нажимаем на enter (space), фактически это событие click, и появляется .nav__item (с соответствуещей привязкой по data атрибутам), далее мы при нажатии на tab также меняем фокус по default порядку. Когда же будет последний элемент .list__item, мы в последний раз перейдем на .nav__popup, и далее вниз по a (button). И также важно, что default навигация, смена focus, при shift + tab, также корректно работает.

не осилил ни ваше описание, ни даже пример, не могу понять, что вы там нашли, может кто другой сможет помочь.

Если сказать проще.
http://www.kentfa.com/
В этом примере при загрузке страницы мы tab доходим до меню. Далее после каждого пункта переход на панель открытия. Можно сказать не стандартный tabindex.

ок понятно, вы пост №10 смотрели?

Всё, разобрался, спасибо.