상황
웹 접근성 개선을 위해 focus되어있는 요소에 outline을 넣는 작업을 하고있었다.
대부분 클릭 가능한 요소들은 button으로 만들게되는데, 재사용 컴포넌트로 만든 chip 컴포넌트가 예외였다.
chip컴포넌트는 onClick 프롭을 옵셔널로 전달받는데, 전달받을 때에만 클릭 가능하도록 설정해놓았다.
그래서 기본적으로 div요소로 구현했고, 클릭가능할 때에만 button처럼 동작한다.
그래서 div요소를 tab키로 접근할 경우, outline이 표시가 안되는 이슈를 발견했다.
해결하기
일단 기본적으로 div는 focus속성이 없다.
그래서 찾아보니, div에 tabindex속성을 부여하면 된다고 한다.
(react에서는 tabIndex이고 string이 아니라 number형식이다.)
0을 넣으면? ✅
0은 키보드 네비게이션으로 포커스가 가능한 요소이다. 양수값이 있다면 양수값후에 포커스가 되고, 기본적으로 document의 소스 순서에 따라 순서가 정해진다.
음수를 넣으면? ❌
음수를 넣으면 키보드 네비게이션으로 도달할 수 없는 요소를 의미한다.
자바스크립트로 focus()하거나, 마우스 클릭으로는 가능하다.
특정 이벤트에만 나타나는 위젯 컨텐츠 등에 유용하고 한다.
그래서 tabIndex={!!onClick ? 0 : -1}을 속성으로 지정했더니 해결 완료.
양수를 넣으면? ❌❌
양수도 0처럼 키보드로 포커스가 가능하다.
다른 점은 0인 요소보다 먼저 포커스되고, 숫자가 작을 수록 먼저 포커스가 된다.
각각 tabIndex가 0,4,5인 요소 3개가 있다면, 4->5->0 순서로 포커스 된다.
같은 숫자들끼리는 document소스 순서와 동일하게 순서가 정해진다.
하지만 특별한 경우가 아니라면 0으로 지정한다.
심지어 공식문서에 양수지정은 피하라는 경고가 적혀있다.
기술의 도움에 의존하는 사람들(?)이 페이지 컨텐츠를 동작하거나 조작하는데에 어려움이 있을 수 있다.
대신 document를 작성할 때, 논리적인 흐름으로 요소들을 배치해야 한다.
ref: MDN tabindex
