jsx_a11y/label-has-associated-control 正確性

作用

強制要求 label 標籤具有文字標籤和相關聯的控制項。

為何這不好？

如果表單標籤未正確與表單控制項 (例如 <input>) 關聯，或不包含可存取的文字，將會妨礙使用螢幕閱讀器等輔助技術的使用者的存取性。使用者可能沒有足夠的資訊來理解表單控制項的用途。

範例

此規則的錯誤程式碼範例

function Foo(props) {
    return <label {...props} />
}

<input type="text" />
<label>Surname</label>

此規則的正確程式碼範例

function Foo(props) {
  const { htmlFor, ...otherProps } = props;

  return <label htmlFor={htmlFor} {...otherProps} />;
}

<label>
  <input type="text" />
  Surname
</label>;

參考

• 規則來源