---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: invalid.jsx
---
# Input
```jsx
<>
	<article role="article"></article>
	<button role="button"></button>
	<h1 role="heading" aria-level="1">
		title
	</h1>
	<h1 role="heading">title</h1>
	<h2 role={`heading`}></h2>
	<dialog role="dialog"></dialog>
	<input type="checkbox" role="checkbox" />
	<figure role="figure"></figure>
	<form role="form"></form>
	{/* Needs to check the ancestors: <td role="gridcell"></td> */}
	<fieldset role="group"></fieldset>
	<img src="foo" alt="bar" role="img" />
	<img alt="" role="presentation"></img>
	<a href="#" role="link"></a>
	<ol role="list"></ol>
	<ul role="list"></ul>
	<select name="name" role="combobox"></select>
	<select name="name" multiple size="4" role="listbox"></select>
	<li role="listitem"></li>
	<nav role="navigation"></nav>
	{/* Needs to check the ancestors: <option role="option"></option> */}
	<tr role="row"></tr>
	<tbody role="rowgroup"></tbody>
	<tfoot role="rowgroup"></tfoot>
	<thead role="rowgroup"></thead>
	{/* Needs to check the ancestors: <th scope="row" role="rowheader"></th> */}
	<input type="search" role="searchbox" />
	<table role="table"></table>
	<textarea role="textbox"></textarea>
	<input type="text" role="textbox" />
</>;

```

# Diagnostics
```
invalid.jsx:2:16 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'article' on the 'article' element is redundant, because it is implied by the semantic 'article' element.
  
    1 │ <>
  > 2 │ 	<article role="article"></article>
      │ 	              ^^^^^^^^^
    3 │ 	<button role="button"></button>
    4 │ 	<h1 role="heading" aria-level="1">
  
  i Unsafe fix: Remove the role attribute.
  
    2 │ → <article·role="article"></article>
      │            --------------           

```

```
invalid.jsx:3:15 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'button' on the 'button' element is redundant, because it is implied by the semantic 'button' element.
  
    1 │ <>
    2 │ 	<article role="article"></article>
  > 3 │ 	<button role="button"></button>
      │ 	             ^^^^^^^^
    4 │ 	<h1 role="heading" aria-level="1">
    5 │ 		title
  
  i Unsafe fix: Remove the role attribute.
  
    3 │ → <button·role="button"></button>
      │           -------------          

```

```
invalid.jsx:4:11 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'heading' on the 'h1' element is redundant, because it is implied by the semantic 'h1' element.
  
    2 │ 	<article role="article"></article>
    3 │ 	<button role="button"></button>
  > 4 │ 	<h1 role="heading" aria-level="1">
      │ 	         ^^^^^^^^^
    5 │ 		title
    6 │ 	</h1>
  
  i Unsafe fix: Remove the role attribute.
  
    4 │ → <h1·role="heading"·aria-level="1">
      │       ---------------               

```

```
invalid.jsx:7:11 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'heading' on the 'h1' element is redundant, because it is implied by the semantic 'h1' element.
  
    5 │ 		title
    6 │ 	</h1>
  > 7 │ 	<h1 role="heading">title</h1>
      │ 	         ^^^^^^^^^
    8 │ 	<h2 role={`heading`}></h2>
    9 │ 	<dialog role="dialog"></dialog>
  
  i Unsafe fix: Remove the role attribute.
  
    7 │ → <h1·role="heading">title</h1>
      │       --------------           

```

```
invalid.jsx:8:11 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'heading' on the 'h2' element is redundant, because it is implied by the semantic 'h2' element.
  
     6 │ 	</h1>
     7 │ 	<h1 role="heading">title</h1>
   > 8 │ 	<h2 role={`heading`}></h2>
       │ 	         ^^^^^^^^^^^
     9 │ 	<dialog role="dialog"></dialog>
    10 │ 	<input type="checkbox" role="checkbox" />
  
  i Unsafe fix: Remove the role attribute.
  
    8 │ → <h2·role={`heading`}></h2>
      │       ----------------      

```

```
invalid.jsx:9:15 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'dialog' on the 'dialog' element is redundant, because it is implied by the semantic 'dialog' element.
  
     7 │ 	<h1 role="heading">title</h1>
     8 │ 	<h2 role={`heading`}></h2>
   > 9 │ 	<dialog role="dialog"></dialog>
       │ 	             ^^^^^^^^
    10 │ 	<input type="checkbox" role="checkbox" />
    11 │ 	<figure role="figure"></figure>
  
  i Unsafe fix: Remove the role attribute.
  
    9 │ → <dialog·role="dialog"></dialog>
      │           -------------          

```

