[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}
>