[LAB-7] React Router의 useNavigate()와 접근성

realldk commented 1 year ago

질문 작성자

이동경

문제 상황

eslint에 jsx-a11y/recommended 플러그인을 사용중입니다.

const navigate = useNavigate();
const navigation = () => {
  navigate(`/question/${id}`);
};

json-server를 사용해서 목업데이터 db.json으로 get 기능을 구현해봤습니다. 여기서 navigation을 onClick속성에 주려고 하면 h 태그와 같은 noninteractive-element에는 마우스나 키보드를 이용한 이벤트 리스너를 할당하지 않는게 좋다고 나옵니다. 그래서 <Link onClick={navigate]/> 와 같이 시도해보았는데 제대로 연결이 되지 않았습니다. <a>나 <Link>를 이용한 것이 역할대로라면 맞는 것 같은데 조건을 걸어서 이용하려고 하니 useNavigate()를 써야할 것 같고..

      <div
        className={styles.linkToDetail}
        role="button"
        tabIndex={0}
        onClick={navigation}
        onKeyDown={checkHandler}
      >
        <h2>{title}</h2>
      </div>

이런식으로 한 번 더 씌워서 사용을 하게 되었습니다. 이렇게 사용하는 게 맞는걸까요? 올바른 방법이나 다른 방법이 있는지 궁금합니다.

프로젝트 저장소 URL

question-list-get#75 deco\src\components\Common\Article\Article.jsx 36번째 줄부터 위의 div요소가 있습니다.

환경 정보

Windows
React

yamoo9 commented 1 year ago

매뉴얼 방식의 접근성 설정

질문의 마크업 구조를 보면 div 요소에 클릭 이벤트를 연결했고 내부에는 제목이 포함되어 있습니다. 이런 경우 마우스 없이 키보드로 접근할 수 없으므로 접근성을 부여하기 위해 개발자는 수고를 해야 합니다.

버튼 역할 부여
초점 이동이 가능하게 설정
마우스 이벤트 연결
키보드 이벤트 연결

<div
  className={styles.linkToDetail}
  role="button"
  tabIndex={0}
  onClick={navigation}
  onKeyDown={checkHandler}
>
  <h2>{title}</h2>
</div>

웹 표준(네이티브) 방식과 접근성

React Router의 <Link> 컴포넌트를 사용하면 손쉽게 접근성도 준수하고 개발자가 직접 접근성을 설정해야 하는 수고도 필요하지 않습니다.

import { Link } from "react-router-dom";

<Link to={`/question/${id}`} className={styles.linkToDetail}>
  <h2>{title}</h2>
  {/* ... */}
</Link>

프로젝트 파일에 .env 파일이 포함되지 않았고, 질문 검토를 위해 어떤 라우트(route)로 이동해야 할 지 알 수 없어 임의 테스트를 하였습니다.

아래 데모 화면을 보면 키보드 만으로도 접근해서 라우팅 할 수 있습니다. 😃

realldk commented 1 year ago

npm run all을 해서 /question 으로 이동해야 된다고 말씀드렸어야 했는데 죄송합니다. 답변 감사합니다! Link로도 잘 되네요!

yamoo9 / likelion-FEQA