Conversation
yyoonngg
had a problem deploying
to
starter-env
GitHub Actions
Failure
🧪 Test Report📊 HTML Report: https://softeerbootcamp-7th.github.io/WEB-Team5-Moong/pr-511/ 리포트에서 확인 가능:
Report generated at: 2026-02-25T14:59:27.740Z |
yyoonngg
force-pushed
the
refactor/#489-improved-accessibility
branch
from
e1f5832 to
8175a06
Compare
Lighthouse report ✨
로그인
온보딩
대시보드
분석
캘린더
저축
예측
가족관리
설정
|
yyoonngg
had a problem deploying
to
starter-env
GitHub Actions
Failure
bonsng
approved these changes
Feb 25, 2026
Collaborator
bonsng
left a comment
bonsng
left a comment
There was a problem hiding this comment.
/noti-fe 끝까지 작은 디테일에 신경 쓰시는 모습이 좋습니다!! Approve 하겠습니다!
| const sortEntry = sortConfig?.find((s) => s.sortBy === col.accessor); | ||
| const isSorted = sortEntry !== undefined; | ||
| const handleClick = () => (isSortable ? onSort?.(col.accessor) : undefined); | ||
| const ariaSortValue = isSortable |
Collaborator
There was a problem hiding this comment.
P2) 이거 매핑 테이블로 분리해도 좋을거 같습니다! 체이닝이 좀 깊은거 같아서..
Collaborator
Author
There was a problem hiding this comment.
넵 좋습니다! 이후 작업에서.. 진행하겠습니다 ㅎ
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.
🚩 연관 이슈
closed #489
⏰ 우선순위(P1,P2,P3)
P1
🔧 작업 내용
WCAG 2.1 AA 기준에 따라 공통 컴포넌트 및 페이지 전반의 웹 접근성을 개선합니다.
공통 컴포넌트
TextInput/AmountInput:aria-invalid,aria-describedby로 에러 메시지 연결,role="alert"추가Dropdown: ESC / Enter / Space / ↑↓ / Tab 완전한 키보드 탐색 지원,aria-invalid추가InfoTooltip:useId()고유 ID 생성,role="tooltip",aria-describedby,aria-expanded추가Loading:role="status",aria-busy="true",.sr-only스크린리더 전용 텍스트 추가DatePickerPopup:role="dialog",aria-modal, ESC 닫기, 네비게이션 버튼aria-label추가Drawer:aria-current="page"추가 — 스크린리더에 현재 페이지 위치 전달레이아웃
ClientModal:useFocusTrap포커스 트랩 적용, ESC 닫기, 모달 열기/닫기 시 포커스 복원Toast/ToastProvider: variant별role="alert"|"status",aria-live="assertive"|"polite"분리Notification:aria-haspopup="dialog",aria-expanded추가CalendarDayCell:aria-current="date",aria-expanded,aria-controls,<aside>시맨틱 태그 적용DataTable:scope="col",aria-sort, 정렬 컬럼 키보드 탐색 지원페이지
<header>,<main>,<section>시맨틱 구조 적용aria-label,aria-hidden정비신규 훅
useFocusTrap: Tab/Shift+Tab을 컨테이너 내부에서만 순환 (WAI-ARIA Dialog Pattern)글로벌
globals.css:.sr-only유틸리티 클래스,prefers-reduced-motion전역 처리 추가📝 고민내용(선택)
ClientModal 포커스 관리 전략
모달이 닫힐 때 포커스를 복원하는 시점을
shouldRender === false로 감지했습니다.isClosing상태(애니메이션 중)에서는 복원하지 않고, 애니메이션이 끝나 실제로 DOM에서 제거된 후 복원하도록 하여 UX 흐름이 자연스럽게 유지됩니다.dropdown variant는 포커스 트랩 미적용
dropdownvariant는 이미useOutsideClick으로 닫힘을 처리하고, 드롭다운 특성상 포커스가 외부로 이동해도 자연스럽습니다. 포커스 트랩은overlayvariant에만 적용했습니다.🏞️ 스크린샷
**Lighthouse 접근성 점수 (Frontend Lighthouse CI 기준)
🗣️ 리뷰 요구사항
useFocusTrap훅을 추가한 이유WCAG 2.1 SC 2.1.2 No Keyboard Trap 및 WAI-ARIA Dialog Pattern에 따르면, 모달이 열린 동안 키보드 포커스는 반드시 모달 내부에 머물러야 합니다.
기존
ClientModal은tabIndex={-1}로 프로그래밍적 포커스만 가능했고, Tab 키를 누르면 포커스가 모달 외부(배경 페이지)로 빠져나가는 문제가 있었습니다. 스크린리더 사용자는 모달이 열린 상태에서 배경 콘텐츠를 탐색하게 되어 문맥을 잃게 됩니다.useFocusTrap은 Tab / Shift+Tab 이벤트를 가로채 포커스를 컨테이너 내부 첫 번째 ↔ 마지막 요소 사이에서만 순환시킵니다. 모달이 닫히면 리스너가 제거되고, 열기 전에 포커스가 있던 요소로 복원합니다.