[fix-204/faq-accordion-a11y] FAQ 아코디언 자바스크립트 비활성 환경 접근성 수정

[hm1n]

Summary

• PR [release] v2.4.0 #203 코드 리뷰(Codex, P2)에서 지적된 FAQ 아코디언 접근성 문제를 수정합니다.
• 자바스크립트 비활성 환경에서 닫힌 답변 패널이 시각적으로도, 스크린리더 접근성 트리에서도 노출되지 않는 문제를 해결합니다.

---

Why

해결하려는 문제가 무엇인가요?

• FaqAccordionItem의 isOpen 초기값(defaultOpen이 없는 항목은 false)이 SSR 시점에 그대로 굳어집니다. 자바스크립트가 없으면 하이드레이션이 일어나지 않아 상태를 바꿀 방법이 없습니다.
• 인라인 스타일 gridTemplateRows: isOpen ? '1fr' : '0fr'와 aria-hidden={!isOpen} 값이 영구 고정되어, 4개 항목 중 3개(첫 번째만 defaultOpen) 답변이 시각적으로도, 스크린리더 접근성 트리에서도 노출되지 않습니다.
• PR [feature-77/faq-landing-page] FAQ 콘텐츠 랜딩페이지 추가 #202 본문에 명시된 설계 목표("답변 본문은 열림/닫힘 상태와 무관하게 항상 서버에서 렌더링되며, 검색 로봇과 자바스크립트 미지원 환경에서도 콘텐츠를 읽을 수 있습니다")와 실제 동작이 모순됩니다.
• 지금 해결하지 않으면 자바스크립트가 비활성화되었거나 제한된 환경의 사용자, 그리고 스크린리더 사용자가 FAQ 답변 대부분에 접근할 수 없습니다.

---

Goal

완료되면 무엇이 달라지나요?

• 자바스크립트 활성/비활성 여부와 관계없이, sighted 사용자와 스크린리더 사용자 모두 모든 FAQ 답변에 접근할 수 있습니다.
• Non-goal: 아코디언 구조를 native <details>/<summary> 기반으로 재작성하는 것은 이번 범위에 포함하지 않습니다. PR #202에서 개폐 트랜지션의 크로스브라우저 지원 문제로 이미 검토 후 제외된 방식입니다.

---

Approach

어떻게 해결할 계획인가요?

• (A) src/styles/globals.css의 @media (scripting: none) 블록에 답변 패널을 대상으로 grid-template-rows: 1fr !important 규칙을 추가합니다. 패널에 고정 class를 부여해야 합니다(useId 기반 id는 selector로 부적합).
• (B) FaqAccordionItem.tsx의 답변 패널 div에서 aria-hidden={!isOpen}을 제거합니다. 열림 상태와 무관하게 항상 접근성 트리에 노출되도록 합니다.
• 검토한 대안: aria-hidden을 유지한 채 서버에서 자바스크립트 실행 여부를 분기하는 방법은, SSR 시점에 클라이언트의 자바스크립트 실행 여부를 알 수 없어 불가능합니다. native <details> 전환은 PR #202에서 트랜지션 요구사항 때문에 이미 제외된 방식이라 이번 범위에서 다시 검토하지 않습니다.
• (A)만 적용하면 sighted 무자바스크립트 사용자는 해결되지만 스크린리더+무자바스크립트 조합은 여전히 해결되지 않습니다. (B)만 적용하면 접근성 트리 문제는 해결되지만 무자바스크립트 sighted 사용자의 시각적 접힘 문제는 남습니다. 두 가지를 함께 적용해야 모든 조합(sighted/스크린리더 × 자바스크립트 유무)이 해결됩니다.

---

Tasks

• FaqAccordionItem.tsx 답변 패널에 고정 class 추가 (예: faq-answer-panel)
• globals.css의 @media (scripting: none)에 해당 class를 대상으로 grid-template-rows 강제 확장 규칙 추가
• FaqAccordionItem.tsx 답변 패널의 aria-hidden={!isOpen} 제거
• 자바스크립트 비활성화 상태에서 4개 항목 모두 시각적으로 펼쳐지는지 수동 확인
• 스크린리더로 닫힌 패널 답변도 읽히는지 확인 (자바스크립트 켜짐/꺼짐 각각)

---

Constraints

• 자바스크립트 활성 상태에서의 아코디언 열림/닫힘 트랜지션 동작은 기존과 동일하게 유지합니다.
• FaqAccordionItem 외 다른 컴포넌트/화면에 영향을 주면 안 됩니다.
• native <details>/<summary> 방식으로 전환하지 않습니다(PR #202의 기존 결정 유지).

---

Definition of Done

• 기능 동작 확인 (자바스크립트 켜짐/꺼짐 각각)
• 스크린리더로 접근성 트리 노출 여부 확인 (자바스크립트 켜짐/꺼짐 각각)
• lint / typecheck 통과
• 문서 업데이트 (해당 사항 없으면 생략 가능)