test: expand exporter/css/a11y/i18n regressions and add e2e skip-link focus check

MAIN_PLAN.md

@@ -75,6 +75,12 @@
 - Exporter CSS 토큰 스냅샷: skip-link/focus outline/반응형/모션 감소 토큰 존재 검증
 - Features/Testimonials `aria-labelledby`/헤딩 id 일치 검증 추가
 - Exporter 헤딩 레벨 일관성 전수 테스트(hero=h1, others=h2, FAQ=h3) 추가
+- Exporter 색상/타이포그래피 토큰 스모크 테스트 추가
+- Exporter(Form): helptext ↔ aria-describedby 연결 TDD 완료
+  - 각 필드 `id=field-<name>`와 `<label for>` 연결
+  - `help`가 있을 경우 `id=field-<name>-help` 요소 생성 및 컨트롤에 `aria-describedby` 부여
+  - 라디오 그룹은 `fieldset`에 `aria-describedby` 적용, 옵션별 `id/htmlFor` 연결
+- next-intl 기본 timeZone 설정: `Asia/Seoul`로 ENVIRONMENT_FALLBACK 경고 제거
 - a11y 색/폰트 최소 기준 스모크(본문 컬러/폰트 패밀리/모바일 h1 폰트 크기) 추가
 - CTA 섹션에 `aria-labelledby` + `<h2 id="cta-heading">` 추가(헤딩 레벨 일관성)
 - 전체 테스트 그린(유닛/컴포넌트/E2E)
@@ -85,6 +91,20 @@
 - Inspector 키보드 UX 스모크: Features/Testimonials 항목 삭제(Remove) Enter/Space 검증 추가
 - 인스펙터 Remove 버튼 키보드 처리(onKeyDown/onKeyUp) 반영
 - Exporter 회귀 스냅샷: heading/ARIA/반응형 토큰 통합 검증 추가
