DOM и React Senior DOM на практике обновлено
Ловушка фокуса
Условие
В модалке Tab с последнего фокусируемого элемента должен переводить на первый, Shift+Tab с первого - на последний. Напиши обработчик keydown для контейнера.
Что проверяют тесты
Tab с последнего уходит на первый
Shift+Tab с первого уходит на последний
в середине списка не вмешивается
Как подойти
Ловушка фокуса - обязательная часть доступной модалки. Три детали: собирать фокусируемые элементы каждый раз заново (список меняется), вмешиваться только на границах, не забыть про disabled и tabindex=-1. Полная версия ещё возвращает фокус на элемент-открыватель при закрытии.
Подсказки: 3
- Список фокусируемых элементов собирается селектором по querySelectorAll.
- Вмешиваться нужно только на краях списка, иначе сломаешь обычную навигацию.
- tabindex="-1" исключает элемент из обхода.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.