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

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

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

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

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

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

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

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

Подготовьте минимальный пример «Сверстайте модальное окно» в изолированном демо. Для «Сверстайте модальное окно» подтвердите цель «разделить смысловую структуру, раскладку и интерактивное состояние» и исключите риск «одного высокого z-index недостаточно для доступного модального окна».

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

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