CODEWITHSUNDEEP
reactjsjsxaccessibilitywai-aria
Nick Carbone
Nick Carbone

Reputation: 505

React JSX Invalid ARIA attribute `ariaLabel`

react jsx:

<button ariaLabel='label'>click</button>

rendered html:

<button arialabel="label">click</button>

console warning:

index.js:1 Warning: Invalid ARIA attribute `ariaLabel`. Did you mean `aria-label`?

ummm no, I meant ariaLabel since we always camelCase in jsx. Why is it all lowercase in the rendered html?

Upvotes: 20

Views: 28160

Answers (1)

rudolph schmitz
rudolph schmitz

Reputation: 373

This seems to be an exception to the rule. Look at the documentation here -- Official React Docs

Note that all aria-* HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML:

Upvotes: 27

Related Questions