상황 : 부모 요소에
overflow : hidden을 쓰다 보면 자식 요소에 focus시 보여지는 outline이 잘려지는 문제가 종종 발생하는 걸 발견.
focus시 outline이 가려진다.
🧐 부모 요소의 overflow : hidden을 끄면! 
무엇에 의한 문제인지는 알았고 포커스 시 어디에 포커싱됐는지 완전히는 아니어도 보이긴 보이기 때문에 이게 문제가 되려나? 싶었다.
이 점은 문제가 된다.
서칭 결과 + 캠프 질의응답에 질의를 남겨둔 결과 답변은 모두 문제가 된다. 였다.
w3c : https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html
이런 focus 이슈는 WCAG2.2 성공기준 2.4.7 Focus Visible과 관련이 있다. 해당 문서에 가면 성공 기준이라는 게 있는데 이 성공 기준의 목적은 사용자가 키보드 포커스가 어디에 있는지 알아야 한다는 것이다. 그래서 지금처럼 포커싱이 보여지는 부분의 일부가 가려진다면 누군가는 잘 못 알아볼 수도 있기 때문에 문제가 될 수도 있다.
overflow:hidden으로 이런 문제가 발생하는 경우가 빈번하다고 한다. 일부가 잘리기도 하지만 초점 전체가 안 보이기도 한다고.
그래서 더 좋은 접근성을 위해서 Focus Appearance 에 대해서
w3c : https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance
이 문서를 이어서 볼 수 있었다. 
❗️ 포커스 상태에서 표시기의 영역은 최소한 컴포넌트의 2 픽셀 두께 테두리 영역만큼 커야 함.
결국 모든 면이 잘 보여야 한다는 뜻으로 해석된다.
방법은 세 가지!
1. overflow:hidden 제거
2. outline-offset 네거티브 값 사용
3. box-shadow 또는 가상 요소로 포커스 표시
이 상태에서 overflow:hidden을 제거하는 건 다른 css가 엉망이 되거나 스와이퍼를 쓴 경우 다 흘러나갈 수 있기 때문에 2번 혹은 3번을 써야될 것 같다.
outline
.element:focus {
outline: 2px solid blue;
outline-offset: -2px; /* 아웃라인을 요소 안쪽으로 그림 */
}그런데 outline은 radius가 안 통해서 아쉬운 점이 있다. 네모네모... 그래서 대신 box-shadow를 사용한 스타일링도 좋은 선택이 될 수 있다고 한다. border-radius 속성과 함께 사용하여 focus 시 둥근 모서리 형태의 디자인으로 커스터마이징 할 수 있다는 점이 좋았다.
+ 여기 더해서 focus-visible 선택자에 대한 내용도 추천받았다.
:focus 와 :focus-visible을 따로 구분해주는 이유는
- :focus 모든 포커스 상황
- :focus-visible 키보드 탐색 시 포커스
키보드의 포커스의 경우 확실히 보여주기 위해 명확한 표시를 해주는 데 터치나 마우스로 선택했을 때 키보드용 포커싱을 보여주면 그 명확한 표시가 깜빡!하고 나타나며 오히려 불편함을 줄 수 있기 때문이다.
.element:focus {
/* 모든 포커스 상황 */
background: yellow;
}
.element:focus-visible {
/* 키보드 탐색 시에만 */
outline: 2px solid blue;
}이런 식으로 활용할 수 있다.
앞으로 overflow:hidden 을 사용하게 됐을 때 이런 점을 좀 더 꼼꼼히 체크할 수 있을 것 같다. focus-visible 선택자는 이번에 알게 되었는데 다른 곳에서도 더 유용히 사용할 수 있을 것 같다.
