User-Story Combobox

Als Benutzer:in möchte ich ein Feld mit Vorschlagswerten ausfüllen, um gängige Werte schneller eingeben zu können. Hierbei kann ich aber auch Werte eingeben, die nicht in der Vorschlagsliste enthalten sind.

Konstruktion

<kol-input>
  <span slot="label" />
  <div slot="input">
    <input
      type="text"
      role="combobox"
      aria-autocomplete="both"
      aria-expanded="false"
      aria-controls="listbox"
    />
    <kol-icon
      class="open/closed"
    /> 
  </div>
  <ul
    id="listbox"
    role="listbox"
    aria-label=
  >
    <li
      id=
      role="option" />
  </ul>
</kol-input>

Akzeptanzkriterien

• Die Auswahl dient als Vorschlagsliste. Ein eingegebener Wert muss nicht zwingend in der Vorschlagsliste enthalten sein.
• Nur bei direkter Eingabe in das Textfeld, wird die Vorschlagsliste gefiltert.
• Bei Öffnen der Vorschlagsliste (ungeachtet eines eingegebenen Wertes) wird die Liste ungefiltert dargestellt.
• Der Schalter wird nicht als Button, sondern als KolIcon umgesetzt.
• Wenn kein Treffer bei Filtern in der Vorschlagsliste enthalten ist, dann soll die Vorschlagsliste nicht angezeigt werden.
• Keyboard: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/#kbd_label

Hinweise

• Später soll es auch möglich werden, dass die Optionen asynchron nachgeladen werden (z. B. Nachladen von Straßennamen).
• Beim CSS bitte BEM als neue Konvention pilotieren.

Links

• https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/
• https://headlessui.com/react/combobox