51.1.7

CustomWebResolver – Combobox

Comboboxen bieten die Herausforderung, dass es einen Teil für die Texteingabe bzw. das Öffnen einer Auswahlliste gibt sowie die angezeigte Liste mitsamt ihren Einträgen. Eine Listauswahl wird entsprechend immer mit zwei Mausklicks aufgezeichnet. Der erste Klick, der die Liste öffnet, und der zweite Klick, der den Listeneintrag auswählt.

Ein HTML SELECT Knoten wird automatisch zu einer ComboBox gemappt und die Listenauswahl wird als ein Auswahl Knoten aufzeichnet.

Für die Liste würde es auch ausreichen reine Listen und Listeneinträge zu mappen, also List und Item:ListItem, siehe Abschnitt 51.1.6.

Beispiel:

HTML-Code für eine ComboBox:

<div class="combobox-wrapper">
  <div role="combobox" aria-expanded="true" aria-owns="ex1-listbox" aria-haspopup="listbox" id="ex1-combobox">
    <input type="text" aria-autocomplete="list" aria-controls="ex1-listbox" id="ex1-input" aria-activedescendant="">
  </div>
  <ul aria-labelledby="ex1-label" role="listbox" id="ex1-listbox" class="listbox">
    <li class="result" role="option" id="result-item-0">Leek</li>
    <li class="result" role="option" id="result-item-1">Lemon</li>
  </ul>
</div>

Eine ComboBox besteht aus dem Container-Element, in dem die aktuelle Auswahl angezeigt wird, sowie aus einer Liste, die die auswählbaren Werte enthält. In unserem Beispiel ist diese Liste im dem DIV-Objekt enthalten, das auch die ComboBox selbst enthält. Oft ist die Liste jedoch an einer ganz anderen Stelle im DOM definiert. Diese finden Sie, indem Sie die Liste öffnen und sie dann im Analyse-Tool des Browsers betrachten. Die CSS-Klassen des Listenobjekte und der Listeneinträge können Sie auch herausfinden, indem Sie mit QF-Test einen Klick auf die Liste aufnehmen und die qfs:class Informationen in der Weitere Merkmale Tabelle der aufgenommenen Komponente auswerten.

genericClasses:
- List:ComboBoxList: listbox
- Item:ComboBoxListItem:
    class: result
    ancestor: List:ComboBoxList
- ComboBox: role=combobox

Bei dieser ComboBox haben wir verschiedene Möglichkeiten, diese in QF-Test zu definieren. Wenn man Kontakt zu den Anwendungsentwicklern hat, ist es am sichersten, bei diesen nachzufragen, welches Kriterium eine bestimmte Komponentenklasse identifiziert. Ist dies nicht der Fall, sollte man sich für ein aller Wahrscheinlichkeit nach eindeutiges Kennzeichen entscheiden und dieses bei anderen Komponenten der gleichen Klasse gegenprüfen. Außerdem sollte man bei ähnlichen Komponentenklassen nachsehen, ob diese nicht dummerweise ebenfalls das ausgewählte Kennzeichen verwenden. In diesem Fall wählt man dann ein anderes, hoffentlich eindeutiges Kennzeichen oder konkretisiert die Zuweisung durch Hinzufügen von ancestor:...

Konkret bei diesem Beispiel ist role=combobox für die ComboBox selbst vermutlich eindeutig. Ebenso role=listbox oder alternativ css: listbox für die Liste. Für welches der beiden man sich entscheidet, dürfte gleichgültig sein. Bei Überschneidungen mit normalen Listen kann auch der Klassentyp weggelassen werden. D.h. die Zuweisungen wären nur List: listbox und Item:ListItem:. Auf die Funktionalität innerhalb QF-Test hat dies keinen Einfluss.

Bei dem Listeneintrag könnten jedoch sowohl class=result als auch role=option bei anderen Elementen eingesetzt sein. Daher wird sicherheitshalber ancestor: List:ComboBoxList hinzugefügt, um eine Eindeutigkeit herzustellen.