feat(blog): 드롭다운·모바일 사이드바 접근성 보강 (#87)

[Malloc72P]

개요

#87 — 드롭다운 메뉴와 모바일 사이드바의 키보드·스크린리더 접근성을 보강한다. search-modal.tsx에 이미 구현된 Esc·포커스 트랩 패턴을 레퍼런스로 삼았다.

변경 사항

드롭다운 메뉴 (dropdown-menu.tsx)

• 트리거 <div onClick> → <button> (디스클로저 패턴)
• aria-expanded(열림 상태) + aria-controls(목록 id, useId) 연결
• Esc로 닫고 트리거로 포커스 복귀
• 장식용 chevron 아이콘 aria-hidden

모바일 사이드바 (mobile-sidebar.tsx)

• 트리거/닫기 <div onClick> → <button aria-label> ("메뉴 열기" / "메뉴 닫기")
• 트리거 aria-expanded/aria-controls, 패널 role="dialog"/aria-modal/aria-label
• Esc 닫기 + Tab 포커스 트랩
• 열림 시 닫기 버튼으로 포커스 이동, 닫힘 시 트리거로 포커스 복귀
• 닫힌 동안 패널 inert — 화면 밖 링크를 탭 순서/스크린리더에서 제외 (WCAG 2.1.1/2.1.2/4.1.2/1.1.1)

테스트

• mobile-sidebar.test.tsx: 아이콘 클래스 의존 제거 → 역할/이름(getByRole) 기반으로 전환 + aria-expanded·Esc·inert·포커스 이동 검증 추가
• dropdown-menu.test.tsx 신설: aria-expanded 토글 / aria-controls 연결 / Esc 닫기

검증

• pnpm test — 14 suites / 54 tests 통과
• pnpm lint — 통과 (max-warnings 0)
• pnpm build — 컴파일 성공

Closes #87

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
blog	Ignored	Preview	Jun 25, 2026 12:38pm

[Malloc72P]

코드 리뷰 + 반영 (commit 189a3f8)

4개 관점(ARIA 시맨틱·키보드/포커스·React 정확성·테스트)으로 검토 후 적대적 검증을 통과한 항목입니다. in-scope 3건은 이번 커밋에 반영했습니다.

#	위치	심각도	내용	처리
1	mobile-sidebar.tsx 패널	major	aria-modal="true"인데 배경을 inert로 만들지 않아 보조기술 약속과 실제 동작 불일치 (헤더·본문이 가상 커서로 도달 가능)	✅ aria-modal 제거 — role=dialog + 포커스 트랩 + 스크롤 잠금은 유지
2	mobile-sidebar.tsx 리사이즈	major→minor	리사이즈로 닫힐 때 md:hidden 트리거에 .focus() → 포커스가 body로 유실	✅ 명시적 닫기(닫기 버튼/Esc)에서만 트리거로 복귀하도록 분기
3	mobile-sidebar.tsx 패널	minor	배경 스크림(backdrop) 부재	⚪ N/A — 패널이 w-full로 화면 전체를 덮어 노출되는 배경이 없음. (검증 에이전트도 a11y 논거는 과장이라고 판정)
4	dropdown-menu.tsx	minor	Tab으로 포커스가 영역 밖으로 나가도 드롭다운이 닫히지 않음	✅ onBlur(focusout)에서 relatedTarget이 영역 밖이면 닫기

후속 권장 (이번 PR 범위 밖)

완전한 모달 격리(배경 inert)는 패널을 portal로 body 최상위에 올리고 다른 형제에 inert를 적용해야 합니다. 이는 search-modal.tsx도 동일하게 가진 한계라, 두 오버레이를 함께 다루는 별도 작업으로 분리하는 것이 적절합니다.

검증

• pnpm test — 14 suites / 56 tests 통과
• pnpm lint — 클린 / pnpm build — 성공