From 42ce5b728df7e1c63c5d88cfc5d8bb862fbe658b Mon Sep 17 00:00:00 2001 From: Zack Sheppard Date: Wed, 3 Feb 2021 10:58:14 +0000 Subject: [PATCH] [Docs] `anchor-is-valid`: Add Next.js case Adds up-front documentation of the issue and possible workarounds for users encountering #402 --- docs/rules/anchor-is-valid.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/docs/rules/anchor-is-valid.md b/docs/rules/anchor-is-valid.md index de5c1f4f7..7191f9759 100644 --- a/docs/rules/anchor-is-valid.md +++ b/docs/rules/anchor-is-valid.md @@ -88,6 +88,30 @@ If you need to create an interface element that the user can mouse over or mouse In the example immediately above an `onClick` event handler was added to provide the same experience mouse users enjoy to keyboard-only and touch-screen users. Never fully rely on mouse events alone to expose functionality. +### Case: I use Next.js and I'm getting this error inside of ``s + +This is a [known issue](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/402) with Next.js's decision to construct internal links by nesting an href-free `` tag inside of a `` component. Next.js is also [aware of the issue](https://github.com/vercel/next.js/issues/5533) and has an [RFC](https://github.com/vercel/next.js/discussions/8207) working towards a solution. + +Until the Next.js API can be updated to a more performant and standard setup, you have a few workaround options: + +1. If you have only a few `Link`s, or they're clustered in just a few files like `nav.tsx`, you can use disable macros like `{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}` to turn off validation of this rule for those usages. + +2. You can use the `Link` component's `passHref` prop to override a dummy `href` on the ``: +```typescript + + Go to my amazing page + +``` + +3. You can invest in a custom component that wraps the creation of the `Link` and `a`. You can then add your new custom component to the list of components to validate to ensure that your links are all created with a navigable href. A sample custom component is shared [here](https://gist.github.com/zackdotcomputer/d7af9901e7db87364aad7fbfadb5c99b) and it would be used like this: +```typescript +// Internally, LinkTo handles the making of the Link and A, collecting the +// need for a lint workaround into a single file. +// Externally, LinkTo can be linted using this rule, ensuring it will always +// have a valid href prop. +Go to my amazing page +``` + ### Case: I understand the previous cases but still need an element resembling a link that is purely clickable We recommend, without reserve, that elements resembling anchors should navigate. This will provide a superior user experience to a larger group of users out there.