해당 태그 내부에 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