search

svecosystem / formsnap

Functional, accessible, and powerful form components for Svelte. 🫰
https://formsnap.dev
MIT License
593 stars 28 forks source link

label, description and validation component attributes not rendered server side #88

Closed wagerfield closed 1 year ago

wagerfield commented 1 year ago

@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 1 year ago

$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 1 year ago

@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.