jsx-a11y/aria-role

Require role to be a real ARIA role that is not abstract

Also called 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:

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

Every option, set to its default:

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

Examples#

example.jsx4 problems
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} />;
example.jsxNo problems
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#

OptionDefaultWhat it does
allowedInvalidRoles[]Other values to accept.
ignoreNonDOMfalseDon't check components, where role might be an ordinary prop.
example.jsxwith { "allowedInvalidRoles": ["text"] }No problems
const price = <span role="text">{amount} per month</span>;

Components are checked by default:

example.jsx1 problem
const member = <UserCard role="admin" />;
example.jsxwith { "ignoreNonDOM": true }No problems
const member = <UserCard role="admin" />;