associate form label with a control

[DougAnderson444]

With the new svelte-loader, I am getting these annoying warnings:

node_modules/@smui/floating-label/FloatingLabel.svelte
Module Warning (from ./node_modules/svelte-loader/index.js):
A11y: A form label must be associated with a control. (10:2)
 8:   ><slot></slot></span>
 9: {:else}
10:   <label
      ^
11:     bind:this={element}
12:     use:useActions={use}

node_modules/@smui/list/Label.svelte
Module Warning (from ./node_modules/svelte-loader/index.js):
A11y: A form label must be associated with a control. (1:0)
1: <label
   ^
2:   use:useActions={use}
3:   use:forwardEvents

node_modules/@smui/textfield/Textfield.svelte
Module Warning (from ./node_modules/svelte-loader/index.js):
A11y: A form label must be associated with a control. (2:2)
1: {#if valued}
2:   <label
     ^
3:     bind:this={element}
4:     use:useActions={use}
? service worker (13.7s)
 server

node_modules/@smui/floating-label/FloatingLabel.svelte
Module Warning (from ./node_modules/svelte-loader/index.js):
A11y: A form label must be associated with a control. (10:2)
 8:   ><slot></slot></span>
 9: {:else}
10:   <label
      ^
11:     bind:this={element}
12:     use:useActions={use}

node_modules/@smui/list/Label.svelte
Module Warning (from ./node_modules/svelte-loader/index.js):
A11y: A form label must be associated with a control. (1:0)
1: <label
   ^
2:   use:useActions={use}
3:   use:forwardEvents

node_modules/@smui/textfield/Textfield.svelte
Module Warning (from ./node_modules/svelte-loader/index.js):
A11y: A form label must be associated with a control. (2:2)
1: {#if valued}
2:   <label
     ^
3:     bind:this={element}
4:     use:useActions={use}

[chalkplum]

me too, after update svelte

> C:\...\node_modules\@smui\textfield\Textfield.svelte
A11y: A form label must be associated with a control.
1: {#if valued}
2:   <label
     ^
3:     bind:this={element}
4:     use:useActions={use}

> C:\...\node_modules\@smui\floating-label\FloatingLabel.svelte
A11y: A form label must be associated with a control.
 8:   ><slot></slot></span>
 9: {:else}
10:   <label
      ^
11:     bind:this={element}
12:     use:useActions={use}

> C:\...\node_modules\@smui\common\ClassAdder.svelte
ClassAdder has unused export property 'internals'. If it is for external reference only, please consider using `export const internals`
 6: ><slot></slot></svelte:component>
 7:
 8: <script context="module">export var internals = {
                                        ^
 9:   component: null,
10:   smuiClass: null,

> C:\...\node_modules\@smui\list\Label.svelte
A11y: A form label must be associated with a control.
1: <label
   ^
2:   use:useActions={use}
3:   use:forwardEvents

[perciag]

+up, me too.

    "sapper": "^0.28.0",
    "svelte": "^3.26.0",
    "svelte-material-ui": "^1.0.0"

[danielcaldas]

+1

[ThomasDeruel]

Issue sveltejs/svelte#5528

[hperrin]

Yeah, I don't know how to turn these off. Svelte will complain if the label doesn't have a for attribute. The controls are inside the label though, so it is valid HTML.

[TerrapinSoftware]

I added this code to rollup.config.js to suppress the warning:

svelte({
...
	onwarn: (warning, handler) => {
		// don't warn 'A11y: A form label must be associated with a control'
		if (warning.code === 'a11y-label-has-associated-control') return;
		// let Rollup handle all other warnings normally
		handler(warning);
	}
}),

Hacky, but it works.

[hperrin]

This is fixed in the latest version. SMUI now suppresses the message with for={null} on the label, since the label contains the input, so it doesn't need a for attribute.

[hperrin]

To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id.
Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

[hperrin]

Btw, Svelte will filter the for attribute, since its value is nullish, so the label won't actually have a for attribute.