Skip to content

useAriaPropsForRole

Diagnostic Category: lint/a11y/useAriaPropsForRole

JSX and TSX

Since: v1.0.0

Sources:

Same as: jsx-a11y/role-has-required-aria-props

Enforce that elements with ARIA roles must have all required ARIA attributes for that role.

Examples

Invalid

<span role="checkbox"></span>

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

  ✖ The element with the checkbox ARIA role does not have the required ARIA attributes.
  
  > 1 │ <span role=“checkbox”></span>
      │       ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Missing ARIA prop(s):
  
  - aria-checked

<span role="heading"></span>

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

  ✖ The element with the heading ARIA role does not have the required ARIA attributes.
  
  > 1 │ <span role=“heading”></span>
      │       ^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Missing ARIA prop(s):
  
  - aria-level

Valid

<span role="checkbox" aria-checked="true"></span>

<span role="heading" aria-level="1"></span>

Accessibility guidelines

WCAG 4.1.2

Resources