no-invalid-role

If set, disallow the use of invalid html role on elements.

This rule will check for the following:

Use of the presentation role for content which should convey semantic information may prevent the user from understanding that content. This rule checks semantic HTML elements for the presence of role="none" or role="presentation" and compares it to the list of disallowed elements.
Use of invalid role for elements which does not fall under any of the values in this list.

Given:

  {
    "no-invalid-role": "error"
  }

The following patterns are considered violations:

<table role="presentation">
</table>

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

<ul role="none">
</ul>

<div role="accordion"></div>

<div role="custom role"></div>

The following patterns are not considered violations:

<img role="presentation" alt="">

<span role="none"></span>

Options

This rule accept the following option object

  "no-invalid-role": [
    true,
    {
      reportNoneExisting: boolean
    }
  ],

Whether none existing role values should be reported (defaults to true)

Given:

  {
    "no-invalid-role": [
      "error",
      {
        "reportNoneExisting": false
      }
    ]
  }

The following pattern are not considered violations

<div role="accordion"></div>

<div role="custom role"></div>