Search code examples
accessibility

jsx-a117 lint error "the autocomplete attribute is incorrectly formatted"

After updating my project to react-scripts v4 I started receiving lint errors of this type:

the autocomplete attribute is incorrectly formatted jsx-a11y/autocomplete-valid

<input
    type="text"
    autoComplete="first-name"
/>

What does this mean and how do I fix it?

Solution

  • The value used in the autocomplete attribute (first-name) is not a valid value.

    This means no semantic meaning is given to this input and tools that auto-fill forms may not correctly fill the input with pre-saved values.

    given-name is the correct value for this input:

    <input
    type="text"
    autoComplete="given-name"
/>

    All valid values can be found on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values