useValidAriaValues

JSX and TSX

摘要

¥Summary

规则生效日期：v1.0.0

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

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

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

如何配置

¥How to configure

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

描述

¥Description

强制正确使用和。

¥Enforce that ARIA state and property values are valid.

示例

¥Examples

无效

¥Invalid

1
<span role="checkbox" aria-checked="test">some text</span>

code-block.jsx:1:23 lint/a11y/useValidAriaValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The value of the ARIA attribute aria-checked is not correct.
  
  > 1 │ <span role=“checkbox” aria-checked=“test”>some text</span>
      │                       ^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The only supported value for the aria-checked property one of the following:
  
  - false
  - true
  - mixed

1
<span aria-labelledby="">some text</span>

code-block.jsx:1:7 lint/a11y/useValidAriaValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The value of the ARIA attribute aria-labelledby is not correct.
  
  > 1 │ <span aria-labelledby="">some text</span>
      │       ^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The only supported value is a space-separated list of HTML identifiers.

1
<span aria-valuemax="hey">some text</span>

code-block.jsx:1:7 lint/a11y/useValidAriaValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The value of the ARIA attribute aria-valuemax is not correct.
  
  > 1 │ <span aria-valuemax=“hey”>some text</span>
      │       ^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The only supported value is number.

1
<span aria-orientation="hey">some text</span>

code-block.jsx:1:7 lint/a11y/useValidAriaValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The value of the ARIA attribute aria-orientation is not correct.
  
  > 1 │ <span aria-orientation=“hey”>some text</span>
      │       ^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The only supported value for the aria-orientation property is one of the following:
  
  - undefined
  - horizontal
  - vertical

有效

¥Valid

1
<>
2
    <span role="checkbox" aria-checked={checked} >some text</span>
3
    <span aria-labelledby="fooId barId" >some text</span>
4
</>

可访问性指南

¥Accessibility guidelines

WCAG 4.1.2

资源

¥Resources

useValidAriaValues

摘要

如何配置

描述

示例

无效

有效

可访问性指南

资源

相关链接