Скажем, у меня есть документ, полный сосредоточенных элементов, потому что они врожденно ориентированы (например, <input type="text">) или потому, что у них есть tabindex="0" или тому подобное.
Теперь скажем там раздел моего документа, который я хочу отобразить как модальное диалоговое окно, и я не хочу, чтобы пользователь был отвлечен чем-либо вне диалогового окна. Я хотел бы, чтобы клавиша табуляции выполняла цикл только через фокусируемые элементы внутри элемента контейнера для диалогового окна. Каков самый простой способ сделать это?
Если возможно, я ищу решение, которое не заботится о содержимом диалога или остальной части страницы и не пытается их модифицировать. То есть, я не хочу, чтобы, например, элементы за пределами диалогового окна не были сфокусированы. Во-первых, это требует принятия обратимых изменений и отслеживания состояния. Во-вторых, это требует знания всех возможных способов, которыми элемент мог бы стать ориентируемым. Это кажется грязным, хрупким и неуязвимым для меня.
Моя первая попытка выглядит так, но работает только в прямом направлении (нажатие Tab). Он не работает в обратном направлении (нажимайте Shift + Tab).
<div>Focusable stuff outside the dialog.</div>
<div class="dialog" tabindex="0">
<!-- Focus should be trapped inside this dialog while it open -->
<div class="content">
Form contents and focusable stuff here.
</div>
<div class="last-focus" tabindex="0" onfocus="this.parentNode.focus()"></div>
</div>
<div>More focusable stuff outside the dialog.</div>
Я бы предпочел увидеть чистые решения для JavaScript. Если есть способ сделать это с помощью библиотеки, такой как jQuery, я бы предпочел ссылку на код библиотеки, который делает это.