Как установить фокус на модальном окне javascript?

Question

Наш веб-сайт включает в себя некоторый JavaScript, который создает оверлейные модальные окна.

Существует одна проблема с доступностью, хотя после запуска модального режима focus все еще находится на элементе триггера, а не на модальном.сама по себе.

Эти модалы могут включать в себя все виды HTML-элементов, заголовков, абзацев и элементов управления формы.То, что я хотел бы, это фокус, чтобы начать с первого элемента в модале, так что, скорее всего, будет тег h4.

Я исследовал с помощью функции focus(), однако это не работает с рядомhtml elements.

Одна мысль заключалась в том, чтобы добавить в окно пустой тег a, который мог бы привлечь внимание, но я не уверен в этом методе.

Answer 1

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

Вики-страница W3C по доступным модалам предлагает больше информации, чем то, что было задано в OP, соответствующая часть имеет tabindex=-1 в модальном контейнере (который также должен иметь атрибут aria-dialog), поэтому это может получить :focus.

Это наиболее доступный способ установки фокуса на модальный режим. Также имеется больше документации о том, как сохранить его только в модальном режиме - и вернуть его элементу, вызвавшему модальный режим, - здесь можно многое объяснить, поэтому Я предлагаю всем, кто заинтересован, проверить ссылку выше.

Answer 2

Вы можете попытаться размыть () элемент, имеющий фокус .

Answer 3

Вы можете добавить текстовое поле в начало модального HTML, установить фокус, а затем скрыть текстовое поле. Должен иметь желаемый эффект, насколько я понимаю, ваши потребности.