Как задать tabindex в попапе?

Question

[Саша]

Добрый день.
Использование вэба с помощью горячих клавиш не нова, а вопросы по реализации все еще есть.

На странице есть множество интерактивных элементов по которым можно пройтись с помощью клавиши TAB, тем самым каждый из них будет в фокусе.
Допустим 4й из 10ти это кнопка вызывающая попап либо скрытый блок в котором тоже есть интерактивные элементы.
Попап открывается и при нажатии на TAB фокус оказывается не на элементах в нем, а на тех, которые идут следом за кнопкой вызывающей наше модальное окно.
Как решить данную задачу?

Использование tabindex не дало положительный результат.
Перенос фокуса с использованием JS на попап кажется плохой идеей, так как сам попап не является интерактивным и фокус получить не сможет, а присваивать его первому дочернему элементу это уже костыль.

Набросок кода здесь

Comments

[Kovalsky]

"а присваивать его первому дочернему элементу это уже костыль" - вот это я не очень понял. Когда-то давным давно, когда люди выяснили, что бананов может быть не только 5 или 7, а например 5 и еще чуть больше половины банана, они придумали такой костыль, как вещественные числа, а потом еще придумали комплексные, а это уж вообще костыль чистой воды.

Что может быть плохого в передаче фокуса первому интерактивному элементу в попапе, с технической точки зрения?

[Саша]

Никита Полевой: например если в попапе интерактивный элемент находиться в самом низу, а до него много текста, на экран-два.
поэтому передавать фокус не совсем правильно.

[Kovalsky]

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

[Саша]

Никита Полевой: еще вариант вместо пустышки класть кнопку закрытия (крестик) который в 90% по дизайну находиться как раз вверху, то есть его можно расположить по DOM первым, все равно будет вынесен на абсолюте.

но хочется найти более интересное решение)

Answer 1

[Юнус Газиев]

Вот отличное решение Accessible Modal Dialogs -- A11ycasts #19

Comments

[Саша]

Юнус Газиев спасибо!
Интересно, зачем добавляют пустые компоненты с tabindex, если попап и так идет следом за вызывающей его кнопкой, то есть все равно фокус перейдет на элементы лежащие внутри него.