苗条的标签类给了我"A11y: A form label must be associated with a control."

Question

所以我正在Svelte 中构建一个下拉选择菜单

<script lang="ts">
export let label: string;
export let options: any[] = [1, 2, 41, 6];
export let fullWidth: boolean = false;
</script>
<div class="select">
<select class="select-text" required aria-label={label} class:full-width={fullWidth}>
<option value="" disabled selected />
{#each options as option}
<option value="option">{option}</option>
{/each}
</select>
<span class="select-highlight" />
<span class="select-bar" />
<label class="select-label">{label}</label>
</div>

它的外观和工作方式与我预期的一样，但<label class="select-label">{label}</label>在VSCode中有一个黄色下划线，写着"；A11y：表单标签必须与控件相关联。svelte(A11y标签具有关联控件("；。

组件本身看起来和工作都很好，但这可能值得调查，以防它在以后的路上咬到我的屁股。有人有什么建议吗？

除了我目前的问题之外，我也愿意接受关于组件本身的建议。

Answer 1

作为警告状态，标签应该与输入相关联。有两种主要方法：

• 在标签中包装输入

  <label>
  <input type=checkbox />
  Thing
  </label>
  

• 使用for和id

  <input id=check type=checkbox />
  <label for=check >Thing</label>
  

还有用于其他标记场景的属性aria-label和aria-labelledby。

Answer 2

它会给您一个警告，因为每个<label>元素都需要与表单控件(<input>、<select>等(关联。您可以通过将标签上的for属性设置为<select>:的id来消除此警告

<script lang="ts">
export let label: string;
export let options: any[] = [1, 2, 41, 6];
export let fullWidth: boolean = false;
export let id: string;
</script>
<div class="select">
<select class="select-text" {id} required class:full-width={fullWidth}>
<option value="" disabled selected />
{#each options as option}
<option value="option">{option}</option>
{/each}
</select>
<span class="select-highlight" />
<span class="select-bar" />
<label class="select-label" for={id}>{label}</label>
</div>

请注意，您还可以从<select>中删除aria-label——因为您为具有<label>的元素提供了名称，所以不再需要aria-label。

附加资源：

• Svelte文档
• MDN