jsx-a11y/aria-role

A screen reader ignores a role it doesn't know, so an element with role="datepicker" is announced as a plain div. Abstract roles such as range, widget and input exist only to define other roles in the ARIA specification. Browsers ignore them too.

A role can hold several roles separated by spaces, and each one must be valid. A role without a value, or with "", null or undefined, is reported. Any other expression isn't checked.

Configure

Off by default. To turn it on:

[lint.rules]
"jsx-a11y/aria-role" = "error" # or "warn"

Every option, set to its default:

[lint.rules]
"jsx-a11y/aria-role" = ["error", {
  allowedInvalidRoles = [], # list of strings
  ignoreNonDOM = false,
}]

Examples

Reported:

const picker = <div role="datepicker">{days}</div>;
const slider = <div role="range" />;
const panel = <div role="">{children}</div>;
const toggle = <div role="switch toggle" aria-checked={isOn} tabIndex={0} />;

Not reported:

const picker = <div role="dialog">{days}</div>;
const slider = <div role="slider" aria-valuenow={volume} tabIndex={0} />;
const panel = <div role={panelRole}>{children}</div>;
const toggle = <div role="switch checkbox" aria-checked={isOn} tabIndex={0} />;

Options

Option	Default	What it does
allowedInvalidRoles	[]	Other values to accept.
ignoreNonDOM	false	Don't check components, where role might be an ordinary prop.

const price = <span role="text">{amount} per month</span>;

Components are checked by default:

const member = <UserCard role="admin" />;

const member = <UserCard role="admin" />;