:focus-within 깜빡임(blinking issue) 해결법

체크박스를 감싸는 영역(label)의 클릭이 체크박스에 연동되도록 하는 과정에서 심상치 않은 발생했다.

클릭 시 focus-within을 이용해 해당 영역의 backgroundColor가 변경되어 focus되었다는 것을 시각적으로 보여주고자 하였다.

일단 그 때 당시의 상황을 코드로 재현해보았다.

 

 

보시다시피 다른 체크박스를 클릭하는 순간 backgroundColor이 깜빡거리는 것을 확인할 수 있다. 

원인은 <input>을 감싼 <label> 태그가 focus 불가능한 엘리먼트이기 때문이다.

마우스 다운 시 input의 focus가 풀리면서 backgroundColor도 풀리게 되고, 

마우스 업을 하면서 input의 focus가 다시 되살아나서 비활성화되었던 focus-within이 활성화되는 것이다.

 

해결법은 간단하다. 

<label>에 tabIndex = -1을 준다.

tabIndex는 sequential keyboard navigation을 제어하는 프로퍼티이다.

 

sequential keyboard navigation란 tab키나 space키 등으로 뷰 포트의 엘리먼트에 대한 포커스에 접근하는 것을 뜻한다.

흔히 로그인을 할 때 id input에서 password input으로 tab키를 눌러 이동하는 것이 대표적이다.

 

tabIndex = -1을 줄 경우, sequential keyboard navigation는 사용 못하게 되지만 마우스를 이용한 포커스는 가능해진다.

마우스 포커스가 불가능한 <label>에 tabIndex= -1을 적용해보았다.

 

 

 

포커스가 불가능했던 label도에서 발생하는 마우스 다운 이벤트 역시 포커스가 가능하게되어 focus-within을 활성화할 수 있게 되었다.

 

---

참고 자료

 

:focus-within - CSS: Cascading Style Sheets | MDN