Barrierefreiheit: Error-State der Formular-Elemente überarbeiten

[patrowe]

Das Label und der Fehlertext bei einem Formcontrol weisen einen zu geringen Farbkontrast auf. Dieses muss geändert werden.

Ein Fehlerstatus darf laut WCAG auch nicht nur ausschließlich durch Farbe gekennzeichnet sein. Eine Möglichkeit ist das Betreffende Formularfeld zusätzlich mit einem "Ausrufe"-Zeichen zu markieren.

Für beide Probleme sollen verschiedene Lösungen in einem Mockup erstellt werden, bevor die Fehler verbessert werden.

[patrowe]

Akzeptanzkriterium

Der Fehlerstatus ist wie folgt überarbeite worden:

A. Elemente mit einem Eingabefeld, einschließlich lux-select-ac

• das Label über dem Textfeld hat die Schriftfarbe lux-primary-500 erhalten
• der Fehlertext hat die Schriftfarbe lux-warn-900 und die Hintergrundfarbe lux-warn-50 mit einer Opacity von 0.5 erhalten
• zu Beginn des Fehlertexts wird ein "Warn-Icon" angezeigt, Farbe und Größe sind der Schrift des Fehlertexts anzupassen

B. Elemente ohne Eingabefeld

• der Fehlertext soll wie unter A beschrieben überarbeitet und mit einem Icon versehen werden.

[patrowe]

Die Anforderungen wurden umgesetzt. @DSeifer bitte Testen!

[patrowe]

Test

Testvorbereitung

• Die Zweige für die lux-components und das lux-components-theme jeweils auschecken
• Das lux-components-theme lokal mit bauen und mit den lux-components verlinken
• Das Demo Starten

Durchführung

• Die Seite "Baseline" öffnen
• "Fehler anzeigen" auf "true" setzen
• Die Formularelemente auf dieser Seite prüfen

Zu Erwartendes Ergebnis:

• Der Text des Fehlerstatus ist hellrot hinterlegt
• Zu Beginn des Fehlertexts wird ein Warn-Icon angezeigt.
• Das Icon wird vollständig angezeigt und ist nicht abgeschnitten.

[DSeifer]

Unter Windows 10 Enterprise 21H2 (19044.3448) und MacOS 13.6 mit den jeweils aktuellen Browserversionen getestet: MacOS: Safari -> OK Windows: Edge -> OK