SSMW - Единый стандарт для модальных окон

Определения

Стандарт SSMW определяет требования к семантике, доступности и логике работы модального окна.

Структура и Семантика

<dialog> является предпочтительным элементом для модальных окон, так как он редоставляет встроенную поддержку aria-modal="true", что повышает доступность.

Если <dialog> рендерится внутри контейнера, отличного от body, задается position: static' для предотвращения наследования конфликтующих свойств, в корне документа используется стандартное абсолютное или фиксированное позиционирование для оверлеев, для Safari и Edge необходимо использовать overscroll-behavior-block: none; чтобы предотвратить «резиновый» скролл, и при открытой клавиатуре на мобильных устройствах окно выравнивать по верхнему краю, чтобы поле ввода оставалось в зоне видимости.

Модальное окно следует добавлять в DOM только при вызове окна, а для предотвращения смещения интерфейса при блокировке прокрутки основной страницы рекомендуется ставить scrollbar-gutter: stable; на html.

Доступность

Модальное окно должно управлять фокусом локально, чтобы пользователь мог перемещаться между интерактивными элементами с помощью Tab, не покидая модалку, при наличии нескольких слоев необходимо корректно управлять z-index и фокусом, а блокировать прокрутку и фокусировать нужно только верхний активный слой.

Автоматический фокус на первый <input> после открытия окна ускоряет ввод данных.

Интерактивность и Визуальный отклик

Модальное окно должно корректно реагировать на все три привычных способа закрытия, Esc, кнопка Закрыть, клик по backdrop, после успешной отправки формы модалка закрывается, уступая место краткому сообщению об успешном запросе, такой сценарий завершения обеспечивает предсказуемый и приятный пользовательский опыт.

Появление и скрытие модалки рекомендуется реализовывать через CSS-классы с плавными переходами, это добавит интерфейсу ощущение завершенности и визуальной мягкости, также лучше добавить внутренние паддинги которые предотвратят прилипание модалки к границам экрана, ещё нужно учитывать что модалка может быть выше чем viewport, поэтому нужно предусмотреть внутренний скролл.