useValidAriaProps (JavaScript)

Summary

Rule available since: v1.0.0
Diagnostic Category: lint/a11y/useValidAriaProps
This rule is recommended, meaning it is enabled by default.
This rule has an unsafe fix.
The default severity of this rule is error.
Sources:
- Same as jsx-a11y/aria-props
- Same as astro/jsx-a11y/aria-props

How to configure

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

Description

Disallow unknown aria-* attributes.

ARIA (Accessible Rich Internet Applications) attributes describe an element to assistive technologies. Browsers ignore misspelled or unknown ARIA attributes, so users may not receive the element’s intended name, state, or other accessibility information.

Examples

Invalid

1
<input className="" aria-labell="" />

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

  ✖ The element contains invalid ARIA attribute(s)
  
  > 1 │ <input className="" aria-labell="" />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ aria-labell is not a valid ARIA attribute.
  
  > 1 │ <input className="" aria-labell="" />
      │                     ^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Assistive technologies ignore ARIA attributes that do not exist, so the attribute has no effect. It is often a typo.
  
  ℹ Unsafe fix: Remove the invalid aria-* attribute.
                    Check the list of all valid aria-* attributes.
  
    1 │ <input·className=""·aria-labell=""·/>
      │                     ---------------

1
<div aria-lorem="foobar" />;

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

  ✖ The element contains invalid ARIA attribute(s)
  
  > 1 │ <div aria-lorem="foobar" />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ aria-lorem is not a valid ARIA attribute.
  
  > 1 │ <div aria-lorem="foobar" />;
      │      ^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Assistive technologies ignore ARIA attributes that do not exist, so the attribute has no effect. It is often a typo.
  
  ℹ Unsafe fix: Remove the invalid aria-* attribute.
                    Check the list of all valid aria-* attributes.
  
    1 │ <div·aria-lorem="foobar"·/>;
      │      --------------------

Valid

1
<input aria-label="Search" />

Accessibility guidelines

WCAG 4.1.2