false positive a11y warning for label with control inside component

[Rich-Harris]

Describe the bug

The a11y_label_has_associated_control warning yields false positives in the case where the control is inside a component:

<script>
  import Input from './Input.svelte';
</script>

<label>
  <Input />
</label>

We should omit the warning if a component exists inside the label.

Reproduction

demo

Logs

No response

System Info

next

Severity

annoyance

[brunnerh]

Not sure the warning is really that good/necessary anyway.
A label without an input is just text.
An input without a label is a mystery.

[paoloricciuti]

We should omit the warning if a component exists inside the label.

I don't think overfiring in this case is a problem...the warning can always be muted manually if you know that there's an input inside the component.

Not sure the warning is really that good/necessary anyway.

If we want to discuss the usefulness of the error it's another discourse but i think generally better be safe than sorry with warnings especially since you can mute them when you know better than the compiler.

[thebjorn]

Muting is a pain though, both for writing and for reading. For entering the mute-comment perhaps it could be made easier by having the mute comment in the warning (so it can be copied and pasted)? For reading, perhaps allow a parenthesized comment in the mute-comment?

<!-- svelte:ignore (the control is inside Input) a11y_label_has_associated_control -->
<label>
    <Input />
</label>

Spurious warnings detract from real problems though, so ideally they would be removed.

[Rich-Harris]

That's exactly how it works — the warning code is included (though the details may differ between editors), you can just double-click on it to copy it.

Screen.Recording.2024-06-12.at.8.30.46.AM.mov

Freeform text is allowed after the comma-separated lists of codes to ignore. (There was a conversation elsewhere about whether we should put the freeform text in parens, or after a - character or something, we should revisit that before 5.0. At the moment there's too much potential for ambiguity)

[thebjorn]

I was thinking more that the entire <!-- svelte-ignore a11y_... --> would be copy-able, but you're telling me that I can list more than one warning in the same comment..? ..and provide a reason comment in there too...? (mind blown :-)

Perhaps it should be documented at https://svelte.dev/docs/accessibility-warnings ?

[Rich-Harris]

Yeah, Svelte 4 is very loosey-goosey about this stuff:

<!-- svelte-ignore all of the following: the a11y-accesskey rule
     and the a11y-click-events-have-key-events rule but also the
     a11y-no-static-element-interactions rule
     (in Svelte 5 we will get a bit stricter about where the codes can go)
-->
<div accessKey="z" on:click />

Perhaps it should be documented at https://svelte.dev/docs/accessibility-warnings ?

Agree: #12021