안녕하세요, 코드 챌린지 참가자 여러분! 이번 챌린지에 참여해 주셔서 진심으로 감사드립니다. 바쁜 일정 중에도 시간을 내어 과제를 제출해 주신 덕분에 의미 있는 검토 과정을 진행할 수 있었습니다.

우선 제출해 주신 과제들을 하나하나 꼼꼼히 검토하다 보니 예상보다 시간이 많이 소요되어 결과 공유가 늦어진 점 양해 부탁드립니다. 각자의 코드와 접근 방식을 세심하게 살펴보며 최대한 공정하고 건설적인 피드백을 제공하고자 노력했습니다.

이번 검토 결과는 리뷰어의 주관적인 관점이 반영된 것이므로, 정확하지 않거나 놓친 부분이 있을 수 있음을 미리 말씀드립니다. 혹시 결과에 대해 궁금한 점이나 추가 설명이 필요한 부분이 있으시면 언제든 문의해 주시기 바랍니다.

목차

이번 챌린지에서 중요하게 생각했던 요소는 어떤게 있었나요?

아무래도 이번 과제는 접근성 이 주제였던 만큼 모달과 폼 요소의 접근성을 얼마나 잘 챙겼는지를 집중적으로 보았어요.

먼저, 모달의 경우 키보드 컨트롤 , 스크롤 처리 , 포커스 처리 와 같은 부분을 어떻게 처리했는지 리뷰했어요.

const Modal = (props) => (
  <div
    aria-modal="true"
    aria-labelledby={props.title}
    aria-describedby={props.description}
    role="dialog"
    {...props}
  />
);

useEffect(() => {
  if (open) {
    document.body.style.overflow = 'hidden';
  }

  return () => {
    document.body.style.overflow = '';
  };
}, [open]);

 useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape" && isOpen) {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener("keydown", handleKeyDown);
    }

    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [isOpen, onClose]);

  const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
    if (event.target === event.currentTarget) {
      onClose();
    }
  };

다음으로, 폼도 모달과 마찬가지로 필드와 에러 항목에 대한 전체적인 접근성 속성 , 시멘틱 요소와 타입 속성 활용 , 논리적 탭 을 얼마나 잘 구현했는지를 중점적으로 확인해보았어요.

<label htmlFor={inputId}>
  {labelText}
</label>
<input
  ref={ref}
  id={inputId}
  aria-invalid={error ? 'true' : 'false'}
  aria-describedby={describedBy}
  aria-required={required}
  {...props}
/>