Bump eslint-plugin-jsx-a11y version

[gaearon]

This should fix #2663.
Probably a breaking change.

cc @AlmeroSteyn @jessebeach for review (do we need to enable any new rules? disable old ones?)

[AlmeroSteyn]

Great PR! I was thinking of submitting the same change tomorrow!

Current change makes the rule too restrictive for CRA environment so that probably needs to be changed. I provided some options.

Its a breaking change if anchor-is-valid and/or label-has-for is activated.

Aside from the new anchor-is-valid rule, there has been a fix to label-has-for. I did not add it in the previous PR as it would fail on things like:

<label>Name
<input>
</label>

and

<label>
{children}
</label>

Both of which are accessible patterns.

As this rule checks that each form element has a good chance of having an accessible label it would be an incredible rule to add. I do estimate quite a bit of failures in the wild though.

But the fix would be to add htmlFor to id links. That is easy enough. But in components it could mean that the id need to autogenerated if the component is used more than once on any specific page.

Do you think the benefit is large enough to outweight the impact on the users?

[AlmeroSteyn]

The anchor-is-valid rule has quite a bit more reach than the old href-no-hash rule. It provides three checks:

1. Checks if there is an href on an <a> element.
2. Checks if href attributes contain obviously valid content.
3. Checks if and <a> is obviously used as a button.

The third option seems too restrictive for CRA which renders this setup too restrictive.

Options 1 and 2 I think could be usable. The anchors that would fail for the three rules are listed here https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md#fail

The subchecks can be activated as needed.

To activate options 1 and 2 the config is :

"jsx-a11y/anchor-is-valid": [ "warn", {
                    "aspects": [ "noHref", "invalidHref" ]
          }]

Just using the invalidHref aspect gets closest to what was already in CRA although it will error on anchors with javascript in the href.

What do you think? Can we activate both aspects?

[jessebeach]

Looks like the wrapping object braces are missing here.

[jessebeach]

Failing because:

Definition for rule 'jsx-a11y/anchor-is-valid' was not found

Looking into it.

[gaearon]

Maybe some bad CI cache on our side.

[jessebeach]

Maybe some bad CI cache on our side.

That's what I'm thinking. The rule is there and represented in the index.js.

[jessebeach]

Maybe some bad CI cache on our side.

No, it's really failing. I cloned from your repo and checked out your branch, ran npm i then

+cd packages/react-error-overlay/
+./node_modules/.bin/eslint --max-warnings 0 src/

and the errors pop up. Investigating.

[jessebeach]

@gaearon packages/react-error-overlay/ is still on the 5.x.x branch of eslint-plugin-jsx-a11y. Maybe this dependency needs to be removed from this project so that it uses the parent version or version bumped itself?

[vcarel]

I believe this PR should fix the Definition for rule 'jsx-a11y/href-no-hash' was not found issue when forcing eslint-plugin-jsx-a11y to 6.0.*.

Please merge it :)

[South-Paw]

Hi guys,

is there any ETA on when this will be merged?

Thanks 👍

[Timer]

Reminder to update our docs (e.g. #3460).

[yutingzhao1991]

when will release eslint-config-react-app@2.1.1?