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

[REFACTOR] 방 설정 모달 접근성 개선 및 제한 시간 추가 반영 #354

Merged
merged 9 commits into from
Oct 21, 2024

Conversation

useon
Copy link
Contributor

@useon useon commented Oct 20, 2024

Issue Number

#352

As-Is

개선 전

default.mov

문제점

카테고리 선택 목록

  1. 어떤 선택 목록인지 알 수 없다.
  2. 목록이 열려있고 스와이프 했을 때 요소로 넘어가지 못한다.
  3. 목록 중 몇 번째인지 알 수 없다.
  4. 목록 중 어느 것이 선택되어 있는지 알 수 없다.
  5. 선택 후 포커스를 잃는다.

라운드, 제한 시간

  1. 어떤 설정 값이 선택되어 있는지 알 수 없다.
  2. 몇 개의 목록 중 몇 번째인지 알 수 없다.

To-Be

개선 후

default.mov

선택 목록

  • 어떤 선택 목록인지 알 수 있다.

📢 카테고리 선택 목록, 현재 선택: 연애, 팝업 버튼, 상자 팝업, 피커를 활성화 하려면 이중탭 하십시오.

  • 목록이 열려있고 스와이프를 했을 때 다음 요소를 읽을 수 있다.

📢 카테고리 선택 목록 -> 연애 -> 만약에 -> MBTI -> 음식

  • 목록의 시작과 끝을 알 수 있다.

📢 연애 목록 시작 -> ... -> 음식 목록 끝

  • 해당 옵션이 선택되어 있는지 알 수 있다.

📢 선택됨 음식

  • 옵션 선택 후 포커스가 다시 선택 목록이 된다.

라운드, 제한 시간

  • 어떤 설정 값이 선택되어 있는지 알 수 있다.

📢 5 선택 버튼 선택됨

  • 몇 개의 옵션 중 몇 번째인지 알 수 없다.

📢총 3개 중 1번째

Check List

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

Test Screenshot

(Optional) Additional Description

해당 자료들을 참고하였습니다 ✨
https://nuli.navercorp.com/community/article/1133219
https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/

🌸 Storybook 배포 주소

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

@useon useon added ♻️ refactor 리팩토링 🫧 FE front end labels Oct 20, 2024
@useon useon added this to the FE Sprint6 milestone Oct 20, 2024
@useon useon self-assigned this Oct 20, 2024
@useon useon linked an issue Oct 20, 2024 that may be closed by this pull request
2 tasks
Copy link
Contributor

@rbgksqkr rbgksqkr left a comment

Choose a reason for hiding this comment

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

완뇨!

@@ -16,64 +16,80 @@ import ArrowUp from '@/assets/images/arrowUp.svg';
interface DropdownProps<T> {
text: string;
optionList: T[];
handleClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
handleClickOption: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
Copy link
Contributor

Choose a reason for hiding this comment

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

💭 질문 💭

이벤트 안에 또 이벤트가 있는 이유가 있나요?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

동일한 이름을 가진 MouseEvent 타입인데 다릅니다 !! 하나는 React의 Synthetic Event 타입, 다른 하나는 브라우저의 네이티브 이벤트 타입입니다 !!! 생략할 수 있는데 그러면 기본적으로 MouseEvent입니다. 명시적으로 작성했는데, 통일해서 생략하여 수정하도록 하겠습니다. ^. ^

@useon
Copy link
Contributor Author

useon commented Oct 21, 2024

오프라인 코드 리뷰 후 변경 사항 반영하여 머지합니다 ✨🚀

@useon useon merged commit 7bb596b into develop Oct 21, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🫧 FE front end ♻️ refactor 리팩토링
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

[REFACTOR] 방 설정 모달 접근성 개선 및 제한 시간 추가 반영
3 participants