```
invalid.jsx:10:30 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'checkbox' on the 'input' element is redundant, because it is implied by the semantic 'input' element.
  
     8 │ 	<h2 role={`heading`}></h2>
     9 │ 	<dialog role="dialog"></dialog>
  > 10 │ 	<input type="checkbox" role="checkbox" />
       │ 	                            ^^^^^^^^^^
    11 │ 	<figure role="figure"></figure>
    12 │ 	<form role="form"></form>
  
  i Unsafe fix: Remove the role attribute.
  
    10 │ → <input·type="checkbox"·role="checkbox"·/>
       │                          ----------------  

```

```
invalid.jsx:11:15 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'figure' on the 'figure' element is redundant, because it is implied by the semantic 'figure' element.
  
     9 │ 	<dialog role="dialog"></dialog>
    10 │ 	<input type="checkbox" role="checkbox" />
  > 11 │ 	<figure role="figure"></figure>
       │ 	             ^^^^^^^^
    12 │ 	<form role="form"></form>
    13 │ 	{/* Needs to check the ancestors: <td role="gridcell"></td> */}
  
  i Unsafe fix: Remove the role attribute.
  
    11 │ → <figure·role="figure"></figure>
       │           -------------          

```

```
invalid.jsx:12:13 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'form' on the 'form' element is redundant, because it is implied by the semantic 'form' element.
  
    10 │ 	<input type="checkbox" role="checkbox" />
    11 │ 	<figure role="figure"></figure>
  > 12 │ 	<form role="form"></form>
       │ 	           ^^^^^^
    13 │ 	{/* Needs to check the ancestors: <td role="gridcell"></td> */}
    14 │ 	<fieldset role="group"></fieldset>
  
  i Unsafe fix: Remove the role attribute.
  
    12 │ → <form·role="form"></form>
       │         -----------        

```

```
invalid.jsx:14:17 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'group' on the 'fieldset' element is redundant, because it is implied by the semantic 'fieldset' element.
  
    12 │ 	<form role="form"></form>
    13 │ 	{/* Needs to check the ancestors: <td role="gridcell"></td> */}
  > 14 │ 	<fieldset role="group"></fieldset>
       │ 	               ^^^^^^^
    15 │ 	<img src="foo" alt="bar" role="img" />
    16 │ 	<img alt="" role="presentation"></img>
  
  i Unsafe fix: Remove the role attribute.
  
    14 │ → <fieldset·role="group"></fieldset>
       │             ------------            

```

```
invalid.jsx:15:32 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'img' on the 'img' element is redundant, because it is implied by the semantic 'img' element.
  
    13 │ 	{/* Needs to check the ancestors: <td role="gridcell"></td> */}
    14 │ 	<fieldset role="group"></fieldset>
  > 15 │ 	<img src="foo" alt="bar" role="img" />
       │ 	                              ^^^^^
    16 │ 	<img alt="" role="presentation"></img>
    17 │ 	<a href="#" role="link"></a>
  
  i Unsafe fix: Remove the role attribute.
  
    15 │ → <img·src="foo"·alt="bar"·role="img"·/>
       │                            -----------  

```

```
invalid.jsx:16:19 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'presentation' on the 'img' element is redundant, because it is implied by the semantic 'img' element.
  
    14 │ 	<fieldset role="group"></fieldset>
    15 │ 	<img src="foo" alt="bar" role="img" />
  > 16 │ 	<img alt="" role="presentation"></img>
       │ 	                 ^^^^^^^^^^^^^^
    17 │ 	<a href="#" role="link"></a>
    18 │ 	<ol role="list"></ol>
  
  i Unsafe fix: Remove the role attribute.
  
    16 │ → <img·alt=""·role="presentation"></img>
       │               -------------------       

```

```
invalid.jsx:17:19 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'link' on the 'a' element is redundant, because it is implied by the semantic 'a' element.
  
    15 │ 	<img src="foo" alt="bar" role="img" />
    16 │ 	<img alt="" role="presentation"></img>
  > 17 │ 	<a href="#" role="link"></a>
       │ 	                 ^^^^^^
    18 │ 	<ol role="list"></ol>
    19 │ 	<ul role="list"></ul>
  
  i Unsafe fix: Remove the role attribute.
  
    17 │ → <a·href="#"·role="link"></a>
       │               -----------     

```

