Модальное окно
Условие
Модалка поверх страницы. Требования: · корень - <div class="overlay"> с <div role="dialog"> внутри; · закрытие: Escape, клик по подложке, кнопка <button class="close">; · клик по самому окну НЕ закрывает; · при закрытом состоянии в дереве ничего нет; · пока открыта - у document.body должен стоять style.overflow = 'hidden', после закрытия он восстанавливается.
Что проверяют тесты
закрытая ничего не рисует
открытая показывает содержимое
Escape закрывает
клик по подложке закрывает
клик по окну не закрывает
кнопка закрывает
прокрутка блокируется и восстанавливается
слушатель снимается после закрытия
Как подойти
Три отдельных механизма закрытия и один общий onClose. Клик по подложке ловится на overlay, а окно гасит всплытие - сравнение e.target === e.currentTarget тоже рабочий вариант, назови оба. Блокировка прокрутки: сохранить прежнее значение, а не ставить 'auto'. Что назвать вслух как следующий шаг: портал в body, ловушка фокуса, возврат фокуса на элемент-открыватель, aria-modal и aria-labelledby, стек вложенных модалок.
Подсказки: 3
- Все хуки до раннего return null.
- Клик по подложке и клик по окну различаются через stopPropagation на окне.
- Блокировку прокрутки надо снимать тем же значением, что было до открытия.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.