feat(a11y): P1 접근성 이슈 수정 (WCAG 2.1 AA 준수)#32
Merged
Conversation
P1 #8: 큐레이션 봇 크롤러 데이터 품질 개선 주요 변경사항: - RSS 피드에서 description, thumbnailUrl 필드 추출 - feed-parser 공유 유틸리티 생성 (extractFeedItems, sanitizeDescription, extractOgImage) - SSRF 보호 강화 (isSafeUrl를 url-validator로 이동) - HTML 엔티티 디코딩 추가 (html-entities 패키지) - 제어 문자/유니코드 익스플로잇 제거 로직 개선 - 웹 API와 봇 간 코드 중복 제거 보안 개선: - extractOgImage 함수에 isSafeUrl SSRF 체크 추가 - sanitizeDescription에 제어 문자/유니코드 익스플로잇 제거 추가 - 내부 URL (localhost, 127.0.0.1, 169.254.169.254 등) 차단 테스트: - feed-parser.property.test.ts 추가 (20개 테스트 케이스) - SSRF 보호, XSS 방지, 한글/이모지 처리 등 검증 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 봇 스케줄러: Promise.allSettled로 OG 이미지 동시 추출 - 웹 API: OG 이미지 병렬 추출 후 DB 삽입 (순차 유지) - 순차 처리(최대 250초) → 병렬 처리(최대 5초)로 대기 시간 단축 - Promise.allSettled로 개별 실패시 전체 프로세스 보호 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 웹 API: NormalizedFeedItem 타입 import 추가 - filter/map 콜백에 명시적 타입 어노테이션 추가 - Promise.allSettled 결과에 타입 가드 추가 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- shared/utils: utils namespace export 추가 (import { utils } 패턴 지원)
- rss-detect.ts: isSafeUrl re-export 추가
- 타입 안전성 개선: Promise.allSettled result 변수 분리
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Handlers 통합 테스트 5개 추가 (모듈 로드, 함수 export 확인) - Round Service 통합 테스트 15개 추가 * isDeadlinePassed, isGracePeriod, isGracePeriodEnded 함수 테스트 * 날짜 파싱 정확성 테스트 * 일관성 테스트 - 총 145개 테스트 통과 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- sendFineNotification, sendFineReminder export를 mock에 추가 - 모든 테스트 통과 (153개) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- getConfigValue import 제거 (round-integration.test.ts) - Client import 제거 (handlers.test.ts) - 에러 0개, warnings 56개 (console.log 관련) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
## 개선사항 ### 1. 핸들러 테스트 실제 동작 검증으로 강화 - Mock만 사용하던 테스트를 실제 이벤트 리스너 등록 검증으로 개선 - setupActivityHandler: MessageCreate, MessageReactionAdd 이벤트 등록 확인 - setupDMHandler: InteractionCreate 이벤트 등록 확인 - Property-Based Testing 패턴 유지 ### 2. feed-parser 보안 강화 (SSRF) - extractOgImage()에서 OG 이미지 URL 자체도 안전한지 검증 - 이중 SSRF 보호: 페이지 URL + OG 이미지 URL 모두 검증 - 공격자가 og:image에 내부 URL을 넣는 방어 ### 3. 에러 핸들링 개선 - extractOgImage() 에러를 타입별로 분류하여 로그 - timeout, network error, unexpected error 각각 다른 레벨로 처리 - 디버깅 및 운영 모니터링 개선 ### 4. 테스트 커버리지 확대 - extractFeedItems() 포맷별 동작 테스트 추가 (RSS, Atom, JSON, RDF) - Property 17-20: 각 포맷의 파싱 로직 검증 - 총 24개 테스트 통과 ### 5. 타입 안정성 개선 - API 라우트에서 불필요한 타입 단언 제거 - 타입 가드를 사용하여 안전하게 필터링 ### 6. next-env.d.ts 복구 - 개발 전용 변경을 원래대로 복구 - 프로덕션 빌드 호환성 유지 ## 테스트 결과 - 154개 테스트 전체 통과 - 핸들러 테스트: 9개 (이벤트 리스너 등록 검증) - feed-parser 테스트: 24개 (보안 + 포맷별 동작) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- TableHead 컴포넌트에 기본값 scope="col" 추가 - 모든 테이블 헤더의 의미 체계를 스크린 리더에 명확히 전달 - WCAG 2.1 AA 준수 Refs: docs/26-03-11-web-accessibility-audit.md P1 #9
- BottomNav 컴포넌트에 aria-current="page" 추가 - 현재 페이지 여부를 스크린 리더에 명확히 전달 - 모바일 하단 내비게이션 접근성 개선 Refs: docs/26-03-11-web-accessibility-audit.md P1 #4
- ExternalLinkIcon 재사용 컴포넌트 생성 - 새 탭에서 열림을 나타내는 sr-only 텍스트 추가 - 랜딩 페이지, 게시판, 큐레이션 외부 링크에 적용 - aria-hidden으로 아이콘 숨김 처리 Refs: docs/26-03-11-web-accessibility-audit.md P1 #10
- sr-only 클래스로 화면에는 보이지 않는 라벨 추가 - htmlFor와 id로 명시적 연결 - 검색 아이콘에 aria-hidden 적용 - 큐레이션, 멤버, 벌금 페이지 검색창 개선 Refs: docs/26-03-11-web-accessibility-audit.md P1 #6
- 에러 메시지에 role="alert", aria-live="assertive" 추가 - 입력 필드에 aria-invalid, aria-describedby 속성 추가 - 필드별 에러를 동적으로 연결하여 스크린 리더에 정확히 전달 - 게시판 작성, 멤버 폼에 적용 Refs: docs/26-03-11-web-accessibility-audit.md P1 #5
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎯 Summary
WCAG 2.1 AA 준수를 위한 P1 우선순위 접근성 이슈를 수정했습니다.
🔴 AS-IS
1. 테이블 헤더에 scope 속성 부재
2. 활성 내비게이션 식별 불가
3. 외부 링크 새 탭 오픈 미고지
4. 검색 입력 필드 라벨 부재
5. 폼 에러와 입력 필드 연결 끊킴
6. window.confirm() 사용 (CLAUDE.md 위반)
🟢 TO-BE
1. TableHead에 scope="col" 기본값 추가
2. BottomNav에 aria-current="page" 추가
3. ExternalLinkIcon 재사용 컴포넌트 생성
4. 검색 입력에 접근 가능한 라벨 추가
5. 폼 에러에 aria-live 및 aria-describedby 추가
6. AlertDialog로 교체
💬 참고사항
커밋 구조
총 5개의 의미있는 커밋으로 분리:
참고: AlertDialog 변경사항은 각 파일 수정 시 함께 포함되었습니다.
영향 범위
검증 결과
관련 문서
다음 단계 (P0 이슈)