jsx-a11y/no-redundant-roles
Disallow a role that the element already has
Also called jsx_a11y/no-redundant-roles
Most HTML elements come with a role: a <button> is a button, a <ul> is a list. Writing that role again changes nothing, and it's one more thing to update when the element changes.
For <input>, <select> and <img>, the role depends on the other attributes: <input type="checkbox"> is a checkbox, <input type="range"> is a slider. Only a role written as a string is checked.
--fix removes the role attribute.
Configure#
Off by default. To turn it on:
[lint.rules]
"jsx-a11y/no-redundant-roles" = "error" # or "warn"Examples#
const save = <button role="button"The button element has an implicit role of button. Defining this explicitly is redundant and should be avoided.>Save</button>;
const items = <ul role="list"The ul element has an implicit role of list. Defining this explicitly is redundant and should be avoided. />;
const volume = <input type="range" role="slider"The input element has an implicit role of slider. Defining this explicitly is redundant and should be avoided. />;const save = <button>Save</button>;
const items = <ul />;
const toggle = <button role="switch" aria-checked={enabled} />;Options#
The option is an object that maps an element to the roles you can repeat on it. By default only <nav role="navigation"> is allowed.
const menu = <nav role="navigation" />;Safari with VoiceOver stops announcing a list once CSS removes its bullets, and role="list" brings that back. To allow it:
{ "ul": ["list"], "ol": ["list"] }No problemsconst items = <ul role="list" className="plain" />;
const menu = <nav role="navigation" />;To report <nav role="navigation"> as well, give nav an empty list:
{ "nav": [] }1 problemconst menu = <nav role="navigation"The nav element has an implicit role of navigation. Defining this explicitly is redundant and should be avoided. />;