Range Selector

Overview

Intro

broken_image

Figma

Der Range Selector wird ausschließlich für die Suchleiste auf der Master-Detail-Seite genutzt. In Formularen werden stattdessen die Komponenten Combo Box , Text field oder Dropdown genutzt.

Die Bereichsauswahl-Komponente ermöglicht es dem Nutzer alphanumerische Werte innerhalb eines "von"-"bis"-Bereiches einzugeben. Dazu zählen beispielsweise Datumseingaben, Zeiteingaben, Zahlenwerte oder Hausnummernbereiche. Die Eingabefelder sind auf einzeilige Texteingaben ausgerichtet. Alphanumerische Eingaben können unformatiert oder entsprechend der Formatter-Vorgaben konfiguriert sein. Die Eingabefelder können Icons enthalten. Die Eingabefelder können ebenfalls Datumsfelder, Comboboxen oder Dropdown-Felder sein.

Ein Eingabefeld sollte immer einen klaren Zweck haben, der als Label angezeigt wird (z.B. Datum von, Datum bis, Uhrzeit von, Uhrzeit bis etc.)

Bei Zahleneingaben von-bis: Wird das erste oder letzte Feld der Bereichsauswahl leer gelassen, gilt das erste leere Feld automatisch als minus unendlich Wert und das letzte leere Feld als unendlich Wert. 

Textausrichtung

Links ausrichten

Die Textausrichtung innerhalb der Textfelder ist standardmäßig linksbündig. Dadurch stehen das Label und der Wert räumlich und visuell nah beieinander, was das Erfassen der Eingabefelder für den Nutzer erleichtert.

broken_image

Figma

Rechts ausrichten

Zahlenwerte wie Währungen oder Maßeinheiten müssen rechtsbündig ausgerichtet werden. Datum und Uhrzeit Werte bleiben davon unberührt und müssen weiterhin linksbündig dargestellt werden.

broken_image

Figma

Währungen und sonstige Einheiten

Währungen und Einheiten sind als Suffix umzusetzen. Damit lässt sich der Wert von der Einheit besser trennen. Dadurch werden Validierungen vereinfacht und die Eingabe für den Nutzer ist einheitlich geregelt. 

broken_image

Figma

Verwendung

👍 Do	👎 Don't
...wenn eine Erfassung von Daten in Form von Freitext oder alphanumerischen Eingaben innerhalb eines von-bis-Bereichs in der Suchleiste erfolgt.	...wenn nur ein einzelnes Kriterium ohne von-bis-Bereich dargestellt werden soll. ...in Formularen.

Guidelines

Aufbau

Die Bereichsauswahl setzt sich aus folgenden Bestandteilen zusammen. Das Label der Bereichsauswahl, die beiden Teilfelder und deren Labels sind immer vorhanden, die als optional gekennzeichneten Elemente werden nur bei Bedarf ergänzt:

• Label der Bereichsauswahl — benennt den Bereich als Ganzes und ist an der Bereichsauswahl selbst zu setzen, nicht an den Teilfeldern. Für die Barrierefreiheit erforderlich: Ohne dieses Label bleibt die Gruppe für Screenreader namenlos.
• Teilfelder — zwei einzeilige Eingabefelder für den Von- und den Bis-Wert. Sie schließen ohne Abstand aneinander an und teilen sich die verfügbare Breite. Welche Feldtypen dafür in Frage kommen, ist im Intro beschrieben.
• Label der Teilfelder — kennzeichnet die Rolle des jeweiligen Feldes im Bereich (z.B. "Datum von" und "Datum bis").
• Placeholder (optional) — wird am einzelnen Teilfeld gesetzt und angezeigt, solange dieses leer ist. Geeignet für einen kurzen Hinweis, z.B. zur Schreibweise. Er ersetzt kein sichtbares Label.
• Helper text (optional) — erscheint unterhalb der Bereichsauswahl. Geeignet für zusätzliche Hilfestellungen zur erwarteten Eingabe. Eine Style-Variante erlaubt die Darstellung oberhalb des Feldes.
• Tooltip (optional) — kleines Text-Pop-up, das bei Hover und bei Tastatur-Fokus angezeigt wird. Helper werden gegenüber Tooltips generell bevorzugt, da sie besser auffindbar und mobil besser unterstützt sind.
• Prefix und Suffix (optional) — werden am einzelnen Teilfeld gesetzt, nicht an der Bereichsauswahl. Währungen und Einheiten gehören als Suffix an das jeweilige Teilfeld.
• Required indicator (bei Bedarf) — Pflichtfelder werden durch einen Indikator neben dem Label der Bereichsauswahl gekennzeichnet. Die Kennzeichnung und ihre Erläuterung regelt Formulare .