```
invalid.jsx:18:11 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'list' on the 'ol' element is redundant, because it is implied by the semantic 'ol' element.
  
    16 │ 	<img alt="" role="presentation"></img>
    17 │ 	<a href="#" role="link"></a>
  > 18 │ 	<ol role="list"></ol>
       │ 	         ^^^^^^
    19 │ 	<ul role="list"></ul>
    20 │ 	<select name="name" role="combobox"></select>
  
  i Unsafe fix: Remove the role attribute.
  
    18 │ → <ol·role="list"></ol>
       │       -----------      

```

```
invalid.jsx:19:11 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'list' on the 'ul' element is redundant, because it is implied by the semantic 'ul' element.
  
    17 │ 	<a href="#" role="link"></a>
    18 │ 	<ol role="list"></ol>
  > 19 │ 	<ul role="list"></ul>
       │ 	         ^^^^^^
    20 │ 	<select name="name" role="combobox"></select>
    21 │ 	<select name="name" multiple size="4" role="listbox"></select>
  
  i Unsafe fix: Remove the role attribute.
  
    19 │ → <ul·role="list"></ul>
       │       -----------      

```

```
invalid.jsx:20:27 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'combobox' on the 'select' element is redundant, because it is implied by the semantic 'select' element.
  
    18 │ 	<ol role="list"></ol>
    19 │ 	<ul role="list"></ul>
  > 20 │ 	<select name="name" role="combobox"></select>
       │ 	                         ^^^^^^^^^^
    21 │ 	<select name="name" multiple size="4" role="listbox"></select>
    22 │ 	<li role="listitem"></li>
  
  i Unsafe fix: Remove the role attribute.
  
    20 │ → <select·name="name"·role="combobox"></select>
       │                       ---------------          

```

```
invalid.jsx:21:45 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'listbox' on the 'select' element is redundant, because it is implied by the semantic 'select' element.
  
    19 │ 	<ul role="list"></ul>
    20 │ 	<select name="name" role="combobox"></select>
  > 21 │ 	<select name="name" multiple size="4" role="listbox"></select>
       │ 	                                           ^^^^^^^^^
    22 │ 	<li role="listitem"></li>
    23 │ 	<nav role="navigation"></nav>
  
  i Unsafe fix: Remove the role attribute.
  
    21 │ → <select·name="name"·multiple·size="4"·role="listbox"></select>
       │                                         --------------          

```

```
invalid.jsx:22:11 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'listitem' on the 'li' element is redundant, because it is implied by the semantic 'li' element.
  
    20 │ 	<select name="name" role="combobox"></select>
    21 │ 	<select name="name" multiple size="4" role="listbox"></select>
  > 22 │ 	<li role="listitem"></li>
       │ 	         ^^^^^^^^^^
    23 │ 	<nav role="navigation"></nav>
    24 │ 	{/* Needs to check the ancestors: <option role="option"></option> */}
  
  i Unsafe fix: Remove the role attribute.
  
    22 │ → <li·role="listitem"></li>
       │       ---------------      

```

```
invalid.jsx:23:12 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'navigation' on the 'nav' element is redundant, because it is implied by the semantic 'nav' element.
  
    21 │ 	<select name="name" multiple size="4" role="listbox"></select>
    22 │ 	<li role="listitem"></li>
  > 23 │ 	<nav role="navigation"></nav>
       │ 	          ^^^^^^^^^^^^
    24 │ 	{/* Needs to check the ancestors: <option role="option"></option> */}
    25 │ 	<tr role="row"></tr>
  
  i Unsafe fix: Remove the role attribute.
  
    23 │ → <nav·role="navigation"></nav>
       │        -----------------       

```

```
invalid.jsx:25:11 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'row' on the 'tr' element is redundant, because it is implied by the semantic 'tr' element.
  
    23 │ 	<nav role="navigation"></nav>
    24 │ 	{/* Needs to check the ancestors: <option role="option"></option> */}
  > 25 │ 	<tr role="row"></tr>
       │ 	         ^^^^^
    26 │ 	<tbody role="rowgroup"></tbody>
    27 │ 	<tfoot role="rowgroup"></tfoot>
  
  i Unsafe fix: Remove the role attribute.
  
    25 │ → <tr·role="row"></tr>
       │       ----------      

```

