Eslint-plugin-jsx-a11y: React Router's Link triggers error

[niawdeleon]

React-Router has a Link component that uses the attribute to as its location descriptor in place of href. This component, when used, erroneously triggers the anchor-is-valid rule. The Link usage is legitimate since it's being used as an actual hyperlink for navigation.

[ljharb]

This is why the rule takes options - you can configure the rule to ignore your Link components, or to consider "to" as if it's an href.

[niawdeleon]

Thank you.

[jasonhick]

Can you please provide an example. I've tried adding "to" into speciaLink and it still doesn't work.

"jsx-a11y/anchor-is-valid": [ "error", {
        "components": [ "Link" ],
        "specialLink": [ "to", "hrefLeft", "hrefRight" ],
        "aspects": [ "noHref", "invalidHref", "preferButton" ]
      }]
    }

[DylanYang0523]

Hi, @jasonhick I have the same problem, but your code is working for me, do you wanna try to re-run eslint again or try to remove "}".

[jasonhick]

Hey, I just worked this out. I'm extending AirBnb rules and I was declaring my rules before this. I moved my rules after this and it all works fine now. Thanks for replying ;)

[tygas]

@jasonhick Why I get lint error here?

```

type="radio"
name="radio"
id={input.name}
disabled={disabled}
{...input}
checked={checked}
/>
Company {labelText}

{touched && error && {error}&nbsp}

[ljharb]

@tygas because the input also has to go inside the label.

[arnabk]

When I import it with different name other than Link, eslint does not complain.

import React from 'react';
import RLink from 'react-router-dom/Link';
import Button from 'material-ui/RaisedButton';

const Page = () => (
  <div>
        <h2>Test Header</h2>
        <RLink className="heading-btn" to="/to/something">
          <Button primary label="Button" />
        </RLink>
  </div>
);

export default Page;

[ljharb]

Yes, that's because the linter config has been set to look for anything with the name "Link".

[arnabk]

So is it a good idea to override it in eslint config or importing them with different name?

[zdoc01]

@arnabk I would override the eslint config to include to in the specialLink option. This way you get the full support of the plugin. If you import with a different name you're essentially bypassing the plugin (unless you add the new name to your components option for that particular rule) for those components, and therefore risk using links that do not meet a11y standards.

[karladler]

@jasonhick just remove the "Link" component from the checked components and check e.g. only for a tags.

"jsx-a11y/anchor-is-valid": [ "error", {
    "components": [ "a" ]
}]

// or even better just remove the aspect noHref from the Link component.

"jsx-a11y/anchor-is-valid": [
            "error", {
                "components": [ "a" ]
            },
            "error", {
                "components": [ "Link" ],
                "specialLink": [ "hrefLeft", "hrefRight" ],
                "aspects": [ "invalidHref", "preferButton" ]
            }
        ]