Die Bereichsauswahl steht in der Suchleiste des Filter Panel und belegt dort immer zwei Spalten.

Info für Dev

In Web Components gibt es kein eigenes Element für die Bereichsauswahl. Sie entsteht aus <vaadin-custom-field> mit theme="range-selector"; die beiden Teilfelder werden als Kind-Elemente eingehängt. Das Paket @vaadin/custom-field ist in @mate/bundles enthalten.

In Vue ist es entsprechend MateCustomField aus dem Paket @mate-vue/custom-field, ebenfalls mit theme="range-selector".

In Flow gibt es dagegen eine eigene Mate-Klasse: RangeSelector aus dem Paket de.mate_ds.flow.component.rangeselector im Maven-Artefakt de.mate_ds:mate-range-selector-flow. Die beiden Teilfelder werden über RangeSelectorBuilder.pair übergeben.

Verhalten

Bei Klick in ein Eingabefeld, wird der Cursor in dieses gesetzt und der Nutzer kann die Eingabe beginnen. Je nach Typ des Eingabefeldes (z.B. numerische Eingabe) können bestimmte Eingaben verboten werden. So wird die Häufigkeit von Fehleingaben verringert.

Validierung

Die Validierung erfolgt, sobald der Nutzer den Wert eines der beiden Eingabefelder ändert. Spätestens beim Verlassen der Bereichsauswahl wird geprüft, auch wenn die Werte unverändert geblieben sind. Ist ein Eingabefeld für sich ungültig, wird dieses Feld rot hervorgehoben. Scheitert dagegen nur die Pflichtfeldprüfung der Bereichsauswahl, erscheint allein die Fehlermeldung unterhalb der Bereichsauswahl, ohne dass ein einzelnes Feld hervorgehoben wird.

Die Prüfung läuft in zwei Stufen. Die Pre-Submit-Validierung prüft das einzelne Feld, sobald es den Fokus verliert, und zeigt den Fehler unmittelbar unterhalb des Feldes. Die Post-Submit-Validierung läuft, nachdem der Nutzer das Formular abgeschickt hat: Sie prüft alle Felder erneut, markiert die fehlerhaften und setzt den Fokus auf das erste davon. Beide Stufen und die Formulierung der Fehlermeldungen sind unter Validierung unter Formulare beschrieben.

Folgende Constraints werden unterstützt:

Constraint	Verhalten
Required	Die Bereichsauswahl wird ungültig, wenn kein Wert erfasst ist.
Gültigkeit der Teilfelder	Die Bereichsauswahl ist nur gültig, wenn beide Eingabefelder gültig sind. Welche Constraints im einzelnen Feld gelten, richtet sich nach dem verwendeten Feldtyp und ist auf dessen Seite beschrieben.

Ob der Von-Wert kleiner als der Bis-Wert ist, prüft die Bereichsauswahl nicht. Diese fachliche Prüfung und die zugehörige Fehlermeldung verantwortet das Produktteam.

Jedes Constraint sollte eine eigene Fehlermeldung haben, damit der Nutzer spezifisches, umsetzbares Feedback erhält.

States

Ein Teilfeld im State Enabled kann vom Nutzer fokussiert werden und die Eingabe kann wie gewohnt erfolgen.

Die States Enabled , Disabled , Read Only , Hover und Focus stellen die beiden Teilfelder in der Standarddarstellung dar. Hervorgehoben wird dabei immer nur das Feld unter dem Mauszeiger beziehungsweise das fokussierte Feld, nicht die Bereichsauswahl als Ganzes; ihr Label reagiert auf Hover und Fokus mit. Siehe States .

