[FE] 리뷰 작성 페이지에서 동적으로 에러가 생기는 경우, 해당 에러를 읽어주는 기능

[ImxYJL]

• resolves [FE] 리뷰 작성 페이지의 동적 에러 메세지를 읽어주는 기능을 추가한다. #890

---

🚀 어떤 기능을 구현했나요 ?

• 에러 메세지가 나타났을 때 포커스를 주는 훅 개발
• 위 훅을 이용해 에러 메세지가 나타난 경우 스크린 리더가 즉시 읽게 하는 기능 추가

🔥 어떻게 해결했나요 ?

에러 메세지 읽기

• 원래 aria-live: ‘assertive’로 에러 메세지가 뜨면 읽게 하려고 했습니다.
• 그런데 assertive로 설정해도 메세지가 뜨면 포커스가 갑자기 화면(웹뷰) 전체로 나가면서 “리뷰미, 최대 2개까지~”로 읽어주더라고요. 사용자가 바로 알아야 하는 정보 앞에 사족이 붙어서 사용자 입장에서 조금 당황스러울 수 있을 것 같았습니다.
• 그래서 useRef와 useEffect를 사용해 메세지가 활성화될 때 focus를 강제로 옮겨 메세지만 바로 읽어주도록 했습니다. 뭔가 화려한 훅들이 2개나 붙었지만 메세지를 바로 읽어주지 않으니 사용성이 떨어지더라구요.
  • “리뷰미”를 먼저 읽고 에러 메세지를 읽어주는 게 큰 불편함이 없다는 의견이 많다면 aria-live만 살려도 될 것 같습니다.

• 그런데! 객관식 체크 문구인 “2개 이상 선택할 수 없어요~~~”는, 이미 2개를 선택한 상황에서 다른 문항을 선택하려고 할 때 뜨는 문구라 탭 포커스를 주기가 쉬웠습니다.
• 반면 서술형 에러 문구는 onBlur 이벤트로 띄워서 그런지 (모바일) 스크린 리더를 사용할 때 자연스럽게 onBlur를 트리거하기가 까다로웠습니다. onBlur를 트리거하려고 하면 자꾸 다른 요소가 탭돼서 읽히는 경우가 훨씬 많아서, 어쩔 수 없이 2차 방어를 위해 aria-live: ‘assertive’ 도 추가했습니다.
  • aria-live가 트리거되면 “리뷰미, 최대 20자까지…”로 읽어서 조금의 딜레이가 생기긴 하지만 에러 메세지가 생기면 무조건 읽어줍니다.

useFocusMessage 훅

• 일단 메세지를 보여주는 요소만 커버하는 네이밍으로 지었습니다. 확장성이 더 필요한 것 같다면 이름 추천해주세요~~ 일단 ref 타입은 제네릭으로 받고 있어요

📝 어떤 부분에 집중해서 리뷰해야 할까요?

📚 참고 자료, 할 말

[BadaHertz52]

이모지는 읽어주지 않는게 좋을 것 같아요. 이모지를 이미지로 빼서, alt ="" 로 하는 것 추천합니다.

[BadaHertz52]

올리 스크린 리더기 사용하면서 구현하느라 고생했어요
갤럭시 talkback 으로 메세지 읽어주는 것 확인했어요

이모지를 읽어주는게 당황스럽지만, 큰 문제는 아니고 배포가 앞에 있어서 우선 approve할게요. 시간날 때 해당 사항도 고치면 좋겠습니다.

[soosoo22]

에러 메시지 읽어주는 것 확인했습니다~~ 올리 수고했어요!!

[chysis]

코드 확인했어요! 오전 중으로 스크린 리더 확인해서 Approve하겠습니다 :)

[chysis]

스크린 리더로 에러 읽어주는 것 확인했습니다 :)