Valid ARIA Properties In JSX

Reports an aria-* attribute on a JSX element whose name is not a WAI-ARIA state or property, or whose value is not one that property accepts.

Both halves fail the same way, and they fail silently. React passes an unrecognised aria-* name straight through to the DOM, where the accessibility tree ignores it; a value outside the property’s vocabulary is discarded just as quietly. Either way the element looks annotated in the source and is unannotated to a screen reader, and neither the compiler nor the browser says a word.

Only a statically readable value is judged: a string literal, a numeric, boolean or null literal in braces, or JSX’s valueless shorthand, which renders as true. Values are matched case-insensitively, as browsers read them. Free-string properties such as aria-label accept any text, so only their name is ever in question.

Correct the attribute name against the WAI-ARIA states and properties, or replace the value with one the property accepts — a boolean for aria-hidden and aria-disabled, an integer for aria-level, a token from the published list for aria-live, aria-current and aria-sort.