coastdigitalgroup/coastai-skills

System für segmentierte Steuerelemente

Zweck

Das System für segmentierte Steuerelemente bietet eine Designmethodik für kompakte, sich gegenseitig ausschließende Selektoren (auch bekannt als Button-Gruppen, Schiebe-Toggles oder Segmentierte Buttons). Im Gegensatz zu Navigationsmenüs oder Inhalts-Tabs dient ein segmentiertes Steuerelement als Inline-Modifikator innerhalb eines einzigen Kontextes oder Formulars. Es ermöglicht Benutzern, das Anzeigeformat sofort zu ändern, einen einzelnen Datensatz zu filtern oder eine Eingabeoption auf engstem Raum auszuwählen.

Ein systematischer Ansatz stellt sicher, dass diese Steuerelemente eine kohärente visuelle Beziehung, klare interaktive Hinweise, nahtlose Layout-Skalierung und korrekte semantische Barrierefreiheitsmuster aufweisen, um Verwechslungen mit generischen Buttons oder Tab-Navigation zu vermeiden.

Anwendungsfälle

• Ansichtswechsel: Wechsel der Darstellung identischer Inhalte (z. B. „Raster vs. Liste vs. Karte“ oder „Board vs. Kalender“).
• Preis- und Abrechnungs-Toggles: Auswahl von Abrechnungshäufigkeiten (z. B. „Monatlich vs. Jährlich“), die die Preisanzeige direkt ändern.
• Mikro-Filterung / Sub-Segmentierung: Filtern einer aktiven Liste innerhalb einer bestimmten Unterkategorie (z. B. „Alle vs. Ungelesen vs. Markiert“ Nachrichten).
• Inline-Optionsauswahl: Ersetzen von sperrigen Dropdown-Menüs in Formularen für 2 bis 5 priorisierte Optionen (z. B. „Klein vs. Mittel vs. Groß“).
• Interaktive Zustandswechsler: Ändern eines aktiven Metrikparameters in Live-Diagrammen (z. B. „7T vs. 30T vs. 1J“ Zeiträume).

Wann NICHT verwendet werden sollte

• Vollständige Seitennavigation: Wenn ein Klick auf ein Element die Seiten-URL ändert oder den Benutzer aus dem aktuellen Ansichtskontext navigiert, verwenden Sie site-navigation-system.
• Großer Inhaltsbereichswechsel: Wenn das Wechseln von Optionen völlig unterschiedliche Inhaltsblöcke mit komplexen Layouts (wie Einstellungsbereiche oder Dokumenten-Tabs) anzeigt, verwenden Sie tab-ui-system.
• Hohe Optionsanzahl: Bei mehr als 5 Optionen verwenden Sie eine Dropdown-Auswahl oder einen Filterbereich, um visuelle Überfüllung und horizontalen Textüberlauf zu vermeiden.
• Mehrfachauswahl-Einstellungen: Wenn Benutzer mehr als eine aktive Option gleichzeitig auswählen können, verwenden Sie gruppierte Kontrollkästchen oder Tags (badge-and-tag-system).
• Binäre dynamische Toggles: Für einzelne Ein/Aus-Einstellungen, die einen sofortigen Hintergrundprozess auslösen (z. B. „Benachrichtigungen aktivieren“), verwenden Sie einen standardmäßigen Kippschalter (accessible-switch-implementation).

Eingaben

1. Optionsinventar: Die Liste der sich gegenseitig ausschließenden Bezeichnungen, Symbole oder Werte (normalerweise 2 bis 5 Elemente).
2. Steuerungsumfang: Ob das Steuerelement als Formulareingabe, Layout-Ansichtsmodifikator oder Metrikumschalter fungiert.
3. Container-Einschränkungen: Die genaue Breite und Layout-Umgebung (z. B. inline neben der Suche, zentriert in Preiskarten oder vollbreit auf Mobilgeräten).
4. Stil-Tokens: Typografie-Skala, Abstandsvariablen (fluid-spacing-system), interaktive Zustände (interactive-state-system) und Farb-Tokens.

Ausgaben

1. Spezifikation der Steuerelement-Anatomie: Visuelle Definition des Tracks (Hintergrundcontainer), der Segmente (einzelne Buttons) und des aktiven Indikators (das gleitende oder hervorgehobene Hintergrundelement).
2. Verhaltens-ARIA-Zuordnung: Auswahl der korrekten ARIA-Rollen (role="radiogroup" vs. role="tablist") und Tastaturnavigationsregeln.
3. Zustandsübergangsmatrix: Stildefinitionen für Standard-, Hover-, Aktiv-/Ausgewählt-, Fokus- und Deaktiviert-Zustände.
4. Reaktive Flussregeln: Spezifikationen für horizontale Skalierung, vollbreites Fluid-Verhalten und mobiles Umfließen oder Rückfall zu <select>.

