noRedundantRoles
Diagnostic Category: lint/a11y/noRedundantRoles
Since: v1.0.0
Sources:
- Same as:
jsx-a11y/no-redundant-roles
Description
Section titled DescriptionEnforce explicit role property is not the same as implicit/default role property on an element.
Examples
Section titled ExamplesInvalid
Section titled Invalid<article role='article'></article>code-block.jsx:1:15 lint/a11y/noRedundantRoles FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Using the role attribute ‘article’ on the ‘article’ element is redundant, because it is implied by its semantic.
> 1 │ <article role=‘article’></article>
│ ^^^^^^^^^
2 │
ℹ Unsafe fix: Remove the role attribute.
1 │ <article·role=‘article’></article>
│ --------------
<button role='button'></button>code-block.jsx:1:14 lint/a11y/noRedundantRoles FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Using the role attribute ‘button’ on the ‘button’ element is redundant, because it is implied by its semantic.
> 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.jsx:1:10 lint/a11y/noRedundantRoles FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Using the role attribute ‘heading’ on the ‘h1’ element is redundant, because it is implied by its semantic.
> 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
Section titled Valid<article role='presentation'></article><Button role='button'></Button><span></span>How to configure
Section titled How to configure{ "linter": { "rules": { "a11y": { "noRedundantRoles": "error" } } }}