Lint Rules

useAriaPropsForRole (since v11.0.0)

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

Examples

Invalid

<span role="checkbox"></span>
nursery/useAriaPropsForRole.js:1:7 lint/nursery/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>
nursery/useAriaPropsForRole.js:1:7 lint/nursery/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

Resources