svecosystem/formsnap

label, description and validation component attributes not rendered server side

wagerfield opened this issue · 2 comments

wagerfield commented

@huntabyte many thanks for addressing the issues I raised in #71 in PR #78 🙌

However the following 3 components were missed in that PR:

  1. form-label.svelte
  2. form-description.svelte
  3. form-validation.svelte

Please could you spread the $attrStore onto the attrs object of these 3 components so they are rendered server side too?

Thanks again for all your efforts and OS contributions!

huntabyte commented

$attrStore only represents the attributes for the input/control elements. I'll look into what is lacking SSR-wise for the validation/description which I think should only be the IDs.

wagerfield commented

@huntabyte the label component is missing the for attribute and the description and validation components are missing the id attributes. It's important that the HTML that's rendered server side contains all the attributes necessary for an accessible form on a client without JavaScript.

In the absence of the for and id attributes on the label, description and validation elements, I believe screen readers are unable to understand the relationship between these elements. It also prevents labels acting as interactive elements when say toggling a checkbox or focusing an input etc.