A11y: A form label must be associated with a control

[awhitford]

I noticed these compilation issues:

(!) Plugin svelte: A11y: A form label must be associated with a control.
node_modules/smelte/src/components/Checkbox/Label.svelte
20: </script>
21: 
22: <label
    ^
23:   aria-hidden="true"
24:   {...$$props}
node_modules/smelte/src/components/Slider/Slider.svelte
52: </script>
53: 
54: <label>{label}</label>
    ^
55: <input
56:   use:applyColor
node_modules/smelte/src/components/Switch/Switch.svelte
67:     </Ripple>
68:   </div>
69:   <label aria-hidden="true" class={l}>
      ^
70:     {label}
71:   </label>
node_modules/smelte/src/components/TextField/Label.svelte
73: </style>
74: 
75: <label class="{lClasses} {$$props.class}" {...props}>
    ^
76:   <slot />
77: </label>
created public/build/bundle.js in 5s

I think the fundamental complaint from A11y is that the label tags have no for attribute.

[awhitford]

According to this answer, you can just put the <input> inside the <label>, then no id/for is needed -- which is I think what Smelte is doing. As a result, this looks like a false alarm. Looks related to sveltejs/svelte#5528

[awhitford]

See a11y validation logic for label:
https://github.com/sveltejs/svelte/blob/945f741298f54540531b1c4370ab786b5a78f107/src/compiler/compile/nodes/Element.ts#L530-L538