[LAB-4] focus를 받을 때 outline이 버튼 밑으로 숨겨지는 원인에 대해 알고싶습니다..!

SeoMiYoung commented 1 year ago

질문 작성자

서미영

문제 상황

안녕하세요. 저는 현재 이전에 구현한 모달창 코드를 접근성을 고려하기 위해 수정중입니다. Tab으로 모달창안의 요소들을 순환할 수 있게 만들었으나,

Animation 보시면, 현재 특히 뷰티컬리로 이동하는 링크의 포커스가 눈에 잘 보이지 않습니다.

그래서 저는 사람인의 웹접근성 가이드를 참고해서(https://sri-fe1.notion.site/460cb5af6a354f4b909526c767314c62), 포커스 표시기는 눈에 보이도록 제공하면 좋겠다고 생각하여 CSS를 수정하고 있습니다.

관련된 파일은 Mainmodal.jsx와 Mainmodal.module.scss입니다. 저는 Mainmodal.module.scss에서

// Tab 접근성 고려한 focus 영역 스타일하기
.popUpContainer {
  button:focus-visible {
    outline: 4px solid var(--blue-500);
    outline-offset: 5px;
  }
  a:focus-visible {
    outline: 4px solid var(--blue-500);
    outline-offset: 5px;
  }
}

위의 코드를 추가했고, 그 결과 이전보다는 focus를 잘 확인할 수 있는 상태가 되었습니다. Animation

그러나 위의 GIF를 보면 알 수 있듯이, "오늘 하루 안보기"버튼에 FOCUS될때는 우측 포커스 부분이 버튼에 의해 감춰지는 걸 확인할 수 있었습니다.

이 문제에 대해 해결해보려고 Z-index를 수정하는 등의 노력들을 하였으나, 쉽게 원인을 찾을 수 없었습니다.ㅠㅠ

프로젝트 저장소 URL

https://github.com/SeoMiYoung/project-repo branch정보: feat/#212 관련파일: Mainmodal.jsx와 Mainmodal.module.scss

환경 정보

운영체제 정보: 윈도우 Node.js 정보: v18.14.0

yamoo9 commented 1 year ago

아래는 @SeoMiYoung 님께서 요청한 초점 이동 시 아웃라인 상위 배치가 구현된 영상입니다.

Mainmodal.module.scss 스타일 코드를 아래와 같이 수정하면 초점 이동 시 아웃라인 상위 배치가 구현될 것입니다. 😃 참고로 z-index 속성은 홀로 작동하지 않습니다. position 속성이 함께 설정되어야 작동합니다. (static 값은 제외)

.popUpContainer {
  :focus-visible {
    position: relative;
    z-index: 100;
    outline: 4px solid var(--blue-500);
    outline-offset: 5px;
  }
}

SeoMiYoung commented 1 year ago

헐!!! 우왓!! z-index속성은 홀로 작동하지 않는다는 걸 처음 알았어요....!!! 그래서 제가 z-index만 주었을때 아무런 변화가 일어나지 않았던 거군요!! ㅠㅠ 답변 너무너무 감사합니당 ㅠㅠ

yamoo9 / likelion-FEQA