Skip to main content

jsx-a11y/noRedundantRoles

enforce explicit role property is not the same as implicit/default role property on element

ESLint Equivalent: no-redundant-roles

Examples

Invalid

<article role='article'></article>

 file.tsx:1:9 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute article on the article element is redundant.

    <article role='article'></article>
             ^^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <article·role="article">
      1+ <article>
    2 2  </article>

  


<button role='button'></button>

 file.tsx:1:8 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute button on the button element is redundant.

    <button role='button'></button>
            ^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <button·role="button">
      1+ <button>
    2 2  </button>

  


<h1 role='heading' aria-level='1'></h1>

 file.tsx:1:4 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute heading on the h1 element is redundant.

    <h1 role='heading' aria-level='1'></h1>
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute and ARIA attributes.

    1  - <h1·role="heading"·aria-level="1">
      1+ <h1>
    2 2  </h1>

  


<h1 role='heading'></h1>

 file.tsx:1:4 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute heading on the h1 element is redundant.

    <h1 role='heading'></h1>
        ^^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <h1·role="heading">
      1+ <h1>
    2 2  </h1>

  


<dialog role='dialog'></dialog>

 file.tsx:1:8 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute dialog on the dialog element is redundant.

    <dialog role='dialog'></dialog>
            ^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <dialog·role="dialog">
      1+ <dialog>
    2 2  </dialog>

  


<input  type='checkbox' role='checkbox' />

 file.tsx:1:24 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━

  Using the role attribute checkbox on the input element is redundant.

    <input  type='checkbox' role='checkbox' />
                            ^^^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

  - <input·type="checkbox"·role="checkbox"·/>
  + <input·type="checkbox"·/>

  


<figure  role='figure'></figure>

 file.tsx:1:9 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute figure on the figure element is redundant.

    <figure  role='figure'></figure>
             ^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <figure·role="figure">
      1+ <figure>
    2 2  </figure>

  


<form  role='form'></form>

 file.tsx:1:7 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute form on the form element is redundant.

    <form  role='form'></form>
           ^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <form·role="form">
      1+ <form>
    2 2  </form>

  


<table  role='grid'></table>

 file.tsx:1:8 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute grid on the table element is redundant.

    <table  role='grid'></table>
            ^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <table·role="grid">
      1+ <table>
    2 2  </table>

  


<td  role='gridcell'></td>

 file.tsx:1:5 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute gridcell on the td element is redundant.

    <td  role='gridcell'></td>
         ^^^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <td·role="gridcell">
      1+ <td>
    2 2  </td>

  


<fieldset  role='group'></fieldset>

 file.tsx:1:11 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━

  Using the role attribute group on the fieldset element is redundant.

    <fieldset  role='group'></fieldset>
               ^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <fieldset·role="group">
      1+ <fieldset>
    2 2  </fieldset>

  


<img src='foo' alt='bar'  role='img' />

 file.tsx:1:26 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━

  Using the role attribute img on the img element is redundant.

    <img src='foo' alt='bar'  role='img' />
                              ^^^^^^^^^^

  Suggested fix: Remove the role attribute.

  - <img·src="foo"·alt="bar"·role="img"·/>
  + <img·src="foo"·alt="bar"·/>

  


<a role='link'>something</a>

 file.tsx:1:3 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute link on the a element is redundant.

    <a role='link'>something</a>
       ^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <a·role="link">
      1+ <a>
    2 2  something
    3 3  </a>

  


<link role='link' />

 file.tsx:1:6 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute link on the link element is redundant.

    <link role='link' />
          ^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

  - <link·role="link"·/>
  + <link·/>

  


<ol role='list' ></ol>

 file.tsx:1:4 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute list on the ol element is redundant.

    <ol role='list' ></ol>
        ^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <ol·role="list">
      1+ <ol>
    2 2  </ol>

  


