noLabelWithoutControl

诊断类别：lint/a11y/noLabelWithoutControl

¥Diagnostic Category: lint/a11y/noLabelWithoutControl

JSX and TSX

自从：v1.8.0

¥Since: v1.8.0

来源：

¥Sources:

与以下相同：jsx-a11y/label-has-associated-control

¥Same as: jsx-a11y/label-has-associated-control

强制标签元素或组件具有文本标签和相关输入。

¥Enforce that a label element or component has a text label and an associated input.

“input” 被视为以下元素之一：input、meter、output、progress、select 或 textarea。

¥An “input” is considered one of the following elements: input, meter, output, progress, select or textarea.

有两种支持将标签与输入关联的方法：

¥There are two supported ways to associate a label with an input:

将输入封装在标签元素中。

¥Wrapping an input in a label element.
向标签添加 for 属性（或 React 中的 htmlFor）并为其分配与页面上的输入相关联的 DOM ID 字符串。

¥Adding a for attribute (or htmlFor in React) to a label and assigning it a DOM ID string associated with an input on the page.

此规则检查任何 label 元素（或将输出 label 元素的指定自定义组件）是否满足以下条件之一：

¥This rule checks that any label element (or an indicated custom component that will output a label element) meets one of these conditions:

封装 input 元素（或将输出 input 元素的指定自定义组件）

¥Wraps an input element (or an indicated custom component that will output an input element)
具有 for 或 htmlFor 属性，并且 label 元素/组件具有可访问的文本内容。

¥Has a for or htmlFor attribute and that the label element/component has accessible text content.

示例

¥Examples

无效

¥Invalid

<label for="js_id" />;

code-block.jsx:1:1 lint/a11y/noLabelWithoutControl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ A form label must be associated with an input.
  
  > 1 │ <label for=“js_id” />;
      │ ^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Consider adding an accessible text content to the label element.

<label for="js_id"><input /></label>;

code-block.jsx:1:1 lint/a11y/noLabelWithoutControl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ A form label must be associated with an input.
  
  > 1 │ <label for=“js_id”><input /></label>;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Consider adding an accessible text content to the label element.

<label htmlFor="js_id" />;

code-block.jsx:1:1 lint/a11y/noLabelWithoutControl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ A form label must be associated with an input.
  
  > 1 │ <label htmlFor=“js_id” />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Consider adding an accessible text content to the label element.

<label htmlFor="js_id"><input /></label>;

code-block.jsx:1:1 lint/a11y/noLabelWithoutControl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ A form label must be associated with an input.
  
  > 1 │ <label htmlFor=“js_id”><input /></label>;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Consider adding an accessible text content to the label element.

<label>A label</label>;

code-block.jsx:1:1 lint/a11y/noLabelWithoutControl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ A form label must be associated with an input.
  
  > 1 │ <label>A label</label>;
      │ ^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Consider adding a for or htmlFor attribute to the label element or moving the input element to inside the label element.

<div><label /><input /></div>;

code-block.jsx:1:6 lint/a11y/noLabelWithoutControl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ A form label must be associated with an input.
  
  > 1 │ <div><label /><input /></div>;
      │      ^^^^^^^^^
    2 │ 
  
  ℹ Consider adding an accessible text content to the label element.
  
  ℹ Consider adding a for or htmlFor attribute to the label element or moving the input element to inside the label element.

有效

¥Valid

<label for="js_id" aria-label="A label" />;
<label for="js_id" aria-labelledby="A label" />;
<label htmlFor="js_id" aria-label="A label" />;
<label htmlFor="js_id" aria-labelledby="A label" />;
<label>A label<input /></label>;
<label>A label<textarea /></label>;
<label><img alt="A label" /><input /></label>;

选项

¥Options

该规则支持以下选项：

¥The rule supports the following options:

inputComponents - 应被视为与 input 元素相同的组件名称数组。

¥inputComponents - An array of component names that should be considered the same as an input element.
labelAttributes - 应被视为 label 可访问文本内容的属性数组。

¥labelAttributes - An array of attributes that should be treated as the label accessible text content.
labelComponents - 应被视为与 label 元素相同的组件名称数组。

¥labelComponents - An array of component names that should be considered the same as a label element.

选项 inputComponents 和 labelComponents 都不支持命名空间组件（例如 <Control.Input>）。

¥Both options inputComponents and labelComponents don’t have support for namespace components (e.g. <Control.Input>).

{
    "//": "...",
    "options": {
        "inputComponents": ["CustomInput"],
        "labelAttributes": ["label"],
        "labelComponents": ["CustomLabel"]
    }
}

noLabelWithoutControl

示例

无效

有效

选项

相关链接