Handbuch

45.1.8
installCustomWebResolver - 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.

Klasse Notwendige Komponenten / Unterelemente
ComboBox Container Element, das sowohl das Textfeld der ComboBox wie auch den Button beinhaltet.
List:ComboBoxList Stellt die Liste dar, beinhaltet alle Listeneinträge.
Item:ComboBoxListItem Stellt einen Listeneintrag dar.
  Optionale Unterelemente
Button:ComboBoxButton (Optional) Stellt den Button dar, der die Liste öffnet.
TextField:ComboBoxTextField (Optional) Stellt das TextField dar, das Texteingaben empfängt.
CheckBox:ComboBoxListItemCheckBox (Optional) Stellt eine CheckBox unter einem Listeneintrag dar.
Icon:ComboBoxListItemIcon (Optional) Stellt ein Icon unter einem Listeneintrag dar.
Tabelle 45.4:  Mapping von ComboBoxen

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

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>
Beispiel 45.4:  HTML ComboBox

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.

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 Anhängen von @::ancestor=...

Konkret bei diesem Beispiel ist role=combobox für die ComboBox selbst vermutlich eindeutig. Ebenso role=listbox oder alternativ class=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 listbox=List und result=Item:ListItem@::ancestor=List. 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 Klassen eingesetzt sein. Daher wird sicherheitshalber @::ancestor=List:ComboBoxList angehängt, um eine Eindeutigkeit herzustellen.

 
 
installCustomWebResolver
Zuweisungen für eine ComboBox.
Parameter
resolver custom
version
genericClasses listbox=List:ComboBoxList,
result=Item:ComboBoxListItem@::ancestor= List:ComboBoxList  

attributesToGenericClasses role=combobox=ComboBox