[React.js] tabIndex 로 Tab 이동 설정하기

해당 태그 내부에 tabIndex="0" 을 추가한다.

import { ReactComponent as Arrow } from "../assets/arrow.svg";

<Arrow
  className="back-button"
  stroke="#e10098"
  onClick={() => goToPrevPage()}
  onKeyUp={(event) =>
    event.key === "Enter" || event.key === " "
      ? goToPrevPage()
      : ""
 }
 tabIndex="0"
/>

위의 예시는 arrow.svg 이미지 파일을 Arrow 라는 컴포넌트 형식으로
return되는 JSX 코드 내부의 원하는 위치에 끼워 넣어주고,
tabIndex 속성을 부여한 코드다.

기존에 Arrow는 button 태그가 아니기 때문에 Tab 키를 눌러도 포커싱되지 않는다.
하지만 tabIndex를 부여함으로써 결과적으로 Tab 으로 포커스가 가능해졌다.

마우스를 움직이지 않고도 Tab 으로 포커스를 Arrow로 옮긴 다음 Enter 키를 누르는 것만으로
이전 페이지로 가는 goToPrevPage() 함수를 실행시킬 수 있다 :)

tabIndex 속성에는 꼭 0만 부여되는 것이 아니다!
정리하자면 다음과 같다.

tabIndex="0" //상호작용하지 않는 태그에도 포커스 이동 기능 설정
tabIndex="-1" //상호작용이 되는 태그에도 포커스 이동 기능 제거
tabIndex="1" //포커스 순서를 정하여 1부터 순서대로 이동하도록 설정

이전에는 Tab으로 포커스를 필요한 곳에 이동시키는 것이 왜 중요한지 몰랐는데,
웹 접근성의 관점에서 굉장히 중요하다는 것을 알게 되었다 :0