focus시 테두리 제거

회사에서 운영하고 있는 서비스 중에
웹 접근성 이슈로 모바일 메뉴 버튼에 강제로 .focus()를 준 부분이 있다.

talkback 기능을 이용해서 해당 메뉴 버튼을 누른 후 다시 메뉴를 닫았을 때
메뉴 버튼에 초점이 유지되도록 하기 위함인데 한 가지 문제가 발생했다.

talkback을 사용하지 않는 일반 사용자들이 해당 메뉴를 열고 닫았을 때
메뉴 버튼에 주황색 테두리가 생기는 이슈다..
원인은 명확하진 않으나 임의 요소에 .focus()를 통하여 강제로 초점을 줬을 때 발생하는 듯했다.

그래서 해당 이슈를 해결하기 위해 검색해 보니 아래와 같은 방법이 대다수였다.

button{outline : none;}

하지만 이렇게 테두리를 지워버리면 키보드를 사용했을 때 초점 표시가 안되기 때문에
키보드 사용자에 대한 웹 접근성을 위반하게 된다.
좀 더 검색해 보니 :focus-visible 이란 걸 찾았다. 크롬 86 버전에 새로 추가된 기능이다.

:focus{outline: 0;}
:focus-visible{3px solid #000;}

이런 식으로 작성하면 초점을 강제로 줘도 일반 사용자들에게 해당 영역의 테두리는 보이지 않고 키보드 사용 시에는 테두리가 정상적으로 표시되며, talkback이나 voiceover을 사용할 때도
정상적으로 초점이 보인다.