3.3.1; 4.1.2 Chyba pri pridaní adresáta nie je priradená k poľu a zameranie sa stratí

URL: agp.dev.slovensko.digital/bundles/4f808dd3-1070-4a99-9646-7df02adef1bd

Popis problému:

Ak server odmietne zadanú e-mailovú adresu adresáta, formulár sa prekreslí cez Turbo a pod poľom sa zobrazí <p class="text-sm text-red-600">Email nie je platná hodnota</p>. Pole #recipient_email nedostane atribút aria-invalid="true" ani aria-describedby s odkazom na hlásenie a hlásenie nie je v živej oblasti. Po odoslaní formulára sa zameranie stratí (document.activeElement je <body>), pretože pôvodné tlačidlo „Pridať“ bolo pri prekreslení nahradené. Hlásenie navyše neuvádza, ako chybu opraviť.

Dopad:

Používateľ čítača obrazovky po stlačení „Pridať“ nepočuje nič — nevie, či bol adresát pridaný, a o chybe sa dozvie iba náhodou pri čítaní stránky. Ak sa vráti do poľa, chyba sa mu neoznámi. Používateľ klávesnice musí formulár hľadať znova od začiatku stránky. Postihnutí sú nevidiaci a ťažko slabozrakí používatelia, používatelia klávesnice a používatelia s kognitívnym znevýhodnením.

Závažnosť: vysoká — chyba v kľúčovom kroku odoslania na podpis zostane nepovšimnutá.

Efektívne riešenie:

Pre splnenie kritérií úspešnosti je potrebné chybové hlásenie prepojiť s poľom cez aria-describedby, pole označiť aria-invalid="true" a po prekreslení presunúť zameranie na chybné pole. Text hlásenia je vhodné formulovať s nápravou, napríklad „Zadajte e-mailovú adresu v tvare meno@domena.sk“.

<input type="email" id="recipient_email" aria-invalid="true" aria-describedby="recipient_email_error" …>
<p id="recipient_email_error" class="text-sm text-red-700">Zadajte e-mailovú adresu v tvare meno@domena.sk</p>