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

其作用

强制一个标签标记拥有文本标签和关联控件。

为何不这么做

未正确关联表单控件（例如 <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>;

参考

• 规则来源