Порталы, удержание фокуса и закрытие клавишей Escape
Рендерьте модальные окна через порталы, удерживайте фокус для пользователей клавиатуры и закрывайте окна клавишей Escape или щелчком по фону, обеспечивая базовую доступность.
«Порталы, удержание фокуса и закрытие клавишей Escape» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 3 уроков всего.
Зачем нужны порталы и ловушки фокуса
Цель: создавать модальные окна, удобные для всех пользователей.
- Портал в body
- Ловушка фокуса удерживает переход по Tab внутри
- Клавиша выхода и фон для закрытия
Основы доступности
- Используйте role="dialog" и aria-modal="true"
- При открытии переводите фокус на первый интерактивный элемент
- При закрытии возвращайте фокус на элемент, открывший окно
Демонстрация: модальное окно через портал (открытие и закрытие)
Отображайте диалог через портал, чтобы он находился поверх всех остальных элементов.
<div id="root"></div>Демонстрация: основы ловушки фокуса
Автоматически устанавливайте фокус на первую кнопку и удерживайте клавишу Tab внутри диалога.
<div id="root"></div>Демонстрация: способы закрытия и восстановление фокуса
Закрывайте окно клавишей выхода или нажатием на фон и возвращайте фокус на кнопку, открывшую окно.
<div id="root"></div>Советы и контрольный список
- Добавляйте role="dialog" и aria-modal="true"
- При открытии переводите фокус на первый элемент управления; при закрытии возвращайте его на элемент, открывший окно
- Обрабатывайте нажатие клавиши выхода и щелчок по фону
Проверка доступности модального окна
Итоги
Итоги: отображайте модальные окна через портал, удерживайте фокус внутри и позволяйте пользователям закрывать окно клавишей выхода или нажатием на фон, возвращая фокус на элемент, который его открыл.
Часто задаваемые вопросы
Урок «Порталы, удержание фокуса и закрытие клавишей Escape» бесплатный?
Да — полный текст урока «Порталы, удержание фокуса и закрытие клавишей Escape» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 3 уроков всего.
Чему я научусь в уроке «Порталы, удержание фокуса и закрытие клавишей Escape»?
Рендерьте модальные окна через порталы, удерживайте фокус для пользователей клавиатуры и закрывайте окна клавишей Escape или щелчком по фону, обеспечивая базовую доступность. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «Порталы, удержание фокуса и закрытие клавишей Escape»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Порталы, удержание фокуса и закрытие клавишей Escape
- Глобальный менеджер наложений (Context и Reducer)
- Объявления для доступности (aria-live)