Better eslint a11y rule defaults

Summary

The default a11y eslint rules are all defined as “warn”. This is okay for most rules but for the newly added “jsx-a11y/control-has-associated-label” rule, adding “warn” is making it almost unusable.

Even the following is flagged by eslint 🤔 :

<label>lovely label<input type="text/></label>

The recommended config for this rule is much more sane.

Would you accept a PR to fix this?

[herecydev]

I think this case may be relevant to you: custom component

It looks like by supplying that to the config it will then validate the rendered input (that Formik will produce) against the label

[dmorda]

Since this change, I noticed I’m getting warnings for the rule when using in combination with the Formik <Field> tag.

No warning

<label htmlFor="phone">
   Phone
   <input type="text" id="phone" name="phone" />
</label>

Get warning

<label htmlFor="phone">
   Phone
   <Field type="input" id="phone" name="phone" />
</label>

Both approaches produce the same HTML output. Is there a way to address that?