🐞 Bug: Form Error-List sowie Komponenten-Fehlermeldungen werden von Screen Reader ignoriert

[programmishka]

Link to the code that reproduces this issue:

Can you categorise where the error occurs?

React

Which browser or operating system do you used to test KoliBri?

Chrome

How to reproduce issue?

Eine Form submitten, ohne Pflichtfelder auszufüllen

Current vs. Expected:

Current: Screen Reader nimmt die Änderungen auf der Form gar nicht wahr.
Expected: Screen Reader ließt zumindest die Error-List durch, damit man zu entsprechenden Stellen navigieren und Fehler beheben kann

Environment informations:

 "Operating System": {
 "platform": "linux",
 "arch": "x64",
 "version": "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
 },
 "Binaries": {
 "node": "v18.20.3",
 "npm": "10.2.3",
 "pnpm": "8.15.6",
 "yarn": "1.22.19"
 },
 "Relevant Packages": {
 "@public-ui/components": "^2",
 "@public-ui/react": "^2",
 "@public-ui/theme-default": "^2",
 "react": "^18",
 "react-dom": "^18",
 "typescript": "^5"
 }
 } ```

[deleonio]

Hi @programmishka.

Das KolForm läuft standardmäßig im novalidate. Wir validieren in der Regel über fachliche Validatoren.

Wollt ihr die native Validierung verwenden? Achtung, wenn ja, dann gilt das für alles Felder im Form.

Bitte ein kleines Repo-Beispiel: https://stackblitz.com/edit/vitejs-vite-kkfhk5

[deleonio]

• neues Prop für novalidate?

[programmishka]

Wir validieren über React Forms. formState wird entsprechend aktualisiert. Die errorList wird entsprechend gefüllt und ausgegeben. Jedoch, wie gesagt, nicht vorgelesen.

Man braucht kein Bespielprojekt. Man kann hier direkt nachstellen:
https://public-ui.github.io/v2/sample-react/#/scenarios/appointment-form

Select ansteuern, keinen Wert auswählen, mit Tab auf "Next" Button wechseln und mit Enter bestätigen.

Ergebnis: visuell werden Fehlermeldungen dargestellt.

NVDA Version 2024.3.1 Ausgabe:

Haupt Sprungmarke
1. Choose registration office  Eigenschaftsseite
District*  Kombinationsfeld  Please select…  eingeklappt  erforderlich
Error Please select district.
Next  Schalter  
Next

[programmishka]

BITV sagt: ARIA-Live Region wird geprüft, falls die Seite nicht neugeladen wird:
https://bitvtest.de/pruefschritt/bitv-20-web/bitv-20-web-9-4-1-3-statusmeldungen-programmatisch-verfuegbar

[deleonio]

Wir haben in Version 2.2.2 das Beispiel entfernt: #6370

Es wird eine Neuauflage, nach den anstehenden Major Release 3 geben.