Нативный dialog: открытие, закрытие и возврат фокуса

Окно появилось поверх страницы — это только половина работы. Его ещё нужно открыть с клавиатуры, прочитать, закрыть и вернуться к прежней кнопке. Нативный dialog берёт часть этой работы на себя. Покажем короткое информационное окно через showModal и разберём, что всё равно остаётся проверить вручную.

Короткая разметка с явным названием

<button id="open-info">Правила публикации</button>
<dialog id="info" aria-labelledby="info-title">
  <h2 id="info-title">Правила публикации</h2>
  <p>Проверьте заголовок и уберите приватные данные из примера.</p>
  <form method="dialog">
    <button autofocus>Понятно</button>
  </form>
</dialog>
<script>
const opener = document.querySelector('#open-info');
const dialog = document.querySelector('#info');
opener.addEventListener('click', function () {
  if (!dialog.open) dialog.showModal();
});
dialog.addEventListener('close', function () {
  opener.focus();
});
</script>

Заголовок связывается с окном через aria-labelledby. Кнопка внутри формы с method dialog закрывает окно без обычной сетевой отправки формы. В коротком информационном окне фокус можно сразу поставить на кнопку закрытия. Для большого текста или сложной формы начальную точку нужно выбирать по задаче, чтобы пользователь сразу понимал содержание и не пропускал важную информацию перед первым полем.

Модальность задаёт метод

showModal помещает окно в верхний слой и делает остальное содержимое документа недоступным для обычного взаимодействия. Простое добавление open или вызов show создают другой режим и не заменяют модальность. Не пытайтесь компенсировать это только высоким z-index. У нативного dialog есть стандартная обработка запроса закрытия с клавиатуры; если приложение отменяет событие cancel, оно обязано сохранить понятный доступный способ выйти из окна.

Пример возвращает фокус одной известной кнопке. В интерфейсе с несколькими инициаторами нужно запомнить фактический элемент открытия и проверить, что он ещё существует и доступен. Не удаляйте видимый контур фокуса без равноценной замены. Закрытие по щелчку на подложке здесь не реализовано: если продукту оно нужно, это отдельная договорённость, которую проверяют вместе с прокруткой, текстовым выделением и сенсорным вводом. Не следует считать любое движение указателя за пределами окна намерением закрыть его.

Проверяем клавиатурой

Пройдите окно с клавиатуры: откройте, нажмите Tab, закройте кнопкой и Escape. Фокус должен вернуться к кнопке открытия. Затем проверьте название с экранным диктором, узкий экран и увеличение масштаба. Для браузера без поддержки dialog оставьте тот же текст в доступном обычном разделе.

Источники и дальнейшее чтение

• WHATWG: элемент dialog
• MDN: элемент dialog