Именование
- Назовите список через
aria-labelledbyилиaria-label. Компонент сам имя не добавляет. - Так же называйте
ListboxGroup.
Поведение клавиатуры
ОбъявлениеПереведите фокус на демо и нажмите клавишу из таблицы.
| Клавиша | Действие |
|---|---|
| Tab | Переносит фокус на список, и активным становится выбранный вариант или первый доступный. Список — одна остановка табуляции. |
| ↓↑ | Делает активным следующий или предыдущий доступный вариант, пропуская отключённые и останавливаясь на краях. Фокус остаётся на списке. |
| HomeEnd | Делает активным первый или последний доступный вариант. |
| Page DownPage Up | Переносит активный вариант на 10 вариантов вниз или вверх, останавливаясь на последнем или первом доступном. |
| p | Поиск при наборе: печатный символ делает активным следующий вариант, чья подпись начинается с набранного текста; быстро набранные символы складываются. Отключается через typeahead={false}. |
| EnterSpace | Выбирает активный вариант. С multiple переключает его, сохраняя остальные выбранные варианты. |
Поведение фокуса
- Список — одна остановка табуляции. При фокусе активным становится выбранный вариант или первый доступный.
- Фокус остаётся на списке, варианты его не получают.
Семантика для скринридеров
- Список рендерит
role='listbox'иaria-activedescendant, а сmultiple— ещё иaria-multiselectable. - Варианты рендерят
role='option'сaria-selected, а недоступные — сaria-disabled. - Группы рендерят
role='group'.
Семантика формы
Listboxне отправляет значение в форме. Храните значение в состоянии и отправляйте его сами или используйте Select сSelectHiddenSelect.
Риски доступности
- список или группа без имени
- интерактивные элементы внутри варианта
- опора на
aria-activedescendantбез проверки в поддерживаемых вами скринридерах