[REFACTOR] 매칭 결과 페이지 스크린 리더 개선 및 버그 해결

[useon]

Issue Number

#336

As-Is

매칭 결과 페이지

모든 라운드가 종료되면 나와 가장 같은 선택을 많이 한 사람 순으로 매칭도를 나열합니다.

• 개선 전

x.mov

📢
매칭 결과 머리말 레벨 1 배너
매칭도를 통해 당신과 가장 잘 맞는 사람을 알아보세요 눈웃음을 지으며 활짝 웃는 얼굴과 발그레한 볼 머리말 레벨2 앤드 배너
1 
사용자 프로필
가나다라마바사아자차카타
100
%
버튼 아래쪽 화살표
확인 버튼

문제점
1, 정보를 뚝뚝 끊어 읽고, 정보가 명확하지 않는다.
2. 어떤 버튼인지 알기 힘들다.
3. 플로팅(최상단, 최하단)버튼 클릭시 포커스를 잃는다.
4. 좌우 스크롤이 생겨 한 화면에 정보를 볼 수 없어 불편하다.

To-Be

• 개선 후

default.mov

• 1 -> 1위로 수정하여 명확하게 순위를 인식할 수 있도록 개선
• 좌우 스크롤이 생기는 문제 해결
• 동일 퍼센트인데 게이지 바의 넓이가 다른 문제 해결
• 가장 낮은 순위 버튼 눌러서 이동 시 컨텐츠가 잘리는 문제 해결
• 플로팅 버튼의 의미를 설명하도록 개선 ex. 버튼 아래쪽 화살표 -> 가장 낮은 순위로 이동 버튼
• 목록 읽기 전 최하단으로 바로 가는 버튼 읽을 수 있도록, 목록 읽은 후 최상단으로 바로 가는 버튼을 읽을 수 있도록 개선
• 하단 플로팅 버튼을 누르면 가장 낮은 순위로 이동 후 가장 낮은 순위로 포커스 이동, 상단 플로팅 버튼을 누르면 가장 높은 순위로 이동 후 가장 높은 순위로 포커스 이동

Check List

• 테스트가 전부 통과되었나요?
• 모든 commit이 push 되었나요?
• merge할 branch를 확인했나요?
• Assignee를 지정했나요?
• Label을 지정했나요?

Test Screenshot

(Optional) Additional Description

왜 A11yOnly 컴포넌트를 사용하지 않았는지

처음에는 접근성 컴포넌트를 활용하여 개선하려고 했지만 다음과 같은 문제 발생했습니다.

default.mov

접근성 컴포넌트를 활용하여 접근성 전용 텍스트를 넣고 시각적 요소에 aria-hidden을 하니 목록이 넘어갔음에도 계속 이전의 목록을 읽었어요. 따라서 접근성 전용 텍스트를 추가하는 것이 아니라 시각적 요소에 접근성 작업을 추가하여 개선했습니다.

🌸 Storybook 배포 주소

https://woowacourse-teams.github.io/2024-ddangkong/storybook/