implement
valid-role

valid-role

A misspelled role, or an abstract one browsers ignore.

The same idea as valid-aria, for the role prop, checked against the concrete roles in WAI-ARIA 1.2:

Div({ role: "buton" });
//          ^ not an ARIA role. Did you mean "button"?

ARIA lets role hold a space-separated fallback list and uses the first role the browser understands, so every token is checked and the suggestion rewrites only the one that was wrong.

Abstract roles get a message of their own. They exist to organise the ARIA taxonomy, authors are not allowed to use them, and browsers ignore them — but they read like plausible roles, which is exactly why they end up in code:

Div({ role: "widget" });
//          ^ abstract role; it does nothing on an element

As with valid-aria, only string literals are checked, and role bound to a signal is left alone.

Options

"implementjs/valid-role": ["error", { extraRoles: ["doc-chapter"] }]

extraRoles adds roles from a vocabulary outside core ARIA — DPUB-ARIA and graphics-aria are the usual reasons.