[React, HTML] tabIndex를 통해 키보드 focus 조정하기
문제상황 1
의도하지 않은 엘리먼트에 focus가 맞추어져 의도된 키보드 이벤트가 동작하지 않는 경우가 있습니다.
예를 들어 Enter 키를 눌렀지만 원하지 않는 엘리먼트에 focus가 맞추어져, 의도하지 않았던 이벤트가 발생할 수 있습니다.
해결방안
tabIndex를 음수로 설정하여 해당 엘리먼트가 focus가 맞추어지지 않도록 설정합니다.
*tabIndex
tabIndex는 사용자가 키보드를 사용하여 웹 페이지를 탐색할 대 요소에 초점을 맞추는 순서를 결정하는 HTML 속성입니다.
tabIndex가 클수록 우선적으로 Focus가 잡히지만 항상 그런 것은 아닙니다.
즉 tabIndex를 높은 값으로 설정한다고 해서 항상 먼저 포커스를 받는 것은 아닌데,
그 이유는 엘리먼트의 visible, disabled 여부 등에 다른 요소의 영향을 받기 때문입니다.
tabIndex의 값이 음수인 경우 해당 엘리먼트는 키보드에 의한 focus가 잡히지 않습니다.
<div>
<input
type="file"
onChange={handleChange}
tabIndex={-1}
/>
</div>
문제상황 2
단어 찾기 기능을 제작했는데 돋보기 아이콘에 onKeyDown과 onClick를 통해 이벤트 핸들러 함수를 바인딩했습니다.
클릭하거나 Enter 키를 누루면 단어 검색이 진행됩니다.
문제는 돋보기 아이콘을 클릭 하다가 Enter키를 누루면 단어 검색이 안 됩니다.
onKeyDown 이벤트에 Focus가 설정되어 있지 않습니다.
해결방안
tabIndex의 값을 0으로 설정하여 문제를 해결했습니다.
tabIndex={0}을 사용하는 것이 적절한 경우는 다음과 같습니다.
1. non-interactive elements 요소를 focus 가능하게 만들기 (ex. div, span)
2. 사용자 정의 focus 순서 만들기 : tabIndex={0}을 사용하여 focus 순서 결정
3. 개체 keyboard 접근 제공
: 마우스로는 가능하지만 키보드 탐색을 통해 interactive element에 접근하기 힘든 경우,
tabIndex={0}을 사용하여 키보드로도 접근이 가능하게 합니다.
<span
onKeyDown={handleEnterPress}
onClick={handleClick}
tabIndex={0}
>