+ - Preview 토글 ARIA 회귀 스냅샷(Desktop/Mobile: aria-pressed/controls/describedby)
+ - Exporter CSS 토큰 회귀 확대(:root --primary, body font, skip-link base/focus, focus outline, reduced-motion)
+ - 컴포넌트 i18n 회귀 스냅샷(en/ko 주요 라벨/버튼 키 존재)
+ - 섹션 a11y 자동 검증 템플릿(testUtils/sectionA11y) 도입 및 템플릿 테스트 추가
+ - 신규 섹션 추가: Benefits
+  - 스키마 확장(`benefits`): props.items:string[]
+  - Exporter 렌더 추가: `<section class="benefits" aria-labelledby>`, `<h2 id="benefits-heading">`, 리스트 렌더
+  - 테스트: sections.benefits.test.ts (h2/aria-labelledby/리스트 아이템 검증)
+- 섹션 회귀 스냅샷(benefits 포함) 보강: sections.regression.benefits.test.ts 추가(ARIA/헤딩/리스트 구조 전수 검증)
+- 섹션 회귀 스냅샷(CTA/Testimonials): sections.regression.cta-testimonials.test.ts 추가(figure/blockquote/figcaption, CTA 링크 클래스/URL 검증)
+- 섹션 회귀 스냅샷(Features/FAQ): sections.regression.features-faq.test.ts 추가(리스트/클래스/아이템 수 검증)
+- Exporter 이스케이프 회귀: sections.escape.regression.test.ts 추가(특수문자 <, >, &, ") 안전 이스케이프 검증)
+- 인스펙터 a11y 자동 체크 헬퍼 도입: components/testUtils/inspectorA11y.ts + 템플릿 테스트 2종(InspectorA11y.template/sections)
+- i18n 회귀 확장: Sidebar Add 버튼군(en/ko) 라벨 스모크(i18n.sidebar.actions.test.tsx)
 - E2E 스모크: 프리뷰/Export 마커(heading/ARIA/반응형 CSS) 존재 검증 추가
 - SEO description 기본값 설정으로 Export 스키마 안정화
 - 프리뷰 토글 버튼에 `aria-controls="preview-container"` 추가로 제어 영역 명시
@@ -124,6 +144,19 @@
 - CI verification note: 러너 온라인 이후, 사소 변경으로 CI 트리거 검증 예정
   - CI rerun: 워크플로 재실행용 ping 커밋
 
+#### 결과: CI 통과 (self-hosted Gitea Actions)
+- PR: https://gitea.jaybe.dev/jaybe/landing-builder/pulls/2
+- 러너: self-hosted, labels: [macos, host]
+- 테스트: Unit/Component + E2E 총 7/7 green
+- 수정 요약(E2E 포커스):
+  - 초기 포커스 선점 방지: `body` 클릭으로 포커스 부여
+  - 스킵링크 등 선행 포커서블 회피: Desktop 버튼에 명시적 `focus()`
+  - 키보드 시나리오: Tab → Mobile 포커스 확인 → Space로 토글 → Shift+Tab → Enter
+
+#### 머지 상태
+- 머지 방식: Squash and merge
+- 브랜치 정리: `feat/ci-verify-run` 삭제 완료
+
 ### 다음 스프린트 후보 과제
 - Exporter 회귀 스냅샷 보강(폼 토큰/검증 토큰 범위 확대)
 - 인스펙터 신규 섹션 추가 시 a11y 베이스라인 재사용 가이드 마련
@@ -134,12 +167,39 @@
 ## 마일스톤
 1. 스캐폴딩 및 테스트 환경 구성
 2. 스키마 정의(Zod) 및 HTML Exporter TDD
-3. 폼 엔진 TDD(필드/검증/스팸 방지)
-4. 에셋 매니저 TDD(업로드/메타/해싱/참조 재작성)
-5. Google Sheets 연동(Apps Script 템플릿) TDD
-6. 빌더 UI(DnD/미리보기/i18n) TDD
-7. ZIP 내보내기(JSZip) 및 로컬 에셋 포함 TDD
-8. a11y/SEO/OG/분석 스니펫 TDD + E2E
+3. 컴포넌트/상태관리(Zustand) 및 인스펙터 기본 기능
+4. 접근성/키보드 네비게이션 강화 및 테스트 안정화
+5. CI/CD(Self-hosted Gitea) 연동 및 그린 검증
+
+## 릴리스
+### v0.1.0
+- CI 검증 완료(Self-hosted Gitea runner, labels: [macos, host])
+- E2E 안정화: 초기 포커스 이슈 제거(Desktop 명시 focus), 스킵링크 고려
+- Exporter(Form) a11y: helptext ↔ aria-describedby, id/htmlFor 연결, 라디오 fieldset 설명 연결
+- i18n: en/ko 중첩 구조, 누락 키 보강(builder.action.*, builder.form.*)
+- next-intl: 기본 timeZone=Asia/Seoul 설정으로 ENVIRONMENT_FALLBACK 경고 제거
+- 태그: v0.1.0
+
+## 접근성 베이스라인 가이드(신규 섹션/인스펙터 적용 규칙)
+- **레이블 연결**: 모든 입력은 `id=ins-...` 또는 `id=field-...` 부여, `<label for>`로 연결
+- **헬프텍스트 연결**: 헬프 요소 `id=...-help` 생성, 입력에 `aria-describedby`로 연결
+- **라디오 그룹**: 개별 `<input>` 대신 `<fieldset>`에 `aria-describedby` 적용, 옵션은 `id/htmlFor`로 연결
+- **버튼 네이밍**: 보이는 텍스트 또는 `aria-label`로 안정적 접근 가능한 이름 제공
+- **키보드 활성화**: Enter/Space 활성(onClick와 동일 동작), `focus-visible` 스타일 유지
+- **스킵링크**: `<a class="skip-link">` 제공, 포커스 시 화면 내 표시
+- **헤딩 레벨**: hero=h1, 1뎁스 섹션=h2, FAQ 항목=h3 일관성 유지
+- **미리보기 토글**: 토글 버튼에 `aria-pressed`, `aria-controls`, `aria-describedby` 연결
+- **i18n 키**: 중첩 객체 구조, 신규 키 추가 시 en/ko 동시 보강
+- **테스트 원칙**: TDD로 유닛/컴포넌트/E2E 및 스냅샷 추가. 포커스/ARIA/토큰 스모크 포함
+
+### 적용 가이드(신규 섹션 추가 시)
+- **1) 섹션 구현**: `<section class="<name>" aria-labelledby="<name>-heading">`와 `<h2 id="<name>-heading">` 구성
+- **2) 인스펙터 입력**: `id=ins-...`, `<label for>`, 헬프텍스트 `...-help` + `aria-describedby` 연결
+- **3) Exporter 반영**: 섹션 렌더 함수에 위 구조/속성 부여
+- **4) 테스트 추가**:
+  - 공통 템플릿 사용: `lib/exporter/testUtils/sectionA11y.ts` → `assertSectionA11y(html)`
+  - 샘플: `lib/exporter/sectionA11y.template.test.ts` 참고하여 새 섹션 추가해 검증
+  - 필요 시 개별 스냅샷/스모크: 헤딩/ARIA/키보드/토큰 추가 검증
 
 ## 다음 단계(E2E 초안)
 - 시나리오: 섹션 추가(Hero/FAQ/Features/Testimonials/CTA) → 인스펙터 편집 → Export ZIP 생성 → HTML 메타/섹션/폼 렌더 확인