Задача: Улучшите модальное окно

Условие: Улучшите модальное окно

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

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

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

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

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

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

Создайте два варианта «Улучшите модальное окно» в изолированном демо: корректный и содержащий риск «одного высокого z-index недостаточно для доступного модального окна». Объясните различие вариантов «Улучшите модальное окно» по наблюдаемому результату.

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

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