jsx-a11y/aria-proptypes

Require aria-* attributes to have a value of the right kind

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

ValueAttributes
true or falsearia-busy, aria-disabled, aria-expanded, aria-hidden, aria-modal, aria-required, aria-selected and others
true, false or "mixed"aria-checked, aria-pressed
A numberaria-level, aria-valuenow, aria-valuemin, aria-valuemax, aria-colspan, aria-posinset, aria-setsize and others
A stringaria-label, aria-description, aria-placeholder, aria-valuetext and others
One ID, or a list of IDsaria-activedescendant, aria-controls, aria-describedby, aria-labelledby, aria-owns and others
Words from a fixed listaria-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:

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

Examples#

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