href를 사용하지 않는 링크 구성 요소에서 jsx-a11y 오류가 발생했을 때의 해결 방법
개요
원본 링크 구성 요소를 만들었습니다. lint를 실행하면hyref의 구성 요소
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.tsximport 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로 읽은 링크 구성 요소의 이름을 다른 이름으로 변경하면 됩니다
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;
까닭
링크라는 이름을 사용하면 ESLight는 a 태그로 판단되며, a11y 규칙에 따라 카드 걸기 오류가 발생할 수 있습니다.(Link 같은 이름, 공간이 겹치는 이름은 그만두자...)
참조 (eslint-plugen-jsx-a11y/src/rules/anchor-is-valid.js)
Reference
이 문제에 관하여(href를 사용하지 않는 링크 구성 요소에서 jsx-a11y 오류가 발생했을 때의 해결 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/ruru/articles/a2d569158ee027텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)