combobox

Кога се използва

Използвайте <select>, когато изборът е от кратък, фиксиран списък и потребителят не се нуждае от филтриране. Нативният елемент предоставя мобилно-съвместими менюта, пълна поддръжка на клавиатура и нулев JavaScript.

role="combobox" е предназначен за случаи, при които нативните елементи не са достатъчни:

• Автодовършване с филтриране (търсене на град, споменаване на потребител).
• Предложения, извличани от отдалечен API.
• Елементи, рендирани с богато съдържание (аватари, допълнителен текст).
• Полета за въвеждане на тагове, при които могат да се избират множество стойности.

ARIA 1.2 промени шаблона за combobox съществено. Ролята се поставя върху <input>, а НЕ върху обвиващия контейнер. Изскачащият елемент е отделен role="listbox" (или tree/grid/dialog), свързан с combobox чрез aria-controls.

Договор за клавиатура и фокус

Съгласно шаблона за combobox от APG:

• Фокусът остава върху полето за въвеждане по всяко време. Списъкът се отваря чрез aria-expanded="true", а активната опция се проследява с aria-activedescendant — фокусът НЕ се премества.
• Стрелка надолу отваря изскачащия елемент и премества активната опция към първия ред.
• Стрелките нагоре/надолу преместват активната опция в рамките на изскачащия елемент.
• Enter избира активната опция и затваря изскачащия елемент.
• Escape затваря изскачащия елемент; при второ натискане на Escape полето за въвеждане се изчиства.
• Въвеждането на текст филтрира списъка (когато aria-autocomplete="list" или "both").

Задайте aria-autocomplete на стойност "none", "inline", "list" или "both", за да опишете поведението при предлагане на варианти.

Чести грешки

• Поставяне на role="combobox" върху обвиващия контейнер вместо върху <input> (шаблонът преди версия 1.2). Съвременните екранни четци очакват ролята да е върху редактируемия елемент.
• Преместване на DOM фокуса в listbox при натискане на стрелка надолу. APG изисква aria-activedescendant; преместването на фокуса нарушава възможността за въвеждане на текст.
• aria-expanded заседнало на "false", дори когато изскачащият елемент е видим.
• Listbox рендиран в DOM, но никога не свързан чрез aria-controls.
• Филтриране на списъка, при което aria-activedescendant продължава да сочи към елемент, който вече не съществува.

Пример

<label for="city">City</label>
<input
  id="city"
  type="text"
  role="combobox"
  aria-controls="cityList"
  aria-expanded="false"
  aria-autocomplete="list"
  aria-activedescendant=""
>
<ul id="cityList" role="listbox" hidden>
  <li id="city-1" role="option">London</li>
  <li id="city-2" role="option">Lisbon</li>
  <li id="city-3" role="option">Ljubljana</li>
</ul>