<ul role='list' ></ul>

 file.tsx:1:4 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute list on the ul element is redundant.

    <ul role='list' ></ul>
        ^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <ul·role="list">
      1+ <ul>
    2 2  </ul>

  


<select role='listbox' ></select>

 file.tsx:1:8 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute listbox on the select element is redundant.

    <select role='listbox' ></select>
            ^^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <select·role="listbox">
      1+ <select>
    2 2  </select>

  


<li role='listitem' ></li>

 file.tsx:1:4 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute listitem on the li element is redundant.

    <li role='listitem' ></li>
        ^^^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <li·role="listitem">
      1+ <li>
    2 2  </li>

  


<nav role='navigation' ></nav>

 file.tsx:1:5 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute navigation on the nav element is redundant.

    <nav role='navigation' ></nav>
         ^^^^^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <nav·role="navigation">
      1+ <nav>
    2 2  </nav>

  


<option role='option' ></option>

 file.tsx:1:8 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute option on the option element is redundant.

    <option role='option' ></option>
            ^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <option·role="option">
      1+ <option>
    2 2  </option>

  


<tr role='row' ></tr>

 file.tsx:1:4 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute row on the tr element is redundant.

    <tr role='row' ></tr>
        ^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <tr·role="row">
      1+ <tr>
    2 2  </tr>

  


<tbody role='rowgroup' ></tbody>

 file.tsx:1:7 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute rowgroup on the tbody element is redundant.

    <tbody role='rowgroup' ></tbody>
           ^^^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <tbody·role="rowgroup">
      1+ <tbody>
    2 2  </tbody>

  


<tfoot role='rowgroup' ></tfoot>

 file.tsx:1:7 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute rowgroup on the tfoot element is redundant.

    <tfoot role='rowgroup' ></tfoot>
           ^^^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <tfoot·role="rowgroup">
      1+ <tfoot>
    2 2  </tfoot>

  


<thead role='rowgroup' ></thead>

 file.tsx:1:7 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute rowgroup on the thead element is redundant.

    <thead role='rowgroup' ></thead>
           ^^^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <thead·role="rowgroup">
      1+ <thead>
    2 2  </thead>

  


<th scope='row' role='rowheader' ></th>

 file.tsx:1:16 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━

  Using the role attribute rowheader on the th element is redundant.

    <th scope='row' role='rowheader' ></th>
                    ^^^^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <th·scope="row"·role="rowheader">
      1+ <th·scope="row">
    2 2  </th>

  


<input type='search' role='searchbox' />

 file.tsx:1:21 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━

  Using the role attribute searchbox on the input element is redundant.

    <input type='search' role='searchbox' />
                         ^^^^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

  - <input·type="search"·role="searchbox"·/>
  + <input·type="search"·/>

  


<table role='table' ></table>

 file.tsx:1:7 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute table on the table element is redundant.

    <table role='table' ></table>
           ^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <table·role="table">
      1+ <table>
    2 2  </table>

  


<dt role='term' ></dt>

 file.tsx:1:4 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  Using the role attribute term on the dt element is redundant.

    <dt role='term' ></dt>
        ^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <dt·role="term">
      1+ <dt>
    2 2  </dt>

  


<textarea role='textbox' ></textarea>

 file.tsx:1:10 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━

  Using the role attribute textbox on the textarea element is
    redundant.

    <textarea role='textbox' ></textarea>
              ^^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

    1  - <textarea·role="textbox">
      1+ <textarea>
    2 2  </textarea>

  


<input type='text' role='textbox' />

 file.tsx:1:19 lint/jsx-a11y/noRedundantRoles  FIXABLE  ━━━━━━━━━━━━━━━━━━━

  Using the role attribute textbox on the input element is redundant.

    <input type='text' role='textbox' />
                       ^^^^^^^^^^^^^^

  Suggested fix: Remove the role attribute.

  - <input·type="text"·role="textbox"·/>
  + <input·type="text"·/>

  

Valid

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