Замучился с корректным решением, поэтому более детально опишу задачу, очень надеюсь на вашу помощь.
#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, также корректно работает.