Fehlerhafte Aria-Referenz bei den lux-Form-controls

[patrowe]

Dieses ist ein Sammelticket für die Form-Controls, für "kleinere" Fehler im Layout.

• lux-input-ac mit type=time: das Icon für die Uhr ist zu klein.

• die Schriftgröße der Labels muss überprüft werden (dazu gab es Rückfragen, Schrift wurde als zu klein empfunden)

• Die Aria-Referenzen für das label überprüfen und evtl. fixen

[patrowe]

Die Prüfung hat ergeben, dass die Labels in den Formcontrols eine berechnete Größe von 12px haben. Im Zuge der Umstellung auf relative Schriftgrößen wird die Einheit entsprechend ausgetauscht. Dann kann die Größe der Labels über Browsereinstellungen angepasst werden. Vgl. https://github.com/IHK-GfI/lux-components/issues/362

[patrowe]

Die Prüfung des Inputs type="time" hat ergeben, dass das Icon über mat-input gesetzt wird. Das Anzeigen eines Lux-Icons erfordert ein überarbeiten der Input-Komponente und erfordert einen größen Zeitaufwand.

Daher erfolgt die Umbennung des Issues und folgende Festlegung der Anforderungen.

Wie oben gezeigt, ist die Aria-Referenz auf das Hinweis/Errorfeld unterhalb der Formcontrols fehlerhaft. Dieser Fehler tritt bei allen Form-Controls auf und muss gefixt werden.

Aktzeptanzkriterium: Alle Formcontrols wurden überarbeitet so dass

• die Referenz aria-discribedby auf den lux-hint verweist (sofern vorhanden)
• die Referenz auf den lux-error entfernt wurde, da der mat-error eine eigene aria-reference besitzt

[patrowe]

Die Anforderungen wurden umsetzt.

@DSeifer bitte testen.

[patrowe]

Test

Vorbedingung:

• Den angehängten Zweig für die Lux-Components auschecken.
• Die Demo lokal starten.
• Für den Test wird ein Screenreader z.B. NVDA für Windows und Voice-Over für MacOs benötigt.
• Anmerkung, da die Screenreader unterschiedlich, auch je nach Browser arbeiten, kann die Reihenfolg in den Ansagen variieren, das stellt keinen Fehler dar. Wichtig ist, dass die Fehlermeldungen unter den Formcontrols bei aktivem Formcontrol vorgelesen werden.
• Hinweis zur Verwendung der Screenreader, den Mauszeiger während des Tests "kontrolliert" bewegen, wird er z.B. auf einen andern Text im Fenster verschoben, wird in der Regel die aktuelle Ansage unterbrochen und der neue Text vorgelesen.

Durchführung Der Test ist für folgende Komponenten durchzuführen: lux-autocomplete-ac, lux-checkbox-ac, lux-datepicker-ac, lux-datetimepicker-ac, lux-file-input-ac, lux-input-ac, lux-select-ac, lux-textarea-ac, lux-toggle-ac

1. die jeweilige Testseite für die Komponente öffnen.
2. für die Komponente einen Fehler herbeiführen, dazu die Komponenten aktivieren (ins Textfeld klicken oder toggle benutzen) und danach luxRequired auf true setzen.

Zu erwartendes Ergebnis: Die Fehlermeldung erscheint und wird vom Screenreader bei aktiviertem/fokussiertem Element vorgelesen.

[DSeifer]

Unter Windows 10 Enterprise 22H2 (19045.4170) und MacOS 14.4 mit den jeweils aktuellen Browserversionen getestet:

Windows: Edge -> OK MacOS: Safari Der Text unter dem Toggle "luxRequired" wird immer vorgelesen. -> OK Der Fehlertext wird bei den meisten Komponenten aber erst vorgelesen, wenn das fehlerhafte Feld erneut den Fokus erhält. Beim Verlassen des fehlerhaften Feldes wird nur der Text des als nächsten angesprungenen Feldes vorgelesen. Ist das so gewollt?

[patrowe]

Ja, das ist ein gewolltes Verhalten. Die Errormessage hat das Attribute "polite" und unterbricht deshalb nicht die aktuellen Ansagen. Daher, wird der Fehler in dieser Situation erst vorgelesen, wenn das entsprechende Form-Control den Focus zurückbekommt.