Учебник React Aria

Введение
- Что такое React Aria
- История создания и развитие библиотеки
- Основные принципы и философия
- Сравнение с другими решениями для доступности
- Когда использовать React Aria
- Структура библиотеки и экосистема
- Требования и зависимости
Установка и настройка
- Установка через npm и yarn
- Настройка проекта с webpack
- Настройка проекта с Vite
- Интеграция с TypeScript
- Настройка линтеров для доступности
- Импорт компонентов и хуков
- Версионирование и обновления
Основы доступности в вебе
- Стандарты WCAG и их уровни
- Модель ARIA и её роль
- Семантический HTML и его важность
- Управление фокусом
- Навигация с клавиатуры
- Скринридеры и вспомогательные технологии
- Тестирование доступности
Архитектура React Aria
- Разделение логики и представления
- Хуки для поведения
- Хуки для состояния
- Утилитарные хуки
- Взаимодействие между хуками
- Паттерны композиции
- Управление рефами
Работа с фокусом
- usePress и обработка взаимодействий
- useFocus и события фокуса
- useFocusRing и индикация фокуса
- useFocusVisible и режимы ввода
- useFocusWithin для контейнеров
- FocusScope и изоляция фокуса
- Управление порядком фокуса
Обработка событий клавиатуры
- useKeyboard для клавиатурных событий
- Горячие клавиши и комбинации
- Навигация по элементам
- Делегирование событий
- Предотвращение дефолтного поведения
- Кроссбраузерная совместимость
Формы и ввод данных
- useTextField для текстовых полей
- useNumberField для числовых полей
- useSearchField для поиска
- Валидация в реальном времени
- Сообщения об ошибках
- Связывание label и input
- Управление состоянием формы
Кнопки и интерактивные элементы
- useButton для кнопок
- useToggleButton для переключателей
- useLink для ссылок
- Состояния pressed и disabled
- ARIA-атрибуты для кнопок
- Обработка нажатий разными способами
- Группы кнопок
Чекбоксы и радиокнопки
- useCheckbox для одиночных чекбоксов
- useCheckboxGroup для групп
- useRadio и useRadioGroup
- Индетерминантное состояние
- Обязательные поля
- Описания и подсказки
- Стилизация состояний
Селекты и комбобоксы
- useSelect для выпадающих списков
- useComboBox для комбобоксов
- useListBox для списков опций
- Фильтрация и поиск
- Множественный выбор
- Виртуализация длинных списков
- Группировка опций
- Асинхронная загрузка данных
Меню и навигация
- useMenu для выпадающих меню
- useMenuItem для пунктов меню
- useMenuTrigger для триггеров
- Подменю и вложенность
- Разделители и заголовки
- Навигация стрелками
- Закрытие меню
Оверлеи и модальные окна
- useOverlay для оверлеев
- useModal для модальных окон
- useDialog для диалогов
- ModalProvider и контекст
- Управление фокусом в модалах
- Закрытие по Escape и клику вне
- Стек модальных окон
- DismissButton для скринридеров
Поповеры и тултипы
- usePopover для поповеров
- useTooltip для подсказок
- useTooltipTrigger для триггеров
- Позиционирование относительно триггера
- Задержки показа и скрытия
- Arrow элемент
- Доступность тултипов
Табы и аккордеоны
- useTabs для вкладок
- useTabList и useTab
- useTabPanel для содержимого
- Ориентация табов
- Клавиатурная навигация
- Динамические табы
- useAccordion для аккордеонов
Слайдеры и прогрессбары
- useSlider для слайдеров
- useSliderThumb для ползунков
- Диапазонные слайдеры
- Шаг и границы значений
- Форматирование значений
- useProgressBar для прогресса
- Определённый и неопределённый прогресс
Переключатели и свитчи
- useSwitch для переключателей
- Визуальное состояние
- ARIA-атрибуты свитчей
- Отключенное состояние
- Только для чтения
Таблицы и гриды
- useTable для таблиц
- useTableHeaderRow и useTableRow
- useTableCell для ячеек
- Сортировка столбцов
- Выделение строк
- useGridList для списков-гридов
- Навигация по двумерной структуре
- ARIA grid роль
Календари и выбор даты
- useCalendar для календарей
- useCalendarCell для дат
- useCalendarGrid для сетки
- useDatePicker для выбора даты
- useDateRangePicker для диапазонов
- useDateField для ввода даты
- Локализация дат
- Временные зоны
- Ограничения на даты
Выбор времени
- useTimeField для ввода времени
- Форматы времени
- 12 и 24-часовой формат
- Валидация времени
Перетаскивание
- useDrag для перетаскиваемых элементов
- useDrop для зон сбрасывания
- useDroppableCollection для коллекций
- Предпросмотр при перетаскивании
- Индикаторы вставки
- Доступность drag and drop
- Альтернативы для клавиатуры
Коллекции и списки
- useCollection для работы с коллекциями
- Item компонент
- Section для группировки
- Динамические коллекции
- Ключи элементов
- Виртуализация
- useListState для состояния списков
Выделение элементов
- useSelectableCollection для выделения
- useSelectableItem для элементов
- useSelectableList для списков
- Одиночное выделение
- Множественное выделение
- Выделение диапазонов
- Программное управление выделением
Утилиты для ARIA
- useId для уникальных идентификаторов
- useLabel для связи с метками
- useField для полей ввода
- useDescription для описаний
- useErrorMessage для ошибок
- mergeProps для объединения пропсов
- Утилиты для ARIA-атрибутов
Интернационализация
- Локализация интерфейса
- useLocale для текущей локали
- Форматирование чисел
- Форматирование дат
- Направление текста RTL/LTR
- Переводы сообщений
- Региональные особенности
Управление состоянием
- useControlledState для контролируемого состояния
- useUncontrolledState для неконтролируемого
- useToggleState для переключателей
- useOverlayTriggerState для оверлеев
- useMenuTriggerState для меню
- Синхронизация состояния
Взаимодействие с DOM
- useSyntheticBlurEvent для blur событий
- useInteractionModality для режима ввода
- useHover для наведения
- useLongPress для долгого нажатия
- useMove для движения
- Обработка событий касаний
- Мультимодальность взаимодействий
Анимации и переходы
- Управление анимациями при монтировании
- Задержки для плавных переходов
- Синхронизация с состоянием
- Доступность анимаций
- Уважение prefers-reduced-motion
Виртуализация
- useVirtualizer для виртуализации
- Расчёт видимых элементов
- Динамические размеры
- Сохранение позиции скролла
- Производительность больших списков
Стилизация компонентов
- Подходы к стилизации
- Условные стили на основе состояния
- CSS-in-JS интеграция
- Tailwind CSS интеграция
- CSS модули
- Темизация
Тестирование
- Юнит-тестирование хуков
- Тестирование взаимодействий
- Автоматизированные тесты a11y
- Ручное тестирование со скринридерами
Производительность
- Оптимизация рендеринга
- Мемоизация хуков
- Ленивая загрузка
- Профилирование
- Bundle size оптимизация
Интеграция с React Stately
- Назначение React Stately
- Хуки состояния
- Совместное использование
- Разделение ответственности
- Переиспользование логики
Интеграция с другими библиотеками
- Работа с React Hook Form
- Использование с Formik
- Интеграция с React Router
- Совместимость с Next.js
- Работа с Redux
Создание собственных компонентов
- Композиция хуков
- Создание кастомных хуков
- Расширение функциональности
- Переиспользуемые паттерны
- Документирование компонентов
Миграция и рефакторинг
- Миграция с других библиотек
- Поэтапное внедрение
- Обратная совместимость
- Рефакторинг существующих компонентов
Отладка
- Распространённые проблемы
- Логирование событий
- Проверка ARIA-атрибутов
- Решение конфликтов фокуса
Лучшие практики
- Паттерны проектирования
- Организация кода
- Обработка ошибок
- Документирование интерфейсов
Справочник API
- Полный список хуков
- Сигнатуры функций
- Типы TypeScript
- Возвращаемые значения
- Параметры и опции