Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at WAI-ARIA site.
This rule takes one optional object argument of type object:
{ "rules": { "jsx-a11y/aria-role": [ 2, { "ignoreNonDOM": true }], } }
For the ignoreNonDOM
option, this determines if developer created components are checked.
<div role="button"></div> <!-- Good: "button" is a valid ARIA role --> <div role={role}></div> <!-- Good: role is a variable & cannot be determined until runtime. --> <div></div> <!-- Good: No ARIA role --> <Foo role={role}></Foo> <!-- Good: ignoreNonDOM is set to true -->
<div role="datepicker"></div> <!-- Bad: "datepicker" is not an ARIA role --> <div role="range"></div> <!-- Bad: "range" is an _abstract_ ARIA role --> <div role=""></div> <!-- Bad: An empty ARIA role is not allowed --> <Foo role={role}></Foo> <!-- Bad: ignoreNonDOM is set to false or not set -->