Benutzerdefiniertes Select- und Combobox-System

Was macht Benutzerdefiniertes Select- und Combobox-System?

Zweck

Das benutzerdefinierte Select- und Combobox-System bietet eine systematische Methodik zum Entwerfen und Strukturieren von Dropdown-Optionen, Auto-Vervollständigungs-Suchselektoren (Comboboxen) und Multi-Select-Token-Eingaben.

Standard-HTML-<select>-Elemente sind bekanntermaßen schwer browserübergreifend einheitlich zu stylen und unterstützen keine komplexen Layout-Zusammensetzungen (wie Beschreibungen, Symbole, Badges oder Untergitter innerhalb einzelner Auswahlmöglichkeiten). Benutzerdefinierte Dropdowns sind jedoch eine häufige Quelle für katastrophale Barrierefreiheitsfehler, Tastaturfallen und Benutzbarkeitsfehler. Dieses Skill legt Design-, Raum- und Interaktionsstandards fest, um sicherzustellen, dass benutzerdefinierte Select-Komponenten visuell kohärent, hochreaktiv und vollständig zugänglich (WCAG 2.2 AA-konform) bleiben.

---

Anwendungsfälle

Wenden Sie dieses System an, wenn Sie Folgendes entwerfen:

• Dropdowns mit umfangreichen Inhalten: Auswahlpunkte, die visuelle Indikatoren, Untertitel, zusätzliche Metadaten oder Status-Badges erfordern (z. B. Länderauswahl mit Flaggen-Symbolen, Arbeitsbereichsumschalter oder Kontoprofile).
• Durchsuchbare Selektoren (Comboboxen): Dropdowns mit mehr als 10 Optionen, bei denen ein Benutzer in der Lage sein muss, Auswahlmöglichkeiten über eine Inline-Sucheingabe zu filtern (z. B. lange Bundesland-/Provinzlisten, Tag-Auswahlen).
• Multi-Select-Token-Felder: Felder, bei denen mehrere Auswahlen erlaubt sind und als entfernte Badges/Chips innerhalb oder neben dem Trigger-Container dargestellt werden müssen.
• Dynamische Konfigurationsfilter: Hochdichte Filtersteuerungen (z. B. in Seitenleisten von E-Commerce- oder Daten-Dashboards), die eine umfangreiche Layout-Ausrichtung und sofortiges kontextuelles Feedback benötigen.

---

Wann NICHT zu verwenden

Verwenden Sie dieses System NICHT für:

• Niedrige Optionsanzahl (2 bis 5 Optionen): Verwenden Sie ein segmentiertes-Steuerungssystem oder standardmäßig gruppierte Optionsfelder. Dies vermeidet, Optionen hinter einem zusätzlichen Klick zu verstecken, und reduziert die kognitive Belastung.
• Globale Seitennavigation: Wenn das Klicken auf ein Dropdown-Element den Benutzer sofort zu einer anderen Seite oder einem Sitemap-Knoten weiterleitet, verwenden Sie das Site-Navigationssystem oder ein verschachteltes Dropdown-Menü. Select-Eingaben sind semantische Formularfelder zum Bearbeiten von Eigenschaften, nicht zum Durchlaufen von Sitemaps.
• Standard-Unformatierte Formulare: Verwenden Sie für generische, niedrigpriore oder Utility-Formulare (wie einfache Kontaktfelder) standardmäßig native Browser-<select>-Eingaben. Native Dropdowns bieten perfekte, kostenlose mobile Reaktionsfähigkeit und native Screenreader-Unterstützung.
• Vollbild-Befehlspaletten: Wenn das Ziel darin besteht, über die gesamte App-Seiten und -Aktionen zu suchen, anstatt einen einzelnen Formularwert auszuwählen, verwenden Sie das Befehlspaletten-System.

---

Eingaben

Bevor Sie ein benutzerdefiniertes Select oder eine Combobox entwerfen, sammeln Sie die folgenden Anforderungen:

