Svelte中如何让自定义组件通过a11y-label-has-associated-control校验？

我创建了一个会输出<input>的Svelte组件<MyInput>，使用时将其嵌套在<label>标签内，代码如下：

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

此时svelte-check抛出无障碍校验错误：

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

我发现类似的jsx-a11y/label-has-associated-control规则有controlComponents选项，但Svelte不参考ESLint配置。请问如何告知Svelte该自定义组件是<label>的关联控件？

我找到两种临时修复方案但不想采用：

• 添加无效的for属性，如<label for="nothing">
• 在<MyInput>内部嵌入<label>及标签文本（但希望组件保持简洁）

方法一：通过ID关联（推荐） #

让<MyInput>组件接受id属性并传递给内部的<input>，同时给外部的<label>设置对应的for属性，svelte-check就能识别到两者的关联关系。

外部使用代码：

<label for="username-input">
  用户名
  <MyInput id="username-input" />
</label>

<MyInput>组件代码：

<script>
  export let id;
</script>

<input {id} />

方法二：自动生成ID（无需手动指定） #

如果不想每次手动输入ID，可以在<MyInput>组件内部自动生成唯一ID，再通过绑定传递给外部<label>：

组件代码：

<script>
  export let id = `input-${Math.random().toString(36).slice(2, 10)}`;
</script>

<input {id} />

外部使用代码：

<script>
  let inputId;
</script>

<label for={inputId}>
  邮箱
  <MyInput bind:id={inputId} />
</label>

这种方式无需手动编写ID，也能通过无障碍校验。

方法三：使用aria-labelledby（替代方案） #

如果不想用for+id的组合，也可以给<label>设置ID，让<MyInput>内部的<input>通过aria-labelledby关联：

外部代码：

<label id="email-label">
  邮箱
  <MyInput aria-labelledby="email-label" />
</label>

组件代码：

<script>
  export let ariaLabelledby;
</script>

<input aria-labelledby={ariaLabelledby} />

注：这种方式兼容性略逊于for+id，优先推荐前两种方法。

内容的提问来源于stack exchange，提问作者Ginpei