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

2025-11-14 20:10:50 +09:00
parent d6510e2b05
commit 602f1eabde
26 changed files with 979 additions and 13 deletions
@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'CSS Tokens Expand',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+}
+
+describe('Exporter CSS tokens - expanded regression', () => {
+  it('includes root var, skip-link base/focus, focus outline, reduced-motion, body font', () => {
+    const out = exportPage(makePage())
+    const css = out.css
+
+    // :root primary color var
+    expect(css).toMatch(/:root\{\s*--primary:\s*#0ea5e9\s*;\s*\}/)
+
+    // body font family includes configured font first
+    expect(css).toMatch(/body\{[^}]*font-family:\s*Inter,\s*system-ui[\s\S]*\}/)
+
+    // skip-link base and focus tokens
+    expect(css).toMatch(/a\.skip-link\{[\s\S]*left:-9999px[\s\S]*\}/)
+    expect(css).toMatch(/a\.skip-link:focus\{[\s\S]*left:1rem[\s\S]*background:[^;]+;[\s\S]*\}/)
+
+    // focus-visible/outline tokens (any focusable)
+    expect(css).toMatch(/button:focus, a:focus, input:focus, select:focus, textarea:focus\{[\s\S]*outline:\s*3px solid\s*#2563eb[\s\S]*outline-offset:\s*2px[\s\S]*\}/)
+
+    // reduced-motion detailed rule
+    expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)\{\s*\*\{\s*transition:\s*none !important;\s*animation:\s*none !important\s*\}\s*\}/)
+  })
+})