Disabled und Read Only

Disabled und Read Only werden an den beiden Teilfeldern gesetzt, nicht an der Bereichsauswahl. Diese kennt beide States nicht: Ein dort gesetztes Attribut wirkt nicht auf die Teilfelder und allenfalls auf die Darstellung ihres Labels.

Error

Die Teilfelder können validiert werden. Ist ein Teilfeld ungültig, wird es rot hervorgehoben; die Bereichsauswahl gilt damit ebenfalls als ungültig und ihr Label wird rot. Wo die Fehlermeldung erscheint, hängt davon ab, welche Prüfung fehlschlägt, und ist unter Validierung beschrieben. Sie sollte so formuliert werden, dass dem Nutzer klar ist, wie der entstandene Validierungsfehler behoben werden kann, siehe dazu auch Validierung unter Formulare .

Hilfetext

Wenn nötig, kann unterhalb der Bereichsauswahl ein Hilfetext angezeigt werden. Dieser gibt dem Nutzer weitere Informationen über die benötigte Eingabe.

Barrierefreiheit

Tastaturbedienung

Über die Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Umschalttaste" + "Tab") lässt sich zwischen den einzelnen Eingabefeldern springen. In einem fokussierten Eingabefeld im State Enabled kann die Eingabe wie gewohnt erfolgen.

Spezifische Hinweise

Die Komponente stellt selbst bereit: die Verknüpfung des sichtbaren Labels mit der Bereichsauswahl, die Verknüpfung der Labels mit den einzelnen Eingabefeldern, die Kennzeichnung von Pflichtfeldern über aria\-required und die Verknüpfung von Helper text und Fehlermeldung über aria\-describedby . Nichts davon wird nachgebaut. Das Produktteam verantwortet die Inhalte:

• Die Bereichsauswahl ist für Screenreader als Gruppe erkennbar. Ihren Namen zieht sie aus ihrem eigenen Label — dieses Label ist deshalb zu setzen, sonst bleibt die Gruppe namenlos. Die Labels der beiden Eingabefelder werden von den Feldern selbst verknüpft und benennen deren Rolle im Bereich (z.B. "Datum von" und "Datum bis" ).
• Da jedes Eingabefeld ein Label haben muss, ist kein zusätzliches aria\-label nötig. Ein am Feld gesetztes aria\-label ersetzt den Namen aus dem sichtbaren Label und darf deshalb nur bei Feldern ohne sichtbares Label verwendet werden.
• Der Platzhalter ist kein Ersatz für das Label und wird nicht zuverlässig vorgelesen. Formathinweise gehören in das Label oder in den Helper text.
• Read Only und Disabled gibt es nur an den beiden Eingabefeldern, nicht an der Bereichsauswahl selbst: Dort wirken die Attribute ausschließlich auf die Darstellung des Labels. Ein Feld, das dauerhaft nur der Anzeige dient, wird auf Read Only gesetzt und bleibt fokussierbar, für Screenreader sichtbar und sein Wert kopierbar; ein Feld, das im Laufe des Prozesses wieder bearbeitbar werden kann, wird auf Disabled gesetzt und ist dann weder fokussierbar noch für Screenreader wahrnehmbar. Siehe States .
• Fehlermeldung: Die Verknüpfung mit der Bereichsauswahl stellt die Komponente her. Das Produktteam verantwortet den Text — er muss sagen, wie der Fehler zu beheben ist (z.B. "Datum bis nach dem Datum von wählen" , nicht nur "Fehler" ), und der Fehler darf nicht ausschließlich über Farbe kommuniziert werden.
• Pflichtfeld-Kennzeichnung: Wie Pflichtfelder gekennzeichnet und erklärt werden, regelt Formulare .
• Prefix- und Suffix-Elemente werden von Screenreadern in der Regel nicht zuverlässig vorgelesen. Informationen, die über Prefix oder Suffix kommuniziert werden, müssen auch im Label oder Helper text verfügbar sein.