Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] 페어룸 만들기, 페어룸 유형 선택하기 접근성 개선 #814

Merged
merged 13 commits into from
Oct 18, 2024

Conversation

greetings1012
Copy link
Contributor

@greetings1012 greetings1012 commented Oct 17, 2024

연관된 이슈

구현한 기능

  • 헤더, 랜딩, 메인 페이지 접근성 개선

상세 설명

파란

  • altaria-label 추가
  • 이외 내용은 코드에 달아 놓겠습니다!

파슬리

Header 컴포넌트

  • 버튼을 클릭하면 페이지를 이동한다는 것이 더 명확하게 드러나도록 변경했습니다.

Landing 페이지

  • 스크린 리더 사용자는 메인 로고가 무엇인지 인지할 수 없으므로 alt="메인 로고"alt="코딩해듀오 로고" 로 변경했습니다.
  • 스크린 리더가 의미 없는 <main> 태그를 읽고 있어서 role="presentation" 으로 읽지 않도록 변경했습니다.

Main 페이지

  • 스크린 리더가 부제목, 제목, 설명을 제대로 읽을 수 있도록 적절한 aria-labelrole="presentation" 설정했습니다.
  • 스크린 리더로 모달을 여는 버튼을 클릭했을 때 포커스가 첫 버튼에 고정되어 이동하지 않는 문제가 있어서 useFocusTrap 커스텀 훅의 변경 사항을 제거했습니다.
  • 스크린 리더로 모달을 열었을 때 배경에 존재하는 요소도 함께 읽는 문제가 있어서 useAriaTrap 커스텀 훅을 추가로 구현했습니다.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

중복된 button 태그를 제거하고 tabIndex 추가

Comment on lines 16 to 20
if (focusableElements.current[0].getAttribute('aria-label') === '모달 닫기') {
focusableElements.current[1]?.focus();
} else {
focusableElements.current[0].focus();
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

모달의 첫 번째 요소가 닫기 버튼이면 두 번째 요소, 아니면 첫 번째 요소에 자동으로 포커스

Copy link
Contributor

@anttiey anttiey Oct 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드가 추가되면서 모달이 열리면 포커스가 첫 버튼에 고정되는 현상이 있더라고요 😭 그래서 제가 작업할 때 해당 코드를 제거하게 되었습니다...

@anttiey anttiey changed the title [FE] 1차 접근성 개선 [FE] 페어룸 만들기, 페어룸 유형 선택하기 접근성 개선 Oct 17, 2024
Copy link
Contributor

@dle234 dle234 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 고칠게 없네용

@dle234 dle234 merged commit 35c00b6 into FE/dev Oct 18, 2024
1 of 2 checks passed
@dle234 dle234 deleted the FE/feature/#811 branch October 18, 2024 05:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🪨 etc 기타 작업
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants