Refactor/285/모달접근성개선

[LMS10]

❓이슈

• close Refactor: 모달 접근성 개선 #285

📝 Description

노션 보러가기

모달의 접근성을 개선하여 키보드 사용자 및 스크린 리더 사용자도 문제없이 사용할 수 있도록 다음과 같은 작업을 수행했습니다.

---

1. focusTrap 유틸 함수 추가

• Tab 및 Shift + Tab 키를 통해 모달 내 포커스가 순환되도록 focusTrap 유틸 함수를 구현했습니다.
• 모달 외부로 포커스가 나가지 않도록 방지하여 키보드 사용자의 접근성을 높였습니다.

focusTrap(e: React.KeyboardEvent, container: HTMLElement | null)

---

2. 초기 포커스 제어 기능 추가

• 모달이 열릴 때 useLayoutEffect를 통해 자동으로 내부의 첫 번째 input 요소나 initialFocusRef로 지정된 요소에 포커스를 이동시킵니다.
  • 모달 내부에 <input>이 없는 경우, 모달 내부에 숨겨진 tabIndex={-1} 포커스용 요소를 추가하고, 모달이 열릴 때 해당 요소에 강제로 포커스를 줘서 포커스트랩이 올바르게 동작하도록 구현하였습니다.
• setTimeout을 사용해 렌더 이후 포커스가 정확히 작동되도록 타이밍을 조정했습니다.
  • ProfileEditModal이 열릴 때, UploadPreview 내부의 file input에 포커스가 가게 하는 게 목표였습니다. 그런데 file input이 아직 마운트 안 되었을 때 포커스를 실행해 setTimeout(() => ..., 0)으로 포커스를 한 틱 늦춰 실행하여 해결하였습니다.

---

3. ModalBase 내 aria 속성 및 역할(role) 추가

• 스크린 리더가 모달을 올바르게 인식하도록 role="dialog"와 aria-modal="true"를 추가했습니다.
• aria-labelledby로 제목 요소와 연결되도록 titleId props를 통해 관리합니다.
• 모달 외부는 aria-hidden으로 접근 불가 영역임을 명시했습니다.

---

4. 모달 사용하는 컴포넌트에도 제목 요소 연결

• ModalBase를 사용하는 컴포넌트에 titleId props를 전달하고, 실제 <h2> 요소와 id를 매칭하여 스크린 리더가 읽을 수 있도록 설정했습니다.
• <h2>는 시각적으로 숨기되(sr-only), 접근성 상 제목으로 인식되도록 처리했습니다.

<ModalBase titleId="profile-modal-title" ... >
  <h2 id="profile-modal-title" className="sr-only">프로필</h2>

---

5. 결과

• 키보드 내비게이션 향상
• 스크린 리더 인식 개선
• 사용자 경험 향상

---

modal-a11y-improvement.mp4

🌀 PR Type

어떤 변경 사항이 있나요?

• 새로운 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 코드에 영향을 주지 않는 변경사항 (오타 수정, 탭 사이즈 변경, 변수명 변경)
• 코드 리팩토링
• 주석 추가 및 수정
• 문서 수정
• 테스트 추가, 테스트 리팩토링
• 빌드 부분 혹은 패키지 매니저 수정
• 파일 혹은 폴더명 수정
• 파일 혹은 폴더 삭제

PR

• Branch Convention 확인

  feat/* 기능 구현, fix/* 버그 수정, refactor/* 개선

• Base Branch 확인
• 적절한 Label 지정
• Assignee 및 Reviewer 지정

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
epigram-gilv	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 8, 2025 2:52am

[github-actions]

Storybook URL: https://storybook-static-lgbcds1pt-cksrlcks-projects.vercel.app

[github-actions]

Storybook URL: https://storybook-static-lmazny194-cksrlcks-projects.vercel.app

[github-actions]

Storybook URL: https://storybook-static-8wge51cty-cksrlcks-projects.vercel.app

[cksrlcks]

고생하셨습니다.
드롭다운쪽 충돌건 수정해서 커밋해두었습니다!
그리고 민서님처럼 드롭다운에서 사용되는 포커스트랩 함수를 분리해두었어요! 👍