Специальные возможности
Все компоненты для выбора даты поставляются со встроенной поддержкой специальных возможностей. Навигация с помощью клавиатуры, атрибуты ARIA и управление фокусом работают “из коробки” в каждом варианте — Styled, Tailwind v3/v4 и Headless.
Для стандартного использования дополнительная настройка не требуется. На этой странице документировано, что включено, чтобы вы могли проводить аудит, расширять или воспроизводить шаблоны в пользовательских интерфейсах.
Навигация с помощью клавиатуры
Календарные компоненты
| Клавиша | Действие |
|---|---|
ArrowLeft | Переместить фокус на предыдущий день |
ArrowRight | Переместить фокус на следующий день |
ArrowUp | Переместить фокус на предыдущую неделю (тот же день недели) |
ArrowDown | Переместить фокус на следующую неделю (тот же день недели) |
Enter / Space | Выбрать сфокусированный день |
Escape | Отменить изменения и закрыть всплывающее окно |
Tab | Переместить к следующему фокусируемому элементу (по умолчанию в браузере) |
Пропуск отключенных дат: При навигации с помощью клавиш со стрелками отключенные даты автоматически пропускаются. Компонент ищет до 365 дней в направлении движения, чтобы найти следующую доступную дату.
Автоматическая прокрутка месяца: Когда фокус клавиатуры перемещается на день в другом месяце, вид календаря обновляется, чтобы показать этот месяц.
Компонент выбора времени
| Клавиша | Действие |
|---|---|
Escape | Отменить изменения и закрыть всплывающее окно |
Для выбора времени используется интерфейс с колесом прокрутки с взаимодействием по клику/касанию. В колонках прокрутки используется scroll-snap для точного выбора значения.
Атрибуты ARIA
Каждый интерактивный элемент имеет соответствующие роли и атрибуты ARIA:
Всплывающее окно и контейнер
| Элемент | Атрибут | Значение |
|---|---|---|
| Контейнер всплывающего окна | role | "dialog" |
| Встроенный контейнер | role | "group" |
| Контейнер | aria-label | Текст-заполнитель из локали |
| Контейнер | aria-activedescendant | ID ячейки дня с текущим фокусом |
Кнопка-триггер
| Атрибут | Значение |
|---|---|
aria-expanded | true, когда всплывающее окно открыто |
aria-haspopup | "dialog" |
Сетка календаря
| Элемент | Атрибут | Значение |
|---|---|---|
| Обертка сетки | role | "grid" |
| Ряд недели | role | "row" |
| Ячейка заголовка дня недели | role | "columnheader" |
| Ячейка дня | role | "gridcell" |
| Ячейка дня | aria-selected | true, когда выбрано |
| Ячейка дня | aria-current | "date", когда ячейка является сегодняшним днем |
| Ячейка дня | aria-label | Отформатированная строка даты (например, "2026-03-04") |
| Ячейка дня | disabled | Устанавливается для отключенных дат (нативный атрибут HTML) |
Навигация и выпадающие списки
| Элемент | Атрибут | Значение |
|---|---|---|
| Кнопка предыдущего месяца | aria-label | "Previous month" (из locale.prevMonthLabel) |
| Кнопка следующего месяца | aria-label | "Next month" (из locale.nextMonthLabel) |
| Выпадающий список месяцев | aria-label | "Select month" (из locale.selectMonthLabel) |
| Выпадающий список годов | aria-label | "Select year" (из locale.selectYearLabel) |
Колонки времени
| Элемент | Атрибут | Значение |
|---|---|---|
| Колонка часов | role | "listbox" |
| Колонка часов | aria-orientation | "vertical" |
| Колонка часов | aria-label | "Hours" (из locale.hourLabel) |
| Колонка минут | role | "listbox" |
| Колонка минут | aria-orientation | "vertical" |
| Колонка минут | aria-label | "Minutes" (из locale.minuteLabel) |
| Колонка секунд | role | "listbox" |
| Колонка секунд | aria-orientation | "vertical" |
| Колонка секунд | aria-label | "Seconds" (из locale.secondLabel) |
| Элемент времени | role | "option" (элементы-заполнители: "presentation") |
| Элемент времени | aria-selected | true, когда элемент является текущим значением |
| Переключатель периода | aria-label | Текущий период + ”, toggle AM/PM” |
| Кнопка очистки | aria-label | "Clear" (из locale.clear) |
Все строки меток настраиваются через систему локализации.
Управление фокусом
Скользящий tabindex
Сетка календаря использует паттерн скользящего tabindex:
- Только ячейка дня с текущим фокусом имеет
tabIndex={0}(доступна по Tab). - Все остальные ячейки дня имеют
tabIndex={-1}(не доступны по Tab, но фокусируемы с помощью клавиш со стрелками). - Это означает, что
Tabперемещает фокус из сетки календаря (к следующему элементу управления), а клавиши со стрелками перемещают фокус внутри сетки.
Захват фокуса во всплывающем окне
Режим всплывающего окна использует FloatingFocusManager из @floating-ui/react для:
- Захвата фокуса внутри всплывающего окна, пока оно открыто.
- Возврата фокуса на кнопку-триггер при закрытии всплывающего окна.
- Предотвращения выхода фокуса из всплывающего окна на фоновый контент.
Нативные элементы
Для выбора месяца и года используются нативные элементы <select>, которые по своей природе доступны с клавиатуры. Ячейки дня используют нативные элементы <button> с соответствующими отключенными состояниями.