# Listbox: Доступность

## Именование

- Назовите список через `aria-labelledby` или `aria-label`. Компонент сам имя не добавляет.
- Так же называйте `ListboxGroup`.

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

| Клавиша | Действие |
| --- | --- |
| <kbd>Tab</kbd> | Переносит фокус на список, и активным становится выбранный вариант или первый доступный. Список — одна остановка табуляции. |
| <kbd>↓</kbd> / <kbd>↑</kbd> | Делает активным следующий или предыдущий доступный вариант, пропуская отключённые и останавливаясь на краях. Фокус остаётся на списке. |
| <kbd>Home</kbd> / <kbd>End</kbd> | Делает активным первый или последний доступный вариант. |
| <kbd>Page Down</kbd> / <kbd>Page Up</kbd> | Переносит активный вариант на 10 вариантов вниз или вверх, останавливаясь на последнем или первом доступном. |
| <kbd>p</kbd> | Поиск при наборе: печатный символ делает активным следующий вариант, чья подпись начинается с набранного текста; быстро набранные символы складываются. Отключается через `typeahead={false}`. |
| <kbd>Enter</kbd> / <kbd>Space</kbd> | Выбирает активный вариант. С `multiple` переключает его, сохраняя остальные выбранные варианты. |

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

- Список — одна остановка табуляции. При фокусе активным становится выбранный вариант или первый доступный.
- Фокус остаётся на списке, варианты его не получают.

## Семантика для скринридеров

- Список рендерит `role='listbox'` и `aria-activedescendant`, а с `multiple` — ещё и `aria-multiselectable`.
- Варианты рендерят `role='option'` с `aria-selected`, а недоступные — с `aria-disabled`.
- Группы рендерят `role='group'`.

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

- `Listbox` не отправляет значение в форме. Храните значение в состоянии и отправляйте его сами или используйте [Select](https://vega-ui.dev/ru/components/select/) с `SelectHiddenSelect`.

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

- список или группа без имени
- интерактивные элементы внутри варианта
- опора на `aria-activedescendant` без проверки в поддерживаемых вами скринридерах