1. Optionskardinalität und -dichte: Wie viele Optionen gibt es (z. B. 5, 50, 500+)? Was ist die maximale Zeichenlänge?
2. Select-Typ: Einzelauswahl vs. Mehrfachauswahl? Statische Liste vs. asynchron gefilterte Abfrageliste (Combobox)?
3. Datenreichhaltigkeit: Benötigen die Optionen zusätzliche visuelle Elemente (Symbole, Avatare, Flaggen, Farb-Chips) oder unterstützenden Text (Unterbeschriftungen, Preismodifikatoren, aktive Benutzerzahlen)?
4. Layout-Kontext: Wird dies in einer hochdichten Seitenleiste, einer geräumigen Landingpage, einem Overlay-Modal oder einem persistenten Einstellungs-Dashboard platziert?
5. Marken-Tokens: Abstandsskala (Fluid-Abstandssystem), Typografieskala (Fluid-Typografiesystem), Fokusringe (Fokusindikator-Designsystem) und Elevations-/Schattenskalen (Elevations-und-Tiefensystem).

---

Ausgaben

Dieses System produziert die folgenden Design-Ergebnisse:

1. Anatomie-Spezifikation: Detaillierter Bauplan, der Abstände, Ausrichtungen, Symbole, Textkürzungsregeln und Rahmen-/Hintergrundebenen sowohl für den Trigger als auch das Dropdown-Panel zeigt.
2. Zustands- und Interaktionsmatrix: Definierte visuelle Stile für die Zustände Hover, Aktiv/Geöffnet, Ausgewählt, Fokussiert, Deaktiviert und Validierungsfehler.
3. Responsives adaptives Modell: Strukturelle Spezifikationen, die beschreiben, wie das Desktop-Dropdown auf mobile Viewports übertragen wird (z. B. Umwandlung in eine Bottom Sheet oder ein natives Fallback-Overlay).
4. Barrierefreiheitskarte (WAI-ARIA & Tastatur): Präzise Rollen, Live-Region-Deklarationen, Fokus-Tracking-Zustände und Tastenzuordnungsverhalten zur Übergabe an Entwickler.

---

Arbeitsablauf

1. Strukturieren der Komponenten-Anatomie

Ein vollständiges benutzerdefiniertes Select-System besteht aus zwei primären räumlichen Ebenen:

A. Der Trigger (Das Feld)

