https://github.com/gnujoow/a11y-modal-test

https://github.com/gnujoow/a11y-modal-test

Last synced: 5 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/gnujoow/a11y-modal-test
• Owner: gnujoow
• Created: 2025-09-20T06:42:57.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2025-09-20T06:59:52.000Z (6 months ago)
• Last Synced: 2025-09-20T08:39:41.636Z (6 months ago)
• Language: TypeScript
• Size: 563 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![접근성 모달폼](preview.gif)

## 📝 구현 주안점

---

- **Portal 기반의 모달 렌더링**

  - React Portal을 활용하여 모달을 DOM의 적절한 위치에 렌더링

  - 컨테이너 독립성을 통한 스타일링 격리

- **Hook 기반 설계**

  - 재사용 가능한 커스텀 훅을 통한 로직 분리

  - 선언적 API를 통한 모달 관리

- **확장성 고려**

  - 새로운 모달 추가 시 contents만 교체하면 되는 구조

  - 모달 타입별 컴포넌트 관리 시스템

## 💡 새롭게 알게된 점

---

- **접근성(a11y) 속성들**

  - `aria-modal`, `aria-labelledby`, `aria-describedby` 등의 ARIA 속성

  - 스크린리더 사용자를 위한 적절한 시맨틱 마크업

  - 포커스 관리와 키보드 네비게이션

- **CSS 속성들**

  - `pointer-events`: 요소의 마우스 이벤트 제어

  - `prefers-reduced-motion`: 사용자의 애니메이션 선호도 감지

## 😔 아쉬운 점

---

- **스타일링 부족**

  - 기능 구현에 집중하느라 시각적 완성도가 부족

  - 더 나은 UI/UX 디자인 적용 필요

- **설계의 아쉬움**

  - 초기 설계부터 체계적으로 접근했어야 함

  - 2시간이라는 시간이 생각보다 짧아 완성도 높은 구현에 한계