Calendar

Calendar — продвинутый интерактивный составной компонент для согласованного выбора даты в видах дней, месяцев и лет.

Подпись

У календаря должен быть понятный видимый контекст: подпись поля, заголовок или окружающий текст формы.

Поведение клавиатуры

ОбъявлениеПереведите фокус на демо и нажмите клавишу из таблицы.

Клавиша	Действие
`Tab`	Переносит фокус в сетку дней: на выбранный день, если он в видимом месяце, иначе на сегодня или первый доступный день. В порядке табуляции только один день.
`←→`	Переносит фокус на предыдущий или следующий день, через границы недель и месяцев; видимый месяц следует за фокусом. В RTL стрелки зеркальны: ← ведёт к следующему дню.
`↑↓`	Переносит фокус на тот же день недели предыдущей или следующей недели.
`HomeEnd`	Переносит фокус на первый или последний день недели.
`Page UpPage Down`	Показывает предыдущий или следующий месяц и переносит фокус на тот же день в нём.
`EnterSpace`	Выбирает день в фокусе. На кнопке шапки: «Назад» и «Вперёд» меняют месяц, кнопки месяца и года открывают свои виды.
`Enter`	В виде месяцев или лет: выбирает месяц или год в фокусе и возвращает к дням, сохраняя число месяца. Стрелки, Home и End перемещают между месяцами или годами.
`Escape`	В виде месяцев или лет: возвращает к дням, не меняя месяц, и фокусирует активный день.

Каждая строка проверена в настоящем браузере: Playwright нажимает клавишу в Chromium и смотрит, где оказались фокус и активный элемент.

При переходе на другой месяц день ограничивается длиной целевого месяца, недоступные дни пропускаются, а фокус не выходит за min / max.
Навигация только перемещает фокус; значение меняется, когда выбран день.
Исключённые или отключённые даты стрелки пропускают, и их нельзя выбрать.

Поведение фокуса

у каждой сетки одна точка табуляции — активная ячейка, и она следует за видимым месяцем, годом или страницей, поэтому Tab всегда попадает на видимую ячейку
фокус должен оставаться предсказуемым при переключении между видами дней, месяцев и лет
пользовательские шаблоны дня должны рендерить CalendarDay, чтобы сохранить видимые состояния фокуса

Справа налево

Календарь следует унаследованному направлению текста, как нативные элементы, и никогда не выводит его из locale. Задайте dir='rtl' на <html>, на предке или на корне Calendar. Тогда:

недели идут справа налево, первый день недели — справа
ArrowRight переходит к предыдущему дню, а ArrowLeft — к следующему
следующий месяц находится слева: его показывают свайп влево и CalendarNextButton, а стандартные шевроны зеркалятся

видимый контекст месяца и года должен оставаться понятным
CalendarViewButton сообщает своё состояние через aria-pressed, пока показан её вид
CalendarPrevButton и CalendarNextButton рендерят только шеврон, поэтому задайте им aria-label
Calendar ставит lang на корень, когда передан locale, чтобы скринридеры произносили названия месяцев и дней на этом языке
пользовательское содержимое дня должно по-прежнему читаться как одна выбираемая ячейка даты

Семантика форм

Когда календарь используется внутри обёрток, похожих на поле, перепроверьте, как состояние выбора передаётся обратно в поле.

Риски доступности

пользовательское содержимое ячейки даты, скрывающее смысл даты
отключённые и исключённые даты, которые всё ещё выглядят доступными для выбора
пользовательские шаблоны ячеек, ослабляющие навигацию с клавиатуры