jsx-a11y/aria-props

Browsers and screen readers ignore an aria-* attribute they don't know. A typo such as aria-labeledby doesn't cause an error anywhere. The element loses its label, and you only find out by testing with a screen reader.

The rule checks every attribute that starts with aria-, on elements and on components.

--fix corrects five common mistakes: aria-labeledby, aria-lable, aria-sorted, aria-value and aria-role.

Configure#

Off by default. To turn it on:

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

Examples#

const name = <input aria-labeledby="name-label" />;
const menu = <button aria-open={isOpen}>Menu</button>;

const name = <input aria-labelledby="name-label" />;
const menu = <button aria-expanded={isOpen}>Menu</button>;