Better eslint a11y rule defaults

[herecydev]

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?

[madalynrose]

Oh wow I don't think it should be warning that much! I'm sorry this is causing you pain, @mojodna!

I think we still want the strict configuration for the rule. I'm confused as to why that case is causing it to trigger though. Going by their documentation, your usage (aside from the missing ") should be fine. Do have a repo you could point me to where perhaps I could help troubleshoot? I'd prefer to fix whatever is causing the error than not warn when something breaks accessibility.

[herecydev]

I think we still want the strict configuration for the rule. I'm confused as to why that case is causing it to trigger though. Going by their documentation, your usage (aside from the missing ") should be fine.

Because their default (even in strict mode) is not "warn", instead it's an object that specifies some ignored elements.

I'd prefer to fix whatever is causing the error than not warn when something breaks accessibility.

100% agree but the issue as I see it is that Gatsby is taking the defaults provided by eslint-a11y and then tweaking them differently. I can't help think that Gatsby should just take what's there and map any rule "errors" to "warn", until Gatsby v3.

That way things don't get missed, the TODO there that is out-of-date and that would have been implemented already, etc.

Let me know if that helps?

[madalynrose]

Hi there @herecydev! Looks like they responded in the issue you linked to with a recommendation for making your example not trigger the warning, using for/ID-linking. Does that resolve your issue?

[herecydev]

Nope, there's nothing broken with using <label>lovely label<input type="text"/></label>. It passes the tests using the defaults (both recommend and strict) in eslint-a11y.

If you look here in the rule code they're trying to cater for specifically the case I've mentioned: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/src/rules/control-has-associated-label.js#L58-L62

I can't stress any more how the issue is that Gatsby has changed the default rule configuration and is causing that issue to manifest

[madalynrose]

@herecydev if you'd like to PR, I'll merge it in. I don't want it to be a blocker to your development but want to make sure it's configured properly so it will catch labelling issues. Thank you!

[herecydev]

@madalynrose I've made those changes.

[dmorda]

Since this change, I noticed I'm getting warnings for the rule when using in combination with the Formik 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?

[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