[FE] 접근성 개선 작업인 모달, 포커스, 스크린리더 개선을 진행한다. #814
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ooherin
force-pushed
the
feat/777-accessibility
branch
from
456fa11 to
f7ff7e2
Compare
ooherin
had a problem deploying
to
frontend-msw
GitHub Actions
Failure
ooherin
force-pushed
the
feat/777-accessibility
branch
from
476654e to
373934e
Compare
…ng-ggood into feat/777-accessibility
ooherin
force-pushed
the
feat/777-accessibility
branch
from
a897aff to
1edc28a
Compare
skiende74
approved these changes
Oct 23, 2024
| return ( | ||
| <S.VisibleContainer> | ||
| <S.VisibleContainer role="navigation" aria-label="탭 내비게이션"> |
There was a problem hiding this comment.
nav 태그를 사용하면 role이 자동으로 들어가기때문에 또넣어줄 필요가 없습니다.
| const { id, name, className } = tab; | ||
| const isCompleted = 'isCompleted' in tab ? tab.isCompleted : undefined; | ||
|
|
||
| return ( | ||
| <TabButton | ||
| ref={el => (tabRefs.current[index - 1] = el)} |
|
"질문 선택 after" 12초부분에서, 하나 선택시 "11개중 x개 선택됨" 이 뜨고 "~~~ 선택되었습니다" 가 뜨는데
|
healim01
approved these changes
Oct 23, 2024
healim01
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
❗ Issue
✨ 구현한 기능
모달 접근성 개선
FocusTrap을 사용하여 모달이 켜지면, 해당 모달의 인풋, 버튼 같은 접근 요소에서만 포커스가 되고 자동으로 포커스가 돌도록 해주었습니다. 또한 스크린 리더기로도 모달을 x 버튼을 눌러 끌 수 있도록 해주었습니다.체크리스트 생성, 편집 페이지
statusMessage에visually-hidden속성을 주어, 적절한 메세지가 전달되도록 하였습니다. 또한tabIndex를 사용하여 포커스가 타겟 요소에만 가도록 했습니다.statusMessage의 경우 응집성을 위해 보통 클릭 이벤트를 관리하는 hook 에서 처리하도록 하였습니다.탭 키보드 접근성 개선
Tab컴포넌트 안에 키보드 이벤트로 탭을 이동할 수 있게 했으며, 현재 탭의 위치에 따라 자동으로 탭이 옆으로 스크롤 되게 해주었습니다.로그인, 회원가입 키보드 접근성 개선
관련 영상
before.mp4
after.mp4
before.mp4
after.mp4
before.mp4
after.mp4
before.mp4
after.mp4
before.mov
after.mov
📢 논의하고 싶은 내용
저희 디테일 페이지의 경우 스크린 리더 접근성이 조금 떨어지는 것 같다는 생각이 들었습니다. (텍스트를 분리해서 읽는 등) 다음에 시간이 된다면 이에 대해 추가 작업을 논의해도 좋을 것 같습니다.
🎸 기타