Задача: Создайте модальное окно

Условие: Создайте модальное окно

Материал «Создайте модальное окно» относится к области «практическая задача: интерфейсный компонент». Тема «Создайте модальное окно» объединяет визуальный слой, управление фокусом и действие закрытия. Предметная проверка для «Создайте модальное окно»: проверьте доступное название, начальный фокус, Escape и возврат фокуса к кнопке открытия. Результат задачи «Создайте модальное окно» должен сохранять семантический HTML, адаптивную раскладку и понятные состояния управления.

Стартовый код

<dialog aria-labelledby="modal-title">
  <h2 id="modal-title">Настройки</h2>
  <button type="button">Закрыть</button>
</dialog>

Критерии готовности

• Проверьте доступное название, начальный фокус, Escape и возврат фокуса к кнопке открытия применительно к теме «Создайте модальное окно»
• Сопоставьте результат «Создайте модальное окно» с целью «разделить смысловую структуру, раскладку и интерактивное состояние» и объясните каждое использованное условие
• Повторите проверку «Создайте модальное окно» с другими данными и убедитесь, что исключён риск: одного высокого z-index недостаточно для доступного модального окна
• Назначение «Создайте модальное окно» понятно без декоративного оформления

Усложнение задачи

Перенесите тему «Создайте модальное окно» в рабочем фрагменте интерфейса и изменяйте по одному условию. После каждого запуска «Создайте модальное окно» проверяйте: проверьте доступное название, начальный фокус, Escape и возврат фокуса к кнопке открытия.

Самопроверка решения

Проверяя «Создайте модальное окно», соблюдайте правило: проверьте компонент с длинными данными, без JavaScript и только клавиатурой. Для «Создайте модальное окно» изменяйте одно условие за запуск и фиксируйте фактический результат. Затем исключите следующие риски: Одного высокого z-index недостаточно для доступного модального окна — это предметный риск для «Создайте модальное окно»; Визуальное изменение порядка, не совпадающее с DOM и фокусом при использовании «Создайте модальное окно»; Использование физической стороны там, где нужен логический отступ; для «Создайте модальное окно» проверьте это отдельно.