Rozšíření možností pro vkládání validační zprávy

Byla upravena logika pro vkládání validačních zpráv. Samotné vyhledávání placeholder elementu pro validační zprávy (a třídy označující validační stav) se nezměnila. Před samotným vložením validační zprávy se ale ještě hledá element .pdforms-messages__aria. Pokud je nalezen, použije se ten, jinak se použije přímo placeholder. Data atributy pro pozici zprávy zůstávají zachovány.

Díky tomu je možné poskytnout lepší UX pro uživatele odečítačů obrazovek, kdy danému elementu můžeme přidat atribut aria-live="polite" a tím zajistit jeho čtení při změně. Zároveň, protože jde o dedikovaný element pouze pro validační zprávy, nedochází ke čtení již dříve přečtených částí formuláře. Tj. není čtený opakovaně input, label a případné jakékoli další elementy, které byly v placeholderu, ale nijak se validací nezměnily.

Základní struktura kódu pro použití je následující:

<p> <!-- Na tento element budou přidané stavové validační CSS třídy-->
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" ...>
    <span class="pdforms-messages__aria" aria-live="polite"></span> <!-- Do tohoto elementu budou vloženy validační zprávy -->
</p>

Složitější struktura může vypadat například takto. V tomto případě by přidání aria-live="polite" na celý fieldset vedlo ke špatnému UX, kdy by byl zopakován velký kus dokumentu.

<fieldset class="pdforms-messages">
    <legend>Výběr dopravy</legend>
    <div class="pdforms-message__aria" aria-live="polite"></div> <!-- Odečítač obrazovky přečte pouze vložené validační zprávy -->
   <!-- Např. vypsané radio buttony pro jednotlivé dopravy, včetně delších popisů, cen, atd. -->
</fieldset>