New Component: SingleSelect mit Filterfunktion

[deleonio]

Beschreibung: Wir benötigen ein Auswahlfeld, aus dem der Benutzer genau eine vorgegebene Option (SingleSelect) wählen kann.

Vorbilder

• https://react-select.com/home

Anforderungen:

1. Allgemeine Funktionalität:

• Die Komponente soll ein Auswahlfeld (Select) bereitstellen, in dem nur eine Option ausgewählt werden kann.
• Die Komponente soll sicherstellen, dass der Benutzer nur eine Option zur gleichen Zeit auswählen kann.

Der allgemeine Aufbau ist wie folgt:

2. Darstellung:

• Das Auswahlfeld ist ein read-only input-Tag, das das Label der ausgewählten Option anzeigt.
• Das ausgewählte Label soll für den Screenreader ausgegeben werden, um die Barrierefreiheit zu gewährleisten.

3. Interaktion:

• Ein Button neben dem Auswahlfeld öffnet das Auswahlmenü.
• Beim Drücken von Pfeil-Unten öffnet das Auswahlmenü.
• Beim Öffnen des Auswahlmenüs werden die verfügbaren Optionen unterhalb eines weiteren Eingabefelds zur Filterung angezeigt.
• Der Fokus soll beim Aufklappen des Menüs in das Filter-Eingabefeld wechseln und beim Schließen des Menüs zurück auf das Ausgabe-Feld.
• Mittels Tabulator-Taste wechselt man vom Filter-Feld zur ersten Option.
• Mit der Entf- oder Backspace-Taste wird der aktuelle Wert gelöscht.

4. Auswahl einer Option:

• Der Benutzer kann eine Option aus der Liste auswählen. Diese Auswahl wird als Wert übernommen und das entsprechende Label im Ausgabe-Feld angezeigt.
• Die ausgewählten Optionen sollten korrekt als Radio-Set umgesetzt werden, um die Semantik zu gewährleisten (genau eine Option kann ausgewählt werden).
• Zwischen den Optionen wird mit den Pfeiltasten navigiert.

5. Eigenschaften und Konfiguration:

• Die Property für die Optionen soll _options heißen und eine Liste der verfügbaren Optionen enthalten.
• Es soll ein Event geben, welches getriggert wird, wenn der Fokus die letzte Option erreicht (damit von außen weitere Optionen nachgeladen werden können).

6. Barrierefreiheit:

• Die Komponente muss vollständig barrierefrei sein und die ARIA-Richtlinien für Dropdown-Menüs und Radio-Buttons einhalten.
• Die ausgewählte Option muss für Screenreader klar und verständlich ausgegeben werden.

Technische Details:

• Komponentenstruktur:

  • Select Komponente:
  • input-Tag (read-only) für die Anzeige der ausgewählten Option.
  • Button zum Öffnen des Auswahlmenüs.
  • Auswahlmenü (DropDown):
  • Filter-Eingabefeld zum Filtern der Optionen.
  • Liste der Optionen, die als Radio-Buttons umgesetzt werden.

• Eigenschaften:

  • _options: Eine Liste der verfügbaren Optionen. Jede Option sollte ein Objekt mit value und label enthalten.

Beispiel für die _options Property:

_options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' }
];

Akzeptanzkriterien:

• Das Auswahlfeld zeigt das ausgewählte Label korrekt an.
• Beim Klicken auf den Button öffnet sich das Auswahlmenü und der Fokus wechselt zum Filter-Eingabefeld.
• Beim Schließen des Auswahlmenüs wechselt der Fokus zurück zum Ausgabe-Feld.
• Die ausgewählte Option wird korrekt als Wert übernommen und angezeigt.
• Die Komponente ist möglichst barrierefrei. (Ergebnisse aus Nachtest werden in einem neuen Ticket behandelt.)
• Es existiert eine Demo in der Sample-App.
• Eine einfache Readme ist angelegt und als Draft markiert.

[laske185]

Es gibt die Anfrage nach einem Multi-Select als Einzeiler. Dabei werden die Optionen wie im Single-Select aufgeklappt, sobald die Komponente den Fokus hat. Die ausgewählten Elemente sind als Badgets innerhalb des Input-Feldes eingebettet.

Nach weiterem Feedback ist die aktuelle Umsetzung des Multi-Selects ungünstig, da ein Benutzer nicht mehrere Elemente nur mit der Maus selektieren kann und sie viel Platz in Anspruch nimmt.

Vorteile sind:

• Platzsparsamkeit
• Such- und Filterfunktion
• Selektion und Deselektion von Einträgen nur mit Maus möglich.

Eine gefundene Implementierung: https://ej2.syncfusion.com/documentation/multi-select/accessibility

[deleonio]

https://github.com/public-ui/kolibri/issues/4607

[laske185]

Filter-Input soll mit readonly-Input verschmolzen werden.

[laske185]

Bitte um Beachtung: https://github.com/public-ui/kolibri/issues/6608