[fix-204/faq-accordion-a11y] FAQ 아코디언 자바스크립트 비활성 환경 접근성 수정 - #205
Merged
Conversation
자바스크립트 없으면 하이드레이션이 없어 isOpen 초기값이 SSR 시점에 고정되고, aria-hidden과 grid-template-rows도 함께 굳어져 닫힌 답변이 sighted/스크린리더 사용자 모두에게 노출되지 않는 문제 수정. - aria-hidden 제거로 열림 상태와 무관하게 항상 접근성 트리에 노출 - scripting:none 미디어쿼리로 무자바스크립트 환경 시각적 확장 Closes #204
9 tasks
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Merged
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.
Summary
aria-hidden제거와scripting: noneCSS 규칙 추가로, 자바스크립트/스크린리더 유무 4가지 조합 모두에서 답변에 접근 가능해집니다.Why
왜 이 작업을 진행했나요?
FaqAccordionItem.tsx의 접근성 문제를 지적했습니다: 자바스크립트가 없으면 하이드레이션이 일어나지 않아isOpen의 SSR 초기값이 그대로 굳어지고,defaultOpen이 없는 3개 항목의 답변이grid-template-rows: 0fr로 영구히 접힌 채 노출되지 않습니다.Decision
어떤 구현 방식을 선택했나요?
faq-answer-panel)를 부여하고,globals.css의@media (scripting: none)블록에grid-template-rows: 1fr !important규칙을 추가해 무자바스크립트 환경에서 시각적으로 항상 펼쳐지도록 했습니다. 기존에 같은 미디어쿼리로.reveal-on-scroll을 처리하던 패턴을 그대로 재사용했습니다.aria-hidden={!isOpen}을 제거했습니다. 이 값은 SSR 시점에 고정되어 자바스크립트가 없으면 절대 바뀌지 않는데, CSS로는aria-hidden같은 DOM 속성을 제어할 수 없어 CSS 수정만으로는 스크린리더+무자바스크립트 조합을 해결할 수 없었습니다. 속성을 아예 제거해 열림 상태와 무관하게 항상 접근성 트리에 노출되도록 했습니다.aria-hidden을 다르게 렌더링하는 방법은 SSR 시점에 클라이언트의 자바스크립트 실행 여부를 알 수 없어 불가능합니다. 아코디언 구조를 native<details>/<summary>로 전환하는 방법은 PR #202에서 개폐 트랜지션의 크로스브라우저 지원 문제로 이미 검토 후 제외되어, 이번 범위에서 다시 고려하지 않았습니다.Changes
무엇이 변경되었나요?
Fix
FaqAccordionItem.tsx: 답변 패널의aria-hidden={!isOpen}제거,faq-answer-panelclass 추가globals.css:@media (scripting: none)에.faq-answer-panel대상grid-template-rows강제 확장 규칙 추가Trade-off
한계와 트레이드오프
aria-hidden을 제거하면서, 자바스크립트가 켜진 상태에서도 스크린리더 사용자는 시각적으로 닫힌 패널의 답변까지 항상 들을 수 있게 됩니다. 일반적인 ARIA 아코디언 패턴(닫힌 패널은 접근성 트리에서도 숨김)과는 다르지만, FAQ 기능의 기존 설계 목표(콘텐츠 항상 노출)를 따른 의도적인 선택입니다. 답변이 짧은 텍스트라 실사용 영향은 크지 않다고 판단했습니다.Impact
기존 기능에 미치는 영향
FaqAccordionItem과globals.css의scripting: none블록 외 다른 컴포넌트/화면에는 영향이 없습니다.Edge Cases
Edge Case 및 실패 시나리오
aria-hidden이 없어 접근성 트리에도 항상 노출됩니다.aria-hidden만 제거되어 스크린리더가 닫힌 패널 답변도 함께 읽을 수 있습니다(Trade-off 참고).Review Points
리뷰어가 집중해서 봐야 할 부분
🔴 High
aria-hidden제거로 인한 접근성 동작 변화(스크린리더가 닫힌 패널도 읽음)가 이 프로젝트 기준에서 허용 가능한 트레이드오프인지🟡 Medium
@media (scripting: none)규칙이 실제 자바스크립트 비활성 브라우저에서 의도대로 적용되는지Validation
어떻게 검증했나요?
.env미비로 별개 실패)