4.1.2; 3.3.1 Výberové pole stratí v chybovom stave prístupný názov a chyba k nemu nie je priradená
Popis problému:
Komponent Select (src/components/FormComponents.tsx) pri chybe vykreslí chybové hlásenie s rovnakým identifikátorom, aký má výberové pole:
<label class="govuk-label" for="children[0].monthTo">Do</label> <span id="children[0].monthTo" class="govuk-error-message"><span class="govuk-visually-hidden">Chyba:</span> Musí byť September alebo neskôr</span> <select class="govuk-select" id="children[0].monthTo" …>
Menovka for="children[0].monthTo" sa tak viaže na prvý prvok s týmto identifikátorom — na <span> — a pole „Do“ stratí prístupný názov. Chybové hlásenie k poľu priradené nie je (pole nemá aria-describedby ani aria-invalid) a odkaz zo súhrnu chýb vedie na <span>. Chyba vznikne v kroku Deti pri voľbe „V niektorých mesiacoch“, ak je mesiac „Od“ neskôr ako „Do“. Ten istý komponent používajú aj výberové polia v časti o druhej oprávnenej osobe v tom istom kroku (partner_bonus_na_deti_od, partner_bonus_na_deti_do, partner_bonus_na_deti_typ_prijmu) a rovnaký vzor má v kóde aj komponent Checkbox.
Overené čítačom obrazovky NVDA 2026.2 v Chrome 154 (3. 10. 2026): pole „Od“ NVDA oznámi „Od, combo box, September, collapsed“, pole „Do“ v chybovom stave iba „combo box, Február, collapsed“ — bez názvu a bez chyby.
Dopad:
Používateľ čítača obrazovky sa po chybe vráti k poľu, ktoré je potrebné opraviť, a nedozvie sa, čo pole vyjadruje ani aká chyba v ňom je; počuje iba hodnotu. Používatelia hlasového ovládania nemôžu pole vyvolať jeho názvom. Postihnutí sú nevidiaci a ťažko slabozrakí používatelia čítačov obrazovky a používatelia hlasového ovládania.
Závažnosť: vysoká — pole bez názvu práve v situácii, keď ho treba opraviť.
Efektívne riešenie:
Pre splnenie kritéria úspešnosti je potrebné dať chybovému hláseniu vlastný identifikátor (napríklad ${name}-error, ako v komponente Input) a priradiť ho k poľu atribútom aria-describedby spolu s aria-invalid="true":
{meta.error && <span id={`${name}-error`} className="govuk-error-message">…</span>}
<select id={name} aria-describedby={meta.error ? `${name}-error` : undefined} aria-invalid={meta.error ? true : undefined} …>Rovnakú opravu potrebuje komponent Checkbox. Identifikátory na stránke musia byť jedinečné.
