combobox

Составная роль виджета из WAI-ARIA для комбинированного списка. Также его иногда называют полем со списком. В такое поле можно ввести данные или заполнить его, выбрав опцию из связанного с ним выпадающего списка.

В HTML эта роль есть у <select> без атрибута multiple и с size со значением 1.

Задайте role="combobox" любому тегу, лучше всего <div>, <span> или <input>.

ARIA-роли не изменяют внешний вид и поведение элементов, поэтому не забудьте стилизовать список и добавить поддержку клавиатуры с помощью JavaScript и tabindex, когда используете неинтерактивный элемент.

Элемент combobox важно связать с выпадающим списком с опциями для выбора из элементов с listbox, tree, grid или dialog с помощью aria-controls.

У комбинированного списка обязательно должен быть атрибут aria-expanded.

Для combobox можно также использовать все глобальные ARIA-атрибуты, атрибуты виджетов aria-autocomplete, aria-errormessage, aria-haspopup, aria-invalid, aria-readonly, aria-required и ещё один атрибут связи aria-activedescendant.

По умолчанию у роли combobox есть атрибут aria-haspopup со значением listbox.