• Container: Höhenangepasst an benachbarte Formulareingaben (typischerweise 40px bis 48px, um Touch-Ziele zu ermöglichen). Verwendet eine neutrale Umrandung (3:1 Kontrast zum Seitenhintergrund) und definierte Abstände (normalerweise 12px 16px).
• Wert-/Platzhalter-Slot: Positioniert auf der linken Seite. Inaktiver Text repräsentiert einen Platzhalter (Kontrast >= 4.5:1 zum Feldhintergrund). Ausgewählter Text wird mit einer primären neutralen Gewichtung gestaltet.
• Visueller Hinweis (Pfeil-Chevron): Positioniert ganz rechts. Verwenden Sie einen deutlichen nach unten zeigenden Chevron, um einklappbare Inhalte zu kennzeichnen. Drehen Sie den Chevron um 180 Grad, wenn das Menü aktiv ist.
• Ausgewählte Badges (nur Multi-Select): Kompakte Inline-Chips mit einzelnen Schließen (x)-Steuerungen, die elegant umbrechen oder mit Zähl-Modifikatoren abgeschnitten werden (z. B. „+3 weitere").

B. Das Dropdown-Panel (Das Menü)

• Overlay-Container: Befindet sich auf einer höheren Z-Achsen-Ebene (Elevations-und-Tiefensystem Level 3/4). Standardmäßig unter dem Trigger dargestellt, oder darüber, wenn der Viewport-Rand den unteren Platz einschränkt. Verwendet einen deutlichen Schatten (z. B. box-shadow mit einer weichen Unschärfe), um es vom Hintergrund abzuheben.
• Scroll-Container: Legen Sie maximale Höhenbeschränkungen fest (typischerweise 240px bis 320px / 5–8 Elemente), um zu verhindern, dass das Panel von der Seite blutet. Verwenden Sie für längere Listen eine sichtbare, scrollbalken-verschiebungsverhindernde Scrollspur.
• Sucheingabe (nur Combobox): Eine fixierte Sucheingabe, die oben im Dropdown-Panel angepinnt ist und bei der Menüaktivierung persistenten Fokus erhält.

C. Optionselemente (Die Auswahlmöglichkeiten)

• Layout: Horizontales Flex-Layout, bestehend aus visuellen Assets auf der linken Seite, primärem Text (und Untertitel, wenn reichhaltige Option) in der Mitte und dem Auswahlzustandsindikator (wie einem Häkchen) auf der rechten Seite.
• Sicherer Abstand: Mindestens vertikaler Abstand von 8px und horizontaler Abgleich mit dem horizontalen Abstand des Triggers (12px bis 16px).

+------------------------------------------+
|  Land auswählen                    [v]  |  <-- Trigger (Geschlossen)
+------------------------------------------+

+------------------------------------------+
|  [Q] Länder suchen...                    |  <-- Fixierte Sucheingabe
+------------------------------------------+
|  [x] Kanada                              |  <-- Option (Ausgewählt & Fokussiert)
|      ISO: CA | +1 Ländervorwahl          |
|------------------------------------------|
|  [ ] Deutschland                         |  <-- Option (Standard)
|      ISO: DE | +49 Ländervorwahl         |
+------------------------------------------+

---

2. Formulieren der Zustands- und Feedback-Matrix

Entwerfen Sie für jeden Lebenszykluszustand der Komponente eindeutige, nicht mehrdeutige Stile:

• Standardzustand: Der Trigger verwendet eine klare Umrandung (mindestens 3:1 Kontrast zum Seitenhintergrund) mit klaren Textbeschriftungen (mindestens 4.5:1 Kontrast).
• Hover-Zustand: Subtiler Hintergrundfarbtonwechsel am Trigger (z. B. niedrigkontrastgrau) und Optionszeilen, um interaktive Fähigkeiten zu signalisieren. Der Cursor ist auf pointer gesetzt.
• Fokussierter Zustand: Ein deutlich sichtbarer Fokusring, der das aktive Element umgibt. Bei Comboboxen sollte der Fokus auf der Sucheingabe liegen, während die Liste geöffnet ist, aber verwenden Sie eine visuelle Fokusbehandlung (z. B. Hintergrundtönung oder aktive Umrandung) auf der hervorgehobenen Listenoption.
• Aktiver / Erweiterter Zustand: Der Chevron dreht sich, die Trigger-Umrandung ändert die Farbe (z. B. primäre Markenfarbe) und das Dropdown-Panel erscheint mit einem sanften Höhen- und Deckkraftübergang (150ms bis 250ms).
• Ausgewählter Zustand: Optionszeilen ändern sich visuell, wenn sie ausgewählt werden. Verwenden Sie ein kontrastreiches Häkchen-Symbol ganz rechts und eine subtile Hintergrundfüllung. Verlassen Sie sich nicht nur auf Farbe, um die Auswahl anzuzeigen.
• Deaktivierter Zustand: Die visuelle Deckkraft wird auf 40 %–50 % reduziert. Der Cursor wird zu einem not-allowed-Indikator, und das Element wird im Tab-Index übersprungen.
• Fehler-/Ungültiger Zustand: Die Trigger-Umrandung wechselt zu einer Validierungsfehlerfarbe (normalerweise hochkontrastrot, >= 3.1 Kontrast) mit einer begleitenden Fehlermeldung und einem Fehlersymbol unterhalb der Eingabe.

---

3. Räumliche und Positionierungsregeln festlegen

Um Layout-Konflikte und kumulativen Layout-Shift (CLS) zu vermeiden:

• Dynamische Positionierung (Flip-Verhalten): Berechnen Sie die Viewport-Grenzen. Wenn sich der Dropdown-Container nahe der unteren Viewport-Falte befindet, kehren Sie seine Ausrichtung um, sodass er nach oben über den Trigger gleitet.
• Breitenausrichtung: Das Dropdown-Panel muss exakt mit den linken und rechten Kanten des Triggers übereinstimmen oder eine definierte Mindestbreite haben, die dem Trigger entspricht, um visuelle Instabilität zu verhindern.
• Overlay-Isolation: Verwenden Sie einen CSS-z-index-Stack, der Level 3 (Sticky/Floating UI) oder Level 4 (Overlay und Dialoge) Ihres Elevationssystems entspricht. Stellen Sie immer sicher, dass das Panel über angrenzenden Formularelementen, Hintergründen und Layout-Karten gerendert wird.

---

4. Responsive & mobile Anpassungen entwerfen

Erzwingen Sie niemals ein mehrspaltiges oder breites Desktop-Dropdown-Menü in kleinen mobilen Viewports. Wenden Sie diese adaptiven Layout-Regeln an:

Muster A: Mobile Bottom Sheet (Empfohlen für reichhaltige Optionen)

Übersetzen Sie auf Bildschirmgrößen unter 640px (oder standardmäßigen Tablet-Breakpoints) das benutzerdefinierte Dropdown-Panel in eine gleitende Bottom Sheet:

• Trigger: Das Tippen auf den Trigger öffnet ein Bottom-Sheet-Overlay in voller Breite.
• Scrim: Ein halbtransparenter, dunkler Hintergrund (40 % bis 60 % Deckkraft) bedeckt den Hauptinhalt und macht Hintergrundelemente nicht interaktiv.
• Kopfzeile: Das Sheet enthält eine fixierte Kopfzeile mit einem klaren Titel und einer großen, berührungszugänglichen „Schließen" (x)-Schaltfläche in der oberen rechten Ecke.
• Daumen-Erreichbarkeit: Optionszeilen belegen die volle Bildschirmbreite mit einer erhöhten Touch-Ziel-Höhe (mindestens 48px, bevorzugt 56px) für mühelose Finger-Tipp-Auswahlen.

Muster B: Natives Fallback (Empfohlen für einfache Listen)

Verstecken Sie auf mobilen Viewports das benutzerdefinierte Markup vollständig vor Screenreadern und dem visuellen DOM und ersetzen Sie es durch ein visuell verstecktes, in einer Ebene gestapeltes natives <select>-Element:

• Funktionsweise: Positionieren Sie ein standardmäßiges <select> direkt über dem benutzerdefinierten Trigger, gestylt mit opacity: 0.
• Ergebnis: Der Benutzer sieht Ihren benutzerdefinierten, markierten Trigger, aber das Tippen darauf aktiviert die nativen OS-Auswahlräder (iOS Picker oder Android Dialog). Dies bietet unvergleichliche native Leistung und lokale Barrierefreiheit.

---

5. Screenreader- & Tastatur-Architektur definieren

Benutzerdefinierte Select-Elemente müssen vollständige assistive Technologien unterstützen. Geben Sie dieses genaue Verhalten für die Übergabe an:

ARIA-Zuordnungen & Semantik

• Die Trigger-Schaltfläche: Muss role="combobox", aria-haspopup="listbox", aria-expanded="true/false" und aria-controls="listbox-id" haben.
• Das Dropdown-Panel: Muss role="listbox" haben, beschriftet durch die ID des Triggers (aria-labelledby="trigger-id").
• Die Optionselemente: Müssen role="option" haben. Das aktuell ausgewählte Element muss aria-selected="true" haben, andere Elemente müssen aria-selected="false" haben.
• Fokusverwaltung: Für Autovervollständigungs-Comboboxen muss die Sucheingabe aria-autocomplete="list" haben. Verwenden Sie aria-activedescendant="option-id" auf der Eingabe, um die visuell hervorgehobene Option zu verfolgen, während der Benutzer seine Pfeiltasten nach oben und unten bewegt.
• Live-Ansagen: Verwenden Sie aria-live="polite" oder ein dediziertes Screenreader-Ansage-Element, um Select-Zustandsänderungen oder Zählungsaktualisierungen zu senden (z. B. „5 Optionen gefunden. Verwenden Sie die Pfeiltasten, um zu navigieren.").

Tastatur-Interaktionstabelle

Ihr Spezifikationsblatt muss diese genauen Tastenzuordnungen vorschreiben:

Aktion	Tastendruck	Erwartetes Verhalten
Menü öffnen	Leertaste oder Eingabe oder Pfeil nach unten	Öffnet das Dropdown-Panel, setzt den Fokus auf die erste Option (oder Suche).
Menü schließen	Escape oder Tab	Schließt das Panel, gibt den Tastaturfokus zurück zum Trigger.
Optionen navigieren	Pfeil nach unten / Pfeil nach oben	Bewegt den aktiven Hervorhebungszustand zur nächsten oder vorherigen Optionszeile.
Option auswählen	Leertaste oder Eingabe	Wählt die hervorgehobene Option aus, aktualisiert den Wert, schließt das Panel.
Erstes/Letztes Element	Pos1 / Ende	Bewegt die aktive Hervorhebung zum absoluten Anfang oder Ende der Optionsliste.
Sprungsuche	Beliebige alphanumerische Taste	Wenn statisch, springt der Fokus sofort zur ersten Option, die mit diesem Buchstaben beginnt.

---

Entscheidungsregeln

Entscheidungsbaum für benutzerdefinierte Select-Optionen

Wie viele Optionen gibt es insgesamt?
 ├── 2 bis 5 Optionen ─────────> Verwenden Sie SEGMENTIERTE STEUERUNG oder GRUPPIERTE OPTIONSFELDER
 ├── 6 bis 10 Optionen ────────> Verwenden Sie BENUTZERDEFINIERTES SELECT (Einspaltig, keine Sucheingabe)
 └── Mehr als 10 Optionen ────> Verwenden Sie COMBOBOX (Benutzerdefiniertes Select mit integrierter Sucheingabe)

Auswahl des richtigen Auswahlmusters

Anforderung	Standard-Select verwenden	Durchsuchbare Combobox verwenden	Multi-Select-Tokens verwenden
Auswahlgrenze	Nur einzelner Wert	Nur einzelner Wert	Mehrere Werte gleichzeitig
Optionsumfang	6 bis 15 Elemente	15 bis 100+ Elemente	5 bis 50 Elemente
Reibungsart	Niedrige Erkundung	Benötigt schnellen Zielabruf	Akkumulative Zusammenstellung
Optionslayout	Einfache Textzeilen	Einfache oder umfangreiche Listenzeilen	Chips/Tokens im Umbruch-Layout

---

Einschränkungen

• Fokusbewahrung: Beim Schließen des Dropdowns über Escape oder Klicken außerhalb darf der Fokus NIEMALS verloren gehen oder auf die oberste Sitemap-Ebene zurückgesetzt werden. Er muss programmatisch zum Trigger-Element zurückkehren.
• Fokussichtbarkeit (WCAG 2.2 SC 2.4.11): Fokusindikatoren auf dem Trigger oder aktiven Optionen dürfen niemals durch fixierte Seitenkopfzeilen, schwebende untere Leisten oder überlappende Overlays versteckt oder verdeckt werden.
• Touch-Ziel (WCAG 2.2 SC 2.5.8): Jede Optionszeile und jedes Trigger-Element muss eine minimale klickbare Größe von 24x24px haben, wobei 40px bis 48px Höhe die Standard-Layout-Anforderung ist, um Touch-Überlappungen auf mobilen Geräten zu vermeiden.
• Farbkontrast (WCAG 2.2 SC 1.4.11): Alle visuellen Zustandsänderungen (z. B. Hover, Ausgewählt...) müssen durch einen Nicht-Farb-Indikator (Symbol, Strichstärke, Muster) ergänzt werden, um Benutzer mit Farbsehschwäche zu unterstützen.