현황
- 드롭다운(
apps/blog/src/components/dropdown-menu.tsx): 트리거가 <div onClick>, 바깥 클릭으로만 닫힘, Esc 핸들러 없음
- 모바일 사이드바(
apps/blog/src/components/mobile-sidebar.tsx): 트리거·닫기가 <div onClick>, Esc·포커스 트랩·포커스 복귀 없음. 닫혀도 translate-x-full로 화면 밖에 남아 사이드바 링크가 Tab 순서에 포함됨. 햄버거(IconMenu2)·닫기(IconX) 버튼에 라벨 없음.
문제
키보드 사용자가 메뉴를 열거나 Esc로 닫지 못한다(WCAG 2.1.1/2.1.2). 닫힌 사이드바의 화면 밖 링크로 포커스가 빠진다. 스크린리더가 메뉴 버튼의 존재·기능을 인지하지 못한다(4.1.2/1.1.1).
(참고: search-modal.tsx에는 Esc·포커스 트랩이 이미 구현돼 있어 좋은 레퍼런스다.)
제안
- 트리거를
<button aria-expanded aria-controls aria-label>로 교체, Esc 닫기 추가
- 닫힘 상태에서 내부 포커스 요소 비활성(
inert 또는 조건부 미렌더), 닫을 때 트리거로 포커스 복귀
임팩트 / 난이도
임팩트 상 / 난이도 중
🤖 코드베이스 조사 기반 작성 (Claude Code)
현황
apps/blog/src/components/dropdown-menu.tsx): 트리거가<div onClick>, 바깥 클릭으로만 닫힘, Esc 핸들러 없음apps/blog/src/components/mobile-sidebar.tsx): 트리거·닫기가<div onClick>, Esc·포커스 트랩·포커스 복귀 없음. 닫혀도translate-x-full로 화면 밖에 남아 사이드바 링크가 Tab 순서에 포함됨. 햄버거(IconMenu2)·닫기(IconX) 버튼에 라벨 없음.문제
키보드 사용자가 메뉴를 열거나 Esc로 닫지 못한다(WCAG 2.1.1/2.1.2). 닫힌 사이드바의 화면 밖 링크로 포커스가 빠진다. 스크린리더가 메뉴 버튼의 존재·기능을 인지하지 못한다(4.1.2/1.1.1).
(참고:
search-modal.tsx에는 Esc·포커스 트랩이 이미 구현돼 있어 좋은 레퍼런스다.)제안
<button aria-expanded aria-controls aria-label>로 교체, Esc 닫기 추가inert또는 조건부 미렌더), 닫을 때 트리거로 포커스 복귀임팩트 / 난이도
임팩트 상 / 난이도 중
🤖 코드베이스 조사 기반 작성 (Claude Code)