Search code examples
accessibilitysvelte

Svelte component as target of a11y-label-has-associated-control rule

I created a Svelte component <MyInput> that outputs <input>.

<label>
  Some text
  <MyInput />
</label>

Then the svelte-check warns this error:

A11y: A form label must be associated with a control. svelte (a11y-label-has-associated-control)

I found the similar rule jsx-a11y/label-has-associated-control, and thought the controlComponents options would solve it, but Svelte does not refer ESLint config. (Right, it's JSX anyway.)

How to tell Svelte that the component is the associated control?

Quick fixes I found but don't want

  • Add a random for like <label for="nothing"> (obviously a bad idea)
  • Embed <label> inside the <MyInput> as well as label text (but I wish not-complex component here)
Solution

  • This is a false positive. There is an open issue regarding that.

    You can only really ignore the warning right now:

    <!-- svelte-ignore a11y-label-has-associated-control -->
<label>...

    To only have the ignore in one place you could create a Label component, though that of course creates some unnecessary component overhead.