메뉴 토글 CSS 키보드 포커스 테두리

키보드 토글 포커스

메뉴 네비게이션 같은 경우, 아무 속성 설정 안하고 키보드로 탭탭해보면, 토글 꺼져있을때도 활성화돼서 한참을 탭 해야함. 접근성을 위해 해당 요소에 기본적으로 포커스를 끄는 속성을 적용하고

.main-navigation .main-nav>ul {
	display: none;
	visibility: hidden;
	pointer-events: none;
}

해당 메뉴의 클래스가 토글됐을때 변경되는 class를 활용해서 활성화 css를 먹이면 됨

.main-navigation.toggled .main-nav>ul {
	display: block;
	visibility: visible;
	pointer-events: auto;
}

이런식으로 하면 토글 꺼져있을때에는 키보드 탭 이동시 무시되고, 토글 켜져있을 때에는 키보드 탭 이동시 활성화 됨

토글 포커스 테두리

일단 기본값대로 둬도 토글시 브라우저 세팅에 따라 흰색 테두리가 표시되긴 함.

근데 레이아웃이 빠듯해서 테두리를 보여줄 공간이 없으면 테두리가 짤리는 현상이 나타남.

방법은 여러가지가 있는데, 가장 안전한건 해당 요소에 무식하게 padding 값을 살짝 주면 됨.

근데 이건 해당 요소의 레이아웃을 변경하는것이기 때문에 효율성이 애매함.

레이아웃을 희생하지 않고 테두리만 적용시키려면 :focus-visible 속성을 사용하면 됨,

이 속성 자체가 애초에 그냥 포커스일때는 활성화 안 되고, 키보드 포커스 같은 경우만 활성화 하려고 만들어진 속성임.

그래서 약간 핵이지만 해당 요소에 아래와 같이 포지션과 우선순위를 잔뜩 먹여서 키보드 포커스시 최상단에 위치하게 하면 어느정도 해결 됨.

:focus-visible {
    z-index: 999999;
    position: relative;
}

근데 이렇게 해서 해결 되는 레이아웃이 있고, 극단적으로 공간이 부족한 경우엔 이렇게 해도 테두리가 짤림.

그럴 경우에는 한번 더 핵으로, 실제로 포커스 테두리가 생겨야 하는 부모 요소에 overflow:visible 속성을 줘버리면 됨

.main-navigation.toggled .main-nav {
	overflow:visible
}

굉장히 핵스럽긴 하지만 깔끔하게 해결은 됨.

padding 과 핵 중에 본인 레이아웃에 맞는걸로 하면 됨.