noRedundantRoles (HTML)

Language

• HTML
• JavaScript (and super languages)

Summary

• Rule available since: v2.5.0
• Diagnostic Category: lint/a11y/noRedundantRoles
• 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:
  • Inspired from jsx-a11y/no-redundant-roles
  • Same as @html-eslint/no-redundant-role

How to configure

biome.json

{
  "linter": {
    "rules": {
      "a11y": {
        "noRedundantRoles": "error"
      }
    }
  }
}

Description

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

Note

In .html files, all elements are treated as native HTML elements.

In component-based frameworks (Vue, Svelte, Astro), only native HTML element names are checked. PascalCase names like <Button> and kebab-case names like <my-button> are assumed to be custom components and are ignored.

Examples

Invalid

<article role="article"></article>

code-block.html:1:10 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Using the role attribute 'article' on the 'article' element is redundant, because it is implied by its semantics.
  
  > 1 │ <article role="article"></article>
      │          ^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the role attribute.
  
    1 │ <article·role="article"></article>
      │          --------------           

<button role="button"></button>

code-block.html:1:9 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Using the role attribute 'button' on the 'button' element is redundant, because it is implied by its semantics.
  
  > 1 │ <button role="button"></button>
      │         ^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the role attribute.
  
    1 │ <button·role="button"></button>
      │         -------------          

<h1 role="heading" aria-level="1">title</h1>

code-block.html:1:5 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Using the role attribute 'heading' on the 'h1' element is redundant, because it is implied by its semantics.
  
  > 1 │ <h1 role="heading" aria-level="1">title</h1>
      │     ^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the role attribute.
  
    1 │ <h1·role="heading"·aria-level="1">title</h1>
      │     ---------------                         

Valid

<article role="presentation"></article>

<span></span>

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases