Interactiver Selected Zustand für Tags

[JoMarieLe]

The problem

Der Selected Zustand in Grau bei den Tags wirkt nicht selected. Es ist nicht klar welches Element selected darstellt und welches nicht, da ansonsten Grau häufig als deaktiv verwendet wird. Zudem ist eine reine Unterscheidung über die Farbe nicht barrierefrei, da der Unterschied nur über die Farbe dargestellt wird.

Die Tags wirken in einem Filter auch sehr schmal und klein, um als Filterelement durchzugehen. Gut wäre es eine Variante oder ein ähnliches Element zu haben, das hier verwendet werden kann.

Kontext: Wir verwenden die Tags innerhalb von Tabellen, um Informationen strukturiert darzustellen, bpslw. Regionen oder Status. Es können also mehrere Tags innerhalb einer Zelle auftreten. Diese Informationen sollen filterbar sein über einen Filter. Es wäre sinnvoll, wenn innerhalb des Filters eine ähnliche Darstellungsform verwendet werden würde, um die Filter einzustellen. Hierfür wirkt die Tag Komponente allerdings zu schmal und von der Klickfläche nicht optimal. Nachdem die Filter gesetzt sind werden sie über der Tabelle als Filter Chips angezeigt.

The solution

Mehr Unterscheidung zwischen dem Selected Zustand und dem Unselected Zustand durch z.B. Schriftschnitt, ein Icon, die Outline und/oder die Farbe.

Es braucht eine Tag ähnliche interaktive Komponente, die innerhalb von Filtern verwendet werden kann.

Examples

Filter mit den Tags:
Oben mein Vorschlag, Mitte DB UX konform, Unten weiterer Vorschlag (allerdings springen dann die Tags bei Interaktion durch eine sich verändernde Breite)

Die Tabelle:

[JoMarieLe]

Eine weitere Ebene des Problems mit Checked und Unchecked. Wir brauchen auch das Statuts Element in verschiedenen Farbausprägungen innerhalb der Tabelle, um anzuzeigen wie kritisch etwas ist. Auch diese Stufen, die die Kritikalität anzeigen sollen innerhalb eines Filters an und ausgeschaltet werden. Also benötigen wir diese ebenfalls klickbar, aber so, dass man die Farbigkeit noch erkennt.
In der Design System Variante sind die Farben zu wenig von einander unterscheidbar, weswegen ich die Low-contrast-Variante verwendet habe. Allerdings würde man auch in unchecked die Farben so gut wie gar nicht erkennen, daher bg-level-2