eslint fails on inside in React

Question

I got Next.js React app. Here is my code:

<Link href="/foo">
  <a>Bar</a>
</Link>

eslint tells me this: The href attribute is required for an anchor to be keyboard accessible. But Next.js wants me to inculde an a tag inside my Link. Ho do I configure eslint properly or change my code so that it doesn't warn me about this? Aside from completely disabling this rule of course.

https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/402 You can find a workaround there. — devserkan, May 31 '19 at 12:44
Does this answer your question? [How can I fix jsx-a11y/anchor-is-valid when using the Link component in React?](https://stackoverflow.com/questions/47875730/how-can-i-fix-jsx-a11y-anchor-is-valid-when-using-the-link-component-in-react) — biw, May 31 '21 at 20:47
@biw The question is similar but it's not at all the same. I got `a` inside `Link`. They got only `Link`. Their solution does not apply for my situation. Look at the code. Why do you vote for close without diving into the details? — Gherman, Jun 01 '21 at 10:33
My apologies @Gherman! I should not have voted to close. It is not the same and I see that now. — biw, Jun 02 '21 at 03:55

score 1 · Answer 1 · answered Jul 16 '22 at 23:54

Add this to .eslintrc.json

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

This setting control the error. I hope this helps

score 0 · Answer 2 · answered May 31 '19 at 12:25

0

eslint-disable-next-line jsx-a11y/anchor-is-valid

if you are using vscode just right click on the warning in PROBLEMS and you can check if disable only for that lino or the entire file

answered May 31 '19 at 12:25

ProblemsEverywhere

517
2
9

1

I want to disable it for all `a` inside of `Link`s. Otherwise it's not much of a fix – Gherman Jun 18 '19 at 16:08
this is still open question. Also github has allot issues not solved about the same problem. Suggestion - wait a bit more :) – FDisk Oct 21 '20 at 20:33
1

See https://stackoverflow.com/a/47875838/2840324 – biw May 31 '21 at 20:47

score 0 · Answer 3 · answered Mar 04 '22 at 14:45

0

For NextJS adding "react-app" to extends helped.

"extends": [
    ...
    "react-app"
],

answered Mar 04 '22 at 14:45

Junius L

15,881
6
52
96

eslint fails on inside in React

3 Answers3