noAutofocus

JSX and TSX

摘要

¥Summary

规则生效日期：v1.0.0

¥Rule available since: v1.0.0
诊断类别：lint/a11y/noAutofocus

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

¥This rule is recommended, which means is enabled by default.
此规则包含 unsafe 修复程序。

¥This rule has an unsafe fix.
此规则的默认严重级别为 error。

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

¥Sources:
- 与 jsx-a11y/no-autofocus 相同
  
  ¥Same as jsx-a11y/no-autofocus

如何配置

¥How to configure

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

描述

¥Description

强制元素上未使用 autoFocus prop。

¥Enforce that autoFocus prop is not used on elements.

自动聚焦元素可能会给视力正常和视力不佳的用户带来可用性问题。在打开模态对话框或弹出窗口时，应立即将 autofocus 属性添加到用户预期与之交互的元素上。

¥Autofocusing elements can cause usability issues for sighted and non-sighted users, alike. But the autofocus attribute should be added to the element the user is expected to interact with immediately upon opening a modal dialog or popover.

示例

¥Examples

无效

¥Invalid

1
<input autoFocus />

code-block.jsx:1:8 lint/a11y/noAutofocus  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the autoFocus attribute.
  
  > 1 │ <input autoFocus />
      │        ^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the autoFocus attribute.
  
    1 │ <input·autoFocus·/>
      │        ----------

1
<input autoFocus="true" />

code-block.jsx:1:8 lint/a11y/noAutofocus  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the autoFocus attribute.
  
  > 1 │ <input autoFocus=“true” />
      │        ^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the autoFocus attribute.
  
    1 │ <input·autoFocus=“true”·/>
      │        -----------------

1
<input autoFocus={"false"} />

code-block.jsx:1:8 lint/a11y/noAutofocus  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the autoFocus attribute.
  
  > 1 │ <input autoFocus={“false”} />
      │        ^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the autoFocus attribute.
  
    1 │ <input·autoFocus={“false”}·/>
      │        --------------------

1
<input autoFocus={undefined} />

code-block.jsx:1:8 lint/a11y/noAutofocus  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the autoFocus attribute.
  
  > 1 │ <input autoFocus={undefined} />
      │        ^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the autoFocus attribute.
  
    1 │ <input·autoFocus={undefined}·/>
      │        ----------------------

有效

¥Valid

1
<input />

1
<div />

1
<button />

1
// `autoFocus` prop in user created component is valid
2
<MyComponent autoFocus={true} />

1
// `autoFocus` prop in element has `popover` attribute is valid
2
<div popover><input autoFocus /></div>

1
// `autoFocus` prop in `dialog` is valid
2
<dialog><input autoFocus /></dialog>

资源

¥Resources

noAutofocus

摘要

如何配置

描述

示例

无效

有效

资源

相关链接