Lint Rules

noRedundantRoles (since v12.1.0)

Enforce explicit role property is not the same as implicit/default role property on an element.

ESLint (eslint-plugin-jsx-a11y) Equivalent: no-redundant-roles

Examples

Invalid

<article role='article'></article>
nursery/noRedundantRoles.js:1:15 lint/nursery/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━

   Using the role attribute 'article' on the 'article' element is redundant.
  
  > 1 │ <article role='article'></article>
                 ^^^^^^^^^
    2 │ 
  
   Suggested fix: Remove the role attribute.
  
    1 │ <article·role='article'></article>
           --------------           
<button role='button'></button>
nursery/noRedundantRoles.js:1:14 lint/nursery/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━

   Using the role attribute 'button' on the 'button' element is redundant.
  
  > 1 │ <button role='button'></button>
                ^^^^^^^^
    2 │ 
  
   Suggested fix: Remove the role attribute.
  
    1 │ <button·role='button'></button>
          -------------          
<h1 role='heading' aria-level='1'>title</h1>
nursery/noRedundantRoles.js:1:10 lint/nursery/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━

   Using the role attribute 'heading' on the 'h1' element is redundant.
  
  > 1 │ <h1 role='heading' aria-level='1'>title</h1>
            ^^^^^^^^^
    2 │ 
  
   Suggested fix: Remove the role attribute.
  
    1 │ <h1·role='heading'·aria-level='1'>title</h1>
      ---------------                         

Valid

<article role='presentation'></article>
<Button role='button'></Button>
<span></span>