noLabelWithoutControl

JSX and TSX

摘要

¥Summary

规则生效日期：v1.8.0

¥Rule available since: v1.8.0
诊断类别：lint/a11y/noLabelWithoutControl

¥Diagnostic Category: lint/a11y/noLabelWithoutControl
此规则为推荐规则，默认启用。

¥This rule is recommended, which means is enabled by default.
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 error。

¥The default severity of this rule is error.
来源：

¥Sources:
- 与 jsx-a11y/label-has-associated-control 相同
  
  ¥Same as jsx-a11y/label-has-associated-control

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "noLabelWithoutControl": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

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

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

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

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

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

¥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

1
<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.

1
<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.

1
<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.

1
<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.

1
<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.

1
<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

1
<label for="js_id" aria-label="A label" />;
2
<label for="js_id" aria-labelledby="A label" />;
3
<label htmlFor="js_id" aria-label="A label" />;
4
<label htmlFor="js_id" aria-labelledby="A label" />;
5
<label>A label<input /></label>;
6
<label>A label<textarea /></label>;
7
<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>).

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "noLabelWithoutControl": {
6
          "options": {
7
            "inputComponents": [
8
              "CustomInput"
9
            ],
10
            "labelAttributes": [
11
              "label"
12
            ],
13
            "labelComponents": [
14
              "CustomLabel"
15
            ]
16
          }
17
        }
18
      }
19
    }
20
  }
21
}

noLabelWithoutControl

摘要

如何配置

描述

示例

无效

有效

选项

相关链接