useAriaPropsSupportedByRole

JavaScript (and super languages)

摘要

¥Summary

规则生效日期：v1.9.0

¥Rule available since: v1.9.0
诊断类别：lint/a11y/useAriaPropsSupportedByRole

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

¥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/role-supports-aria-props 相同
  
  ¥Same as jsx-a11y/role-supports-aria-props

如何配置

¥How to configure

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

描述

¥Description

强制 ARIA 属性对于元素支持的角色有效。

¥Enforce that ARIA properties are valid for the roles that are supported by the element.

无效的 ARIA 属性会使辅助技术的用户难以理解元素的用途。

¥Invalid ARIA properties can make it difficult for users of assistive technologies to understand the purpose of the element.

示例

¥Examples

无效

¥Invalid

1
<a href="#" aria-checked />

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

  ✖ The ARIA attribute ‘aria-checked’ is not supported by this element.
  
  > 1 │ <a href=”#” aria-checked />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Ensure that ARIA attributes are valid for the role of the element.

1
<img alt="foobar" aria-checked />

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

  ✖ The ARIA attribute ‘aria-checked’ is not supported by this element.
  
  > 1 │ <img alt=“foobar” aria-checked />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Ensure that ARIA attributes are valid for the role of the element.

有效

¥Valid

1
<>
2
    <a href="#" aria-expanded />
3
    <img alt="foobar" aria-hidden />
4
    <div role="heading" aria-level="1" />
5
</>

useAriaPropsSupportedByRole

摘要

如何配置

描述

示例

无效

有效

相关链接