英文:
Svelte component as target of a11y-label-has-associated-control rule
问题
我创建了一个 Svelte 组件 <MyInput>，它输出 <input>。
然后 svelte-check 警告了这个错误：
A11y: 表单标签必须与控件相关联。svelte (a11y-label-has-associated-control)
我找到了类似的规则 jsx-a11y/label-has-associated-control，并认为 controlComponents 选项可以解决这个问题，但 Svelte 不引用 ESLint 配置。（没错，它是 JSX。）
如何告诉 Svelte 这个组件是相关联的控件？
我找到的快速解决办法，但不想要的：
- 添加一个随机的
for，比如<label for="nothing">（显然是个坏主意） - 将
<label>嵌套在<MyInput>中，以及标签文本（但我希望这里不是复杂的组件）
英文:
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
forlike<label for="nothing">(obviously a bad idea) - Embed
<label>inside the<MyInput>as well as label text (but I wish not-complex component here)
答案1
得分: 2
这是一个误报。关于此问题有一个已经开放的问题。
您现在只能真正忽略这个警告：
<!-- svelte-ignore a11y-label-has-associated-control -->
<label>...
为了只在一个地方忽略它，您可以创建一个Label组件，尽管这当然会创建一些不必要的组件开销。
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论