Giters

matyunya / smelte

UI framework with material components built with Svelte and Tailwind CSS

Home Page:https://smeltejs.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

A11y: A form label must be associated with a control

awhitford opened this issue · comments

commented

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.

commented

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