Доступное модальное окно
Вопрос
Как бы ты сделал доступное модальное окно? Что должно происходить с фокусом и клавиатурой?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
При открытии фокус переходит внутрь окна (на заголовок или первое поле)
Фокус не уходит на фон: ловушка фокуса или инертный фон
Escape закрывает окно
После закрытия фокус возвращается на кнопку, которая открыла окно
Роль dialog, `aria-modal="true"` и имя через `aria-labelledby` на заголовок
Нативный `<dialog>` с `showModal()` даёт большую часть этого из коробки
Что могут спросить следом
- Как сделать фон недоступным для Tab и скринридера?
- Что изменится, если окно не модальное, а всплывашка?
- Как протестировать результат?
Разбор
Сначала проверю, можно ли взять нативный <dialog>: вызов showModal() делает фон инертным, закрывает окно по Escape и отображает его поверх страницы. Если пишу сам, то по пунктам. Окно получает роль dialog, aria-modal="true" и имя через aria-labelledby, указывающее на заголовок. При открытии фокус переводится внутрь, на заголовок с tabindex="-1" или на первое поле. Фон должен стать недоступным: атрибут inert на остальном контенте или ловушка фокуса, чтобы Tab циклился внутри окна. Escape закрывает окно. После закрытия фокус возвращается на кнопку-открывашку, иначе человек потеряет место. Прокрутку фона блокирую. Проверяю клавиатурой и скринридером, потому что автотесты такое не ловят.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.