Skip to content

fix: 디자인 시스템 접근성·토큰·드롭다운 잘림 개선 - #230

Merged
yoon6yo merged 4 commits into
mainfrom
feature/design-system-a11y
Oct 21, 2026
Merged

yoon6yo merged 4 commits into
mainfrom
feature/design-system-a11y

Conversation

@yoon6yo

@yoon6yo yoon6yo commented Oct 21, 2026

Copy link
Copy Markdown
Contributor

변경

  • 전역 :focus-visible 링, prefers-reduced-motion 대응, decs-spin 키프레임 한 곳으로 통합
  • Modal: Tab 포커스 트랩, 닫을 때 호출 요소로 포커스 복귀
  • 하드코딩 색 10건과 px 간격을 DECS 토큰으로 이전 (화면 변화 없음)
  • Button·Table·Select·ButtonDropdown·SideNavigation·TopNavigation의 JS hover를 CSS(.decs-hv)로 이전
  • ButtonDropdown 메뉴를 body 포털 + position: fixed로 띄워 사용자 관리 테이블에서 잘리던 문제 수정
  • 코드 리뷰 반영: 메뉴 내부 스크롤로 닫히지 않게, 스크롤바 폭 보정, 모달 트랩과 포털 메뉴 충돌 해결, --decs-z-dropdown 토큰

검증

  • eslint src/design-system 에러 0, vite build 성공 (pnpm은 환경 문제로 바이너리를 직접 실행)
  • 브라우저 수동 확인은 하지 못함: 포커스 링, 모달 Tab 순환, hover 색, 드롭다운 위치, reduced-motion 확인 필요

알려진 한계

  • reduced-motion에서 spinner는 3초 주기로 느리게 계속 회전함 (상태 표시 유지 목적)
  • 머지 전 /security-review 필요

🤖 Generated with Claude Code

yoon6yo and others added 4 commits October 21, 2026 11:53
- 전역 :focus-visible 링(--decs-focus-ring)과 decs-spin 키프레임을 base.css 한 곳으로 모음
- prefers-reduced-motion에서 spinner는 느리게, 나머지 transition은 제거
- Modal이 Tab 순환을 가두고 닫을 때 호출한 요소로 포커스를 되돌림

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
- 색 리터럴을 토큰(--decs-text-on-color, --decs-surface-overlay 등)으로 대체
- Button·Table·Select·ButtonDropdown·SideNavigation·TopNavigation의 JS hover를 .decs-hv CSS로 이전
- ButtonDropdown 메뉴를 body 포털 + position:fixed로 띄워 테이블·Container overflow에 잘리지 않게 함

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
토큰과 값이 같은 padding·margin만 var(--decs-space-*)로 옮겨 화면은 그대로임

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
- 메뉴 안 스크롤로는 닫히지 않게 하고, 스크롤바 폭을 빼고 위치를 계산
- 모달 포커스 트랩이 포털된 role=menu 안의 Tab을 건드리지 않고 숨은 요소를 제외
- 드롭다운 z-index를 --decs-z-dropdown 토큰으로 이동

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@yoon6yo
yoon6yo merged commit 7ff6e71 into main Oct 21, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant