href を使用しない Linkコンポーネントで jsx-a11y のエラーが出る場合の解決法


概要

オリジナルのLinkコンポーネントを作成し、lintを走らせるとhrefは受け取らないはずのコンポーネントが jsx-a11y/anchor-is-valid エラーを吐いた

実際のコード

components/Link.tsx
import { VFC } from 'react';
import NextLink from 'next/link';
import { Button } from '@chakra-ui/react';

type Props = {
  url: string;
  label: string;
  selected?: boolean;
};
const Link: VFC<Props> = ({ url, label, selected = false }) => (
  <NextLink href={url} passHref>
    <Button as="a">
      {label}
    </Button>
  </NextLink>
);

export default Link;
pages/index.tsx
import type { NextPage } from 'next';
import Link from 'components/Link';

const index: NextPage = () => (
  <Link url="http://example.com/" label="example" />
);

export default index;

エラー

$ yarn lint
yarn run v1.22.17
$ eslint 'src/**/*.{js,jsx,ts,tsx}'

~~/src/pages/index.tsx
  27:13  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid

✖ 1 problem (1 error, 0 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

解決策

index.tsxで読み込んでいるLinkコンポーネントの名前を別の名称に変更したら治った

pages/index.tsx
import type { NextPage } from 'next';
- import Link from 'components/Link';
+ import OriginalLink from 'components/Link';

const index: NextPage = () => (
-   <Link url="http://example.com/" label="example" />
+   <OriginalLink url="http://example.com/" label="example" />
);

export default index;

原因

Link という名称を使用するとESLintがaタグと判断し、a11yのルールで引っ掛かりエラーを吐くみたいです。( そもそもLinkとか名前空間が重複しそうな名前はやめておこうね・・・ )

参考 (eslint-plugin-jsx-a11y/src/rules/anchor-is-valid.js )

https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/566011b89d/src/rules/anchor-is-valid.js#L83