fix(blog): 모바일 사이드바 Esc 닫기를 포커스 위치와 무관하게 동작시킴#133
Merged
Conversation
- 열려 있는 동안 document 레벨 keydown 리스너로 Escape를 수신해 포커스가 body로 빠져도 닫히게 함 - 래퍼 onKeyDown에서는 Escape 분기를 제거하고 Tab 포커스 트랩만 유지(중복 호출 방지) - 포커스가 패널 밖(body)에 있을 때 Esc로 닫히는 회귀 테스트 추가
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
- document Esc 리스너가 무조건 닫던 것을, 포커스가 패널 밖 인터랙티브 요소(상위 모달)에 있으면 양보하도록 수정 - 포커스가 body로 빠진 원래 버그 케이스는 그대로 닫히고, 검색 모달 등 상위 모달과의 Esc 동시 닫힘 회귀 제거 - mobile-sidebar·mobile-toc 동일 패턴 반영 + 양보 동작 회귀 테스트 추가
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
1 participant
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.
배경
PR #132(모바일 목차) 리뷰 중 발견된, 모바일 사이드바의 형제 결함입니다. GitHub 이슈는 없습니다.
증상
document.body로 떨어지면, Esc를 눌러도 사이드바가 닫히지 않았습니다.원인
onKeyDown이 패널 래퍼div에 바인딩돼 있어, 포커스가 body로 빠지면 keydown 이벤트가 래퍼까지 버블링되지 않았습니다.role="dialog"+aria-modal="true"를 선언한 이상, WAI-ARIA dialog 패턴대로 Esc는 포커스 위치와 무관하게 동작해야 합니다.수정
document레벨 keydown 리스너를 등록하는useEffect를 추가하고, Escape 시 사이드바를 닫습니다.open이 false가 되면 리스너를 해제합니다. (PR #132에서mobile-toc.tsx가 동일 문제를 해결한 패턴을 재사용)onKeyDown에서는 Escape 분기를 제거하고 Tab 포커스 트랩만 유지해 중복 호출을 방지합니다.검증
pnpm run build성공pnpm run lint통과 (--max-warnings 0)pnpm test(apps/blog) 통과 — 113 tests, mobile-sidebar 10 tests