jsx-a11y/aria-proptypes

Each aria-* attribute accepts one kind of value. A screen reader ignores a value it doesn't know, so aria-expanded="yes" is the same as no aria-expanded at all, and nothing tells you.

The rule only checks values written in place: strings, numbers, true, false and templates. It skips variables and calls.

Value	Attributes
true or false	aria-busy, aria-disabled, aria-expanded, aria-hidden, aria-modal, aria-required, aria-selected and others
true, false or "mixed"	aria-checked, aria-pressed
A number	aria-level, aria-valuenow, aria-valuemin, aria-valuemax, aria-colspan, aria-posinset, aria-setsize and others
A string	aria-label, aria-description, aria-placeholder, aria-valuetext and others
One ID, or a list of IDs	aria-activedescendant, aria-controls, aria-describedby, aria-labelledby, aria-owns and others
Words from a fixed list	aria-autocomplete, aria-current, aria-dropeffect, aria-haspopup, aria-invalid, aria-live, aria-orientation, aria-relevant, aria-sort

The report lists the values the attribute accepts.

Configure

Off by default. To turn it on:

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

Examples

Reported:

const toggle = <button aria-expanded="yes">Menu</button>;
const title = <div role="heading" aria-level="two">Billing</div>;
const column = <th aria-sort="up">Name</th>;
const status = <div aria-live="loud">{message}</div>;

Not reported:

const toggle = <button aria-expanded={isOpen}>Menu</button>;
const title = <div role="heading" aria-level={2}>Billing</div>;
const column = <th aria-sort="ascending">Name</th>;
const status = <div aria-live="polite">{message}</div>;