[LAB-12] hover로 띄운 모달창 키보드로 접근

[kyungseob7]

질문 작성자

변경섭

문제 상황

• 아까 멘토링 시간에 질문했던 내용입니다. hover를 할 시 모달창이 띄워집니다.
• 모달이 띄워진 상태에서 마우스를 올려 놓고 할 경우에는 접근이 되지만
• 그렇지 않은 경우 키보드로 접근이 안됩니다.

키보드를 이용해서 접근을 하고 동작을 하고 싶은데 어떻게 하면 좋을까요? 검색 키워드도 알고 싶습니다!

프로젝트 저장소 URL

• 압축파일 남기겠습니다!

환경 정보

• 운영체제 (window)

[yamoo9]

문제 해결

StProfile 스타일 컴포넌트의 :focus 부분을 &:focus-within으로 변경하면 초점 이동 되었을 때 모달 다이얼로그가 사라지지 않고 표시될 겁니다.

:focus-within에 대한 학습은 MDN 문서를 참고하세요. 😃

const StProfile = styled.div`
  // ...
  &:hover,
  &:focus-within {
    div {
      visibility: visible;
    }
  }
`;

결과는 아래와 같이 요구된 데로 키보드 접근이 가능합니다. 😄

[kyungseob7]

야무썬생님 감사합니다!