CSS focus 관련 가상 클래스 사용법 : focus, focus-within, focus-visible

focus :

사용자가 특정 요소에 포커스를 주었을 때 적용되는 스타일을 정의하는데 사용됩니다.
사용자가 키보드나 마우스 등을 사용하여 요소에 포커스를 주었을 때 해당 요소에 적용할 스타일을 지정할 수 있습니다.

focus-within :

부모요소가 포커스를 가진 자식 요소를 가지고 있고 그 자식요소 중 하나에 포커스가 되었을 때 부모에 스타일이 적용됩니다.
즉, 자식요소에 포커스시 부모요소의 스타일 지정합니다.
focus는 선택된 요소의 부모요소에 대한 스타일 지정이 불가능하지만, focus-within의 경우, 선택된 요소의 부모요소에 대한 스타일 지정이 가능합니다.

 

focus-visible : 

focus-visible은 focus와 달리, 키보드 등의 장치를 사용하여 포커스를 받은 경우에만 적용됩니다.
즉, focus를 사용하는 경우 마우스나 키보드를 사용한 포커스에 관계 없이 모든 포커스에 스타일이 적용되는데
focus-visible은 마우스 클릭이나 스크린 터치 등을 통해 포커스를 줄 경우에는 스타일이 적용되지 않는다는 점에서 :focus와 차이점이 있습니다.
사용자 경험을 향상시키기 위해서 키보드 포커스와 마우스 포커스의 차이를 구분하는 focus-visible는 접근성 측면에서 중요한 역할을 합니다.
예를들면,
focus-visible을 사용하지 않고 focus선택자를 사용해 outline을 지우면, 마으스 포커스뿐만아니라 키보드 탭을 했을 때 생기는 포커스 효과도 사라지는데
이렇게 되면 키보드 사용자가 해당 요소를 선택했는지 알 수 없기에, 접근성 측면에서 좋지 않은 방법입니다.
focus-visible은 키보드나 스크린 리더를 사용하여 포커스가 이동되었을 때만 스타일을 적용하고
마우스 클릭이나 터치로 인한 포커스 이동 시에는 스타일이 적용되지 않기 때문에
키보드 사용자와 마우스 사용자를 동시에 만족시킬 수 있는 스타일 적용이 가능해집니다.