Код-ревью Senior Дизайн-системы и компоненты обновлено
Ревью компонента «Модальное окно»
Вопрос
Описано поведение компонента «Модальное окно» в дизайн-системе. Найдите проблемы.
1. Открывается по клику, фокус остаётся на кнопке под затемнением
2. Закрытие только крестиком 16 × 16 px в углу, Esc не работает
3. Фокус клавиатуры уходит на элементы страницы под окном
4. После закрытия фокус переносится в начало страницы
5. На мобильном окно 600 px шириной с горизонтальной прокруткой
6. В окне длинная форма на 3 экрана прокрутки
Коротко
Модальное окно один из самых сложных компонентов по доступности: управление фокусом при открытии, удержание, Esc, возврат фокуса, адаптив. Эти правила закрепляют в компоненте дизайн-системы, чтобы командам не решать их каждый раз.
Что должен найти ревьюер
- Ошибкастрока 1При открытии фокус должен перейти внутрь окна (на заголовок или первый элемент), иначе скринридер не узнает об окне.
- Ошибкастрока 2Нужно закрытие по Esc и крестик нормального размера (цель не меньше 24 × 24, лучше 44).
- Ошибкастрока 3Фокус должен оставаться внутри модального окна, пока оно открыто.
- Ошибкастрока 4После закрытия фокус возвращается на элемент, который открыл окно, иначе человек теряет место.
- Ошибкастрока 5Горизонтальная прокрутка на мобильном: окно должно подстраиваться под ширину или открываться на весь экран.
- Стильстрока 6Длинная форма не для модального окна: лучше отдельная страница или пошаговый сценарий.
Разбор
Модальное окно один из самых сложных компонентов по доступности: управление фокусом при открытии, удержание, Esc, возврат фокуса, адаптив. Эти правила закрепляют в компоненте дизайн-системы, чтобы командам не решать их каждый раз.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.