addListener 마우스 클릭 이벤트 인식

지도/로컬 API
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.

addListener로 마커 클릭시 이벤트 발생시켜 customoverlay를 만드는데요
웹접근성을 고려해서 focus_visible로 키보드로 눌렸을때만 customoverlay의 한 부분에 포커스가 가게 하는데
kakao.maps.event.addListener(marker, ‘click’, function(e) { …} 부분을 마우스 클릭으로 실행시키면
키보드로 눌렀을때 처럼 포커스가 갑니다. 마우스클릭을 했을떄의 이벤트 타입을 확인해보니 mouseup 이라고 하는데 왜 focus_visible 이 안먹힐까요?

2

말씀 주신 내용으로 보면 focus_visible이 키보드로 움직이거나 마우스 클릭할 때 동작하고 있는 것 같은데
focus_visible이 안된다고 하는 부분은 어떤 내용인 건가요?
그리고 설명만으로는 정확한 상황을 알 수 없기 때문에 현상을 확인할 수 있는 코드나 외부 URL도 함께 첨부해 주세요.

3

사정상 소스나 url 제공이 불가능한점 이해부탁드려요 대략적인 소스를 예시로 들면

kakao.maps.event.addListener(marker, 'click', function(e) {
    
    <div><button class='btn'>버튼 </button></div> => 커스텀 오버레이 생성

}
$(“.btn”).focus();

이런식으로 지도위 마커를 클릭했을때 저 addlistener를 타고 버튼이 있는 커스텀오버레이를 생성하고
웹접근성을 위해 tab키로 선택시 버튼 클래스로 포커스를 가게 하는데
거기에 css로 button 에 focus_visible (키보드 tab키만 캐치 하는걸로 알고 있습니다) 을 적용시켜서
지도위 마커가 아닌 따로 만들어놓은 리스트(리스트 선택시 해당 maker가 trigger 되도록 했습니다) 를 키보드 tab키를 눌럿을때만 정상적으로 포커스가 가는걸 확인했는데 (리스트 마우스 클릭시에는 포커스 안됨) 지도위 마커를 마우스클릭했을때에도 포커스가 가고 있어서 애를 먹고있어요 …

4

:focus-visible은 키보드 이벤트에서 동작하게 되어있지만
$(‘btn’).focus()와 같이 직접 javascript로 포커스를 설정할 경우 :focus-visible이 적용됩니다.
자세한 내용은 구글링으로 확인하실 수 있습니다.
위 내용 참고하셔서 마커 클릭 시 버튼으로 포커스를 강제하는 방법은 고려해주세요.