Arbeitsablauf

1. Identifizieren Sie die semantische Absicht

Bestimmen Sie, ob das Steuerelement einen Wert oder eine Anzeigeansicht ändert:

• Formulareingabe oder Mikrofilter: Semantisch gesehen handelt es sich um eine Radio-Gruppe. Es ändert einen Wert, der gespeichert oder beim Absenden gesendet wird, oder filtert sofort eine Inline-Liste neu.
• Ansichts-Controller: Semantisch gesehen handelt es sich um eine Tablist. Es wechselt das aktive sichtbare Panel oder die Präsentation innerhalb desselben Containers.

2. Entwerfen Sie die visuelle Anatomie

Erstellen Sie eine hochglanzpolierte, einheitliche visuelle Komponente. Das Design besteht aus drei Kernebenen:

• Der Track: Ein einzelner horizontaler Container mit einer subtilen Hintergrundfarbe (z. B. kontrastarmer Grauton), geringem Padding (normalerweise 2px bis 4px) und abgerundeten Ecken (halbrund oder Pillenform).
• Die Segmente: Schulter-an-Schulter im Track platzierte Buttons. Sie müssen gleiche Breite teilen (Blocksatz) oder sich mit konsistentem Padding an die Inhaltsbreite anpassen.
• Der aktive Indikator: Eine gleitende physische Karte oder Hervorhebung mit einem deutlichen Hintergrund (oft weiß oder primäre Themenfarbe) und einem subtilen Schatten (elevation-and-depth-system), die unter dem aktiven Text sitzt, um ihn visuell hervorzuheben.

3. Legen Sie Zustands- und Bewegungs-Choreografie fest

Konfigurieren Sie unterschiedliches visuelles Feedback für jede Interaktionsphase:

• Standardzustand: Nicht-aktiver Text verwendet eine sekundäre neutrale Farbe mit einem ausreichend hohen Kontrastverhältnis (mindestens 4,5:1).
• Hover-Zustand: Eine subtile Hover-Hintergrundhervorhebung auf dem Zielsegment, um die Klickbarkeit anzuzeigen.
• Ausgewählter Zustand: Der Text wird primär/fett formatiert, und der aktive Indikator gleitet dahinter.
• Fokus-Zustand: Bei Navigation über die Tastatur zeichnen Sie eine deutliche, kontrastreiche Fokus-Kontur um das aktive Segment. Der Fokus-Indikator darf die Track-Grenze nicht überschreiten.
• Deaktivierter Zustand: Gedimmte Opazität (normalerweise 40 %) mit deaktiviertem Cursor-Zeiger.

4. Code- und Übergabeanmerkungen

Kommentieren Sie die strukturellen Anforderungen für die Implementierung:

• Gleichmäßige Breitenverteilung: Geben Sie die Flexbox-Ausrichtung an (flex: 1 1 0%), um Segmente bei Bedarf gleichmäßig zu verteilen.
• Gleitender Indikator-Übergang: Geben Sie CSS-Übergangsregeln an (transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)) für die gleitende Karte des aktiven Indikators. Stellen Sie sicher, dass dies keine kumulative Layout-Verschiebung (CLS) auslöst, indem hardwarebeschleunigte Eigenschaften (transform und opacity anstelle direkter Änderungen von left/width) verwendet werden.

5. Planen Sie reaktive Verhaltensweisen

Definieren Sie, wie das segmentierte Steuerelement auf kleinen Viewports skaliert wird:

• Fluide Rechtfertigung: Erweitern Sie Track und Segmente, um auf mobilen Bildschirmen 100 % Breite einzunehmen, und fungieren Sie als vollbreite untere Leiste oder Kopfkomponente.
• Label-Kürzung und Mindestbreite: Erzwingen Sie strenge Mindestbreiten für Segmente, um zu verhindern, dass Textumbrüche Zeilen innerhalb eines Buttons stapeln.
• Überlauf-Dropdown-Fallback: Wenn Optionen nicht ohne visuelle Brüche in einen 320px-Viewport passen, tauschen Sie das segmentierte Steuerelement-Layout über reaktive CSS-Medienabfragen gegen ein natives <select>-Dropdown aus.

Entscheidungsregeln

Radio-Gruppe vs. Tablist-Muster

