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

[Feature] - 여행 계획 등록 페이지 접근성 개선 #554

Merged
merged 17 commits into from
Oct 23, 2024

Conversation

jinyoung234
Copy link
Contributor

@jinyoung234 jinyoung234 commented Oct 21, 2024

✅ 작업 내용

  • subtitle, 여행일 텍스트 읽어주기
  • 캘린더
    • enter 눌렀을 때 캘린더 열리도록 하기
    • esc 눌렀을 때 캘린더 닫히도록 하기
    • 일 ~ 토 영역 터치 안되도록 막기
    • 선택 가능한 일은 요일 까지 aria-label로 설명해주기
    • 탭으로 각 선택 가능한 요일 접근 가능하도록 변경하기
  • 아코디언 → google map 라이브러리 이슈로 인해, 숨겨지지가 않더라구여 ㅜㅜ..
    • 아코디언 닫히면 보이지 않는 요소들은 탭 되지 않도록 만들기
    • 아코디언 열고 닫을 때 aria-label로 열렸다, 닫혔다 말해주기
    • 지도 접근성 리더기에 접근하지 못하도록 하기
    • todo 삭제 버튼 읽도록 하기
  • 자동 완성
    • 자동완성 탭에서 input에 다다르면 마우스 위, 아래로 해당 장소를 선택 하라고 말해주기
    • enter 했을 때 에러나는 부분 고치기
    • 자동 완성 팝업 열렸을 때 다른 요소 식별되지 않도록 변경
  • 여행기 등록 시 focus trap 적용

접근성 lighthouse before & after

before

image

after

image

lighthouse의 경우 색상 대비율 문제만 존재해서 점수 변화는 없는 상태입니다.

📸 스크린샷

2024-10-21.5.54.32.1.mov

🙈 참고 사항

x

1. Calendar 내 esc를 눌렀을 때 닫히도록 변경

2. visual hidden 텍스트 추가
1. 현재 년, 월에 대한 텍스트를 스크린 리더기가 읽도록 변경

2. 이전 버튼, 다음 버튼에 대한 설명 추가

3. Visual hidden 텍스트를 통해 이전 달로 이동할 수 없는 경우에 대한 안내 메시지 추가
EditRegisterModalBottomSheet 내 isOpen 시 렌더링 되도록 변경
@jinyoung234 jinyoung234 added the FE label Oct 21, 2024
@jinyoung234 jinyoung234 added this to the sprint 6 milestone Oct 21, 2024
@jinyoung234 jinyoung234 self-assigned this Oct 21, 2024
Copy link

github-actions bot commented Oct 21, 2024

Test Results

11 tests   11 ✅  14s ⏱️
 2 suites   0 💤
 1 files     0 ❌

Results for commit 860512c.

♻️ This comment has been updated with latest results.

Copy link

@simorimi simorimi left a comment

Choose a reason for hiding this comment

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

고생 많았습니다 :)

Comment on lines +24 to +35
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);
`;

Choose a reason for hiding this comment

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

이 부분은 리버가 VisualHidden 컴포넌트를 구현했더라고요 이후에 합치면 좋을 거 같아요!

Comment on lines +83 to +95

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);
`;

Choose a reason for hiding this comment

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

여기도요!

Comment on lines +34 to +45
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);
`;

Choose a reason for hiding this comment

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

이 부분도요!

Comment on lines +76 to +87
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);
`;

Choose a reason for hiding this comment

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

요기도요!

Copy link

@0jenn0 0jenn0 left a comment

Choose a reason for hiding this comment

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

고생하셨습니다 지니!

@jinyoung234 jinyoung234 merged commit 6ad4826 into develop/fe Oct 23, 2024
3 checks passed
@simorimi simorimi deleted the feature/fe/#538 branch November 21, 2024 16:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants