Как сделать tabindex локализованным внутри div ⇐ Jquery

[Anonymous]

Я пытаюсь привести примеры плохой практики с точки зрения доступности. У меня есть три примера, связанных с Keyboard Focus. Первый пример: вы не можете увидеть фокус на наборе кнопок. Второй пример: порядок фокуса нелогичен. Чтобы выполнить второй и третий примеры, мне нужно добавить атрибут tabindex к некоторым тегам.
У меня возникли небольшие проблемы с пониманием того, как я могу перемещаться по первым 4 кнопкам (по порядку), затем переходить к форме (в порядке первого поля, отправки, третьего поля и затем второго поля), а затем, наконец, к блоку ссылок (по порядку, но с циклом).
В настоящее время происходит табуляция. через первые 4 кнопки работает, но потом фокус переходит на адресную строку URL, а затем на поля ввода. Я хочу, чтобы порядок фокуса переходил от div к div. Также отмечу, что это будет панель вкладок на веб-сайте, поэтому я хочу, чтобы она была довольно изолированной.
Надеюсь, это имеет смысл, у меня не так уж много опыта в веб-разработке. Вот Codepen и HTML для справки!
Codepen: https://codepen.io/anon/pen/ZyaMrP

button:focus {
outline: none !important;
text-decoration: none !important;
}


Unfocusable buttons

button 1
button 2
button 3
button 4

Unintuitive Focus Order


input 1


input 2


input 3





Focus Trap (Loop)

link 1
link 2
link 3



Подробнее здесь: https://stackoverflow.com/questions/447 ... thin-a-div