A11y: A form label must be associated with a control

[lagden]

I think this rule needs more accuracy.

According to w3 (https://www.w3.org/TR/html401/interact/forms.html#h-17.9.1), the code can be written this way:

<label>
  <span aria-label="First Name">First Name</span>
  <input type="text" name="firstname">
</label>

The way above solve A11y problem, right?

[rikosage]

I have the same problem. I'm using this component

<div class="form-group">
  <label id="country-selector">Select country</label>
  <Select {items} bind:selectedValue={country} id="country-selector"/>
</div>

[lagden]

@rikosage

Your code it's not right.

Replace:

<label id="country-selector">Select country</label>

by:

<label for="country-selector">Select country</label>

And warning will disappear.

[Conduitry]

@lagden What more accuracy are you looking for? The code in your initial comment isn't giving me a warning from the compiler. Is there something that you think is giving an overzealous a11y warning?

[lagden]

Well!

I made an example: https://svelte.dev/repl/1a5067144e26400097b0417f238dce80?version=3.24.1

Exist some properties conditions inside the component (LabelAtom.svelte).
So, it would only be possible to say if it is associated after it has been compiled.

Anyway, I think it is an overzealous on my part, because I did the test only in REPL.

[callmemagnus]

Hi all,

I fail to understand that this ticket is closed.

The original request was to make the compile time warning go away when it was wrongly saying that a label is not associated with an input in the case of having the input inside the label.
There is now a PR open (I don't know if it fixes it).
Will the be considered to be fixed in a near future ?

Have a nice day!

[moritzebeling]

Does the input have to be a direct child of the label?

This works:

<label>
    <input type="text">
</label>

While this continues to throw the A11y warning:

<label>
    <div>
        <input type="text">
    </div>
</label>

[andirady]

Is it possible to add ignore warning attribute to the element? Maybe something like:

<label @ignore="a11y">
</label>

[lagden]

Take easy, folks!
Insert in yours rollup.config.js the code below:

const ignoreWarnings = new Set([
	'a11y-no-onchange',
	'a11y-label-has-associated-control'
])

//...
svelte({
	//...
	onwarn(warning, handler) {
		if (ignoreWarnings.has(warning.code)) {
			return
		}
		handler(warning)
	}
}),
//...

[simonvomeyser]

Thanks so much @lagden that solved it for me! Svelte was warning me with this setup, and I didn't want to generate ids

<label class="...">

    {#if type === 'checkbox'}
        <FakeCheckbox/>
    {/if}
    {#if type === 'radio'}
        <FakeRadio/>
    {/if}
    
</label> 

For anyone using Laravel Mix with the laravel-mix-svelte that's my working webpack.mix.js config :)

const mix = require('laravel-mix');
require('laravel-mix-svelte');

const ignoreWarnings = new Set([
    'a11y-no-onchange',
    'a11y-label-has-associated-control'
])

mix.js('resources/js/app.js', 'public/js')
    .svelte({
        onwarn(warning, handler) {
            if (ignoreWarnings.has(warning.code)) {
                return
            }
            handler(warning)
        }
    })

[ifraixedes]

Using an empty for attribute (i.e <label for="">) removed the warnings that I was getting.

[Tal500]

Using an empty for attribute (i.e <label for="">) removed the warnings that I was getting.

Thanks for the workaround!
I use <label for={undefined}>, because it gives a cleaner DOM output (it removes the "for" attribute).

[alpha-mo]

This worked for me:

<script>
    export let label = 'label'
</script>

<label for="custom-input">
    {label}
    <span id="custom-input">
        {#if (type === 'textarea')}
            <textarea></textarea>
        {:else}
            <input type="text">
        {/if}
    </span>
</label>