Kriterium	Radio-Gruppe-Muster verwenden (role="radiogroup")	Tablist-Muster verwenden (role="tablist")
Primäre Funktion	Bearbeitet eine Dateneigenschaft oder filtert eine Liste inline.	Wechselt zwischen verschiedenen Layout-Ansichten oder Panels.
Formularintegration	In ein <form> integriert oder fungiert als Eingabe.	Außerhalb von Standardformularen; verwaltet Layout-Ansichtsmodi.
ARIA-Rolle	Eltern: role="radiogroup", Kind: role="radio" mit aria-checked="true/false".	Eltern: role="tablist", Kind: role="tab" mit aria-selected="true/false".
Tastaturnavigation	Pfeiltasten ändern die Auswahl sofort; Tab verlässt die Gruppe.	Pfeiltasten verschieben den Fokus sofort; Eingabetaste/Leertaste aktiviert.

Visuelles Layout: Feste gleiche Breite vs. automatische fluide Breite

• Feste gleiche Breite: Am besten für kurze, einheitliche Bezeichnungen (z. B. „7T“, „30T“, „90T“ oder „Raster“, „Liste“). Jedes Segment hat identische Breite und bietet visuelle Symmetrie.
• Automatische fluide Breite: Am besten, wenn sich die Bezeichnungen in der Zeichenlänge deutlich unterscheiden (z. B. „Alle Artikel“ vs. „Ausstehende Überprüfung“). Jedes Segment umschließt seinen Text mit konsistentem Padding (z. B. 12px 16px).

Einschränkungen

• Kontrastverhältnisse: Sowohl aktive als auch inaktive Textsegmente müssen das WCAG AA Mindestkontrastverhältnis von 4,5:1 gegenüber ihrem Hintergrund erfüllen.
• Touch-Zielgrößen: Jedes einzelne Segment muss einen minimalen interaktiven Bereich von 24x24 Pixel (WCAG 2.2 SC 2.5.8) bieten, eine Mindesthöhe von 40px bis 44px wird jedoch für nahtlose Finger-Tipps auf Mobilgeräten dringend empfohlen.
• Fokus-Indikatoren: Der Tastaturfokus muss auf dem aktuell ausgewählten Segment oder dem aktiven Fokusziel deutlich sichtbar sein. Stellen Sie sicher, dass Fokusringe nicht hinter benachbarten Segmenten abgeschnitten oder versteckt werden.
• Keine Textumbrüche: Der Segmenttext sollte einzeilig sein und darf innerhalb eines Buttons niemals auf mehrere Zeilen umbrechen. Dies unterbricht den vertikalen Rhythmus und verursacht visuelle Überlappungen.
• Reduzierte Bewegung: Wenn animierte gleitende Indikatoren implementiert werden, respektieren Sie die OS- Benutzereinstellungen via @media (prefers-reduced-motion: reduce), indem Sie den Gleiteffekt deaktivieren und stattdessen die Opazität oder Umriss-Hervorhebungen sofort umschalten.

Häufige Fehlermuster

• Die Layout-Verschiebung (CLS): Der Wechsel des aktiven Segments ändert die Breite des aktiven Buttons, wodurch benachbarte Elemente nach links oder rechts springen.
• Der Navigations-Trugschluss: Stylen wichtiger globaler Seitennavigation, um wie segmentierte Steuerelemente auszusehen, was Benutzer verwirrt, die sofortige Inhaltsänderungen innerhalb der Seite erwarten.
• Fehlende Auswahl-Affordanz: Verwendung nur einer subtilen Schriftgewichtänderung oder eines kontrastarmen Indikators, was es Benutzern mit Sehschwäche erschwert, die ausgewählte Option zu identifizieren.
• Die Tastaturfalle: Fehlende Bindung der Standard-Pfeiltasten innerhalb des Steuerelements, wodurch tastaturnutzende Benutzer gezwungen sind, jede Option einzeln mit der Tabulatortaste durchzugehen.
• Mobil-Quetschung: Zulassen, dass ein 4-Segment-Steuerelement auf Mobilgeräten schrumpft, bis sich Bezeichnungen überlappen, unleserlich abgeschnitten werden oder außerhalb der Track-Grenzen liegen.

Validierungskriterien

• Das klare semantische ARIA-Muster wird basierend auf der Funktion des Steuerelements ausgewählt (Radio-Gruppe vs. Tablist).
• Einzelne Segmente erfüllen die minimale Touch-Zielgröße von 24x24 Pixel (44px auf Mobilgeräten bevorzugt).
• Die Kontraste von inaktivem und aktivem Text entsprechen WCAG AA (>= 4,5:1 Verhältnis).
• Der aktive Indikator verwendet hardwarebeschleunigte CSS-Eigenschaften (transform) während Gleitübergängen, um kumulative Layout-Verschiebungen (CLS) zu verhindern.
• Das reaktive Verhalten ist definiert (fluide Rechtfertigung, Mindestbreite oder Dropdown-Fallback).
• Der Text in den Segmenten bleibt einzeilig ohne vertikale Umbrüche oder Beschneidungen.
• Der Übergangs-Fallback für @media (prefers-reduced-motion: reduce) wird explizit behandelt.