-
Notifications
You must be signed in to change notification settings - Fork 6
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
[Feature] - 여행 계획 등록 페이지 접근성 개선 #554
Conversation
1. Calendar 내 esc를 눌렀을 때 닫히도록 변경 2. visual hidden 텍스트 추가
1. 현재 년, 월에 대한 텍스트를 스크린 리더기가 읽도록 변경 2. 이전 버튼, 다음 버튼에 대한 설명 추가 3. Visual hidden 텍스트를 통해 이전 달로 이동할 수 없는 경우에 대한 안내 메시지 추가
EditRegisterModalBottomSheet 내 isOpen 시 렌더링 되도록 변경
Test Results11 tests 11 ✅ 14s ⏱️ Results for commit 860512c. ♻️ This comment has been updated with latest results. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
고생 많았습니다 :)
export const visualHiddenStyle = css` | ||
overflow: hidden; | ||
position: absolute; | ||
width: 1px; | ||
height: 1px; | ||
margin: -1px; | ||
padding: 0; | ||
border: 0; | ||
|
||
white-space: nowrap; | ||
clip: rect(0, 0, 0, 0); | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 부분은 리버가 VisualHidden 컴포넌트를 구현했더라고요 이후에 합치면 좋을 거 같아요!
|
||
export const visualHiddenStyle = css` | ||
overflow: hidden; | ||
position: absolute; | ||
width: 1px; | ||
height: 1px; | ||
margin: -1px; | ||
padding: 0; | ||
border: 0; | ||
|
||
white-space: nowrap; | ||
clip: rect(0, 0, 0, 0); | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
여기도요!
export const visualHiddenStyle = css` | ||
overflow: hidden; | ||
position: absolute; | ||
width: 1px; | ||
height: 1px; | ||
margin: -1px; | ||
padding: 0; | ||
border: 0; | ||
|
||
white-space: nowrap; | ||
clip: rect(0, 0, 0, 0); | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 부분도요!
export const visualHiddenStyle = css` | ||
overflow: hidden; | ||
position: absolute; | ||
width: 1px; | ||
height: 1px; | ||
margin: -1px; | ||
padding: 0; | ||
border: 0; | ||
|
||
white-space: nowrap; | ||
clip: rect(0, 0, 0, 0); | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
요기도요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
고생하셨습니다 지니!
✅ 작업 내용
접근성 lighthouse before & after
before
after
lighthouse의 경우 색상 대비율 문제만 존재해서 점수 변화는 없는 상태입니다.
📸 스크린샷
2024-10-21.5.54.32.1.mov
🙈 참고 사항
x