javascript42
Главная
Все учебники
Блог
Учебник Focus-trap
Введение
Что такое focus-trap и зачем он нужен
История создания библиотеки
Основные проблемы управления фокусом в вебе
Доступность и WCAG
Установка и подключение
Основы работы с focus-trap
Создание первой ловушки фокуса
Активация и деактивация
Базовая конфигурация
Конфигурация и параметры
Параметр onActivate
Параметр onDeactivate
Параметр initialFocus
Параметр fallbackFocus
Параметр escapeDeactivates
Параметр clickOutsideDeactivates
Параметр allowOutsideClick
Параметр preventScroll
Параметр setReturnFocus
Параметр delayInitialFocus
Управление фокусируемыми элементами
Автоматическое определение фокусируемых элементов
Кастомизация через tabbableOptions
Работа с display: none и visibility: hidden
Игнорирование элементов через data-атрибуты
Принудительное включение элементов в trap
Методы экземпляра ловушки
activate()
deactivate()
pause()
unpause()
updateContainerElements()
Модальные окна
Базовая реализация модального окна
Стилизация overlay
Множественные модальные окна
Вложенные модальные окна
Закрытие по клику вне области
Закрытие по нажатию Escape
Выпадающие меню и дропдауны
Управление фокусом при открытии
Возврат фокуса к триггеру
Навигация стрелками
Автоматическое закрытие
Боковые панели и drawer-компоненты
Создание боковой панели
Анимация и фокус
Управление прокруткой страницы
Интеграция с роутингом
Диалоги и алерты
Alert dialog
Confirm dialog
Невозможность деактивации диалога
Критические уведомления
Продвинутые техники
Динамическое изменение контейнера
Условная активация
Программное управление фокусом внутри trap
Интеграция с Mutation Observer
Работа с Shadow DOM
Производительность
Оптимизация для больших DOM-деревьев
Отложенная инициализация
Переиспользование экземпляров
Очистка ресурсов
Интеграция с фреймворками
React
Angular
Svelte
Web Components
Доступность
ARIA-атрибуты и роли
Тестирование доступности
Типичные ошибки
Отладка и решение проблем
Фокус не попадает в ловушку
Фокус уходит из ловушки
Конфликты с другими библиотеками
Проблемы в iOS Safari
Альтернативы и сравнение
focus-lock
aria-modal
inert-polyfill
Когда не нужен focus-trap
Тестирование
Unit-тестирование ловушек фокуса
E2E-тестирование
Миграция и обновления
Переход с более ранних версий
Обратная совместимость
Расширенная конфигурация
Создание собственных предустановок
Переопределение поведения по умолчанию
Кастомные обработчики событий
Композиция нескольких ловушек
Паттерны и best practices
Когда использовать focus-trap
Переиспользуемые компоненты