```
invalid.jsx:26:14 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'rowgroup' on the 'tbody' element is redundant, because it is implied by the semantic 'tbody' element.
  
    24 │ 	{/* Needs to check the ancestors: <option role="option"></option> */}
    25 │ 	<tr role="row"></tr>
  > 26 │ 	<tbody role="rowgroup"></tbody>
       │ 	            ^^^^^^^^^^
    27 │ 	<tfoot role="rowgroup"></tfoot>
    28 │ 	<thead role="rowgroup"></thead>
  
  i Unsafe fix: Remove the role attribute.
  
    26 │ → <tbody·role="rowgroup"></tbody>
       │          ---------------         

```

```
invalid.jsx:27:14 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'rowgroup' on the 'tfoot' element is redundant, because it is implied by the semantic 'tfoot' element.
  
    25 │ 	<tr role="row"></tr>
    26 │ 	<tbody role="rowgroup"></tbody>
  > 27 │ 	<tfoot role="rowgroup"></tfoot>
       │ 	            ^^^^^^^^^^
    28 │ 	<thead role="rowgroup"></thead>
    29 │ 	{/* Needs to check the ancestors: <th scope="row" role="rowheader"></th> */}
  
  i Unsafe fix: Remove the role attribute.
  
    27 │ → <tfoot·role="rowgroup"></tfoot>
       │          ---------------         

```

```
invalid.jsx:28:14 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'rowgroup' on the 'thead' element is redundant, because it is implied by the semantic 'thead' element.
  
    26 │ 	<tbody role="rowgroup"></tbody>
    27 │ 	<tfoot role="rowgroup"></tfoot>
  > 28 │ 	<thead role="rowgroup"></thead>
       │ 	            ^^^^^^^^^^
    29 │ 	{/* Needs to check the ancestors: <th scope="row" role="rowheader"></th> */}
    30 │ 	<input type="search" role="searchbox" />
  
  i Unsafe fix: Remove the role attribute.
  
    28 │ → <thead·role="rowgroup"></thead>
       │          ---------------         

```

```
invalid.jsx:30:28 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'searchbox' on the 'input' element is redundant, because it is implied by the semantic 'input' element.
  
    28 │ 	<thead role="rowgroup"></thead>
    29 │ 	{/* Needs to check the ancestors: <th scope="row" role="rowheader"></th> */}
  > 30 │ 	<input type="search" role="searchbox" />
       │ 	                          ^^^^^^^^^^^
    31 │ 	<table role="table"></table>
    32 │ 	<textarea role="textbox"></textarea>
  
  i Unsafe fix: Remove the role attribute.
  
    30 │ → <input·type="search"·role="searchbox"·/>
       │                        -----------------  

```

```
invalid.jsx:31:14 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'table' on the 'table' element is redundant, because it is implied by the semantic 'table' element.
  
    29 │ 	{/* Needs to check the ancestors: <th scope="row" role="rowheader"></th> */}
    30 │ 	<input type="search" role="searchbox" />
  > 31 │ 	<table role="table"></table>
       │ 	            ^^^^^^^
    32 │ 	<textarea role="textbox"></textarea>
    33 │ 	<input type="text" role="textbox" />
  
  i Unsafe fix: Remove the role attribute.
  
    31 │ → <table·role="table"></table>
       │          ------------         

```

```
invalid.jsx:32:17 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'textbox' on the 'textarea' element is redundant, because it is implied by the semantic 'textarea' element.
  
    30 │ 	<input type="search" role="searchbox" />
    31 │ 	<table role="table"></table>
  > 32 │ 	<textarea role="textbox"></textarea>
       │ 	               ^^^^^^^^^
    33 │ 	<input type="text" role="textbox" />
    34 │ </>;
  
  i Unsafe fix: Remove the role attribute.
  
    32 │ → <textarea·role="textbox"></textarea>
       │             --------------            

```

```
invalid.jsx:33:26 lint/a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Using the role attribute 'textbox' on the 'input' element is redundant, because it is implied by the semantic 'input' element.
  
    31 │ 	<table role="table"></table>
    32 │ 	<textarea role="textbox"></textarea>
  > 33 │ 	<input type="text" role="textbox" />
       │ 	                        ^^^^^^^^^
    34 │ </>;
    35 │ 
  
  i Unsafe fix: Remove the role attribute.
  
    33 │ → <input·type="text"·role="textbox"·/>
       │                      ---------------  

```