Задача: Исправьте модальное окно

Условие: Исправьте модальное окно

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

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

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

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

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

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

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

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

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