16

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?

Nick Carbone
  • 445
  • 1
  • 4
  • 9

1 Answers1

19

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:

basti500
  • 600
  • 4
  • 20
rudolph schmitz
  • 293
  • 3
  • 11
  • 20
    I wish these docs would explain _why_ this is an exception. Does anyone know? – jayqui Oct 01 '21 at 23:47
  • 1
    @jayqui if there hadn't been an exception, React would render `ariaLabel` as `arialabel` instead of `aria-label`. The same rule applies to `data-*`, for example `data-test-id`. – AlexMelw Apr 19 '23 at 11:40