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,75 @@
+import { describe, it, expect } from 'vitest'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+
+const makePage = (): Page =>
+  pageSchema.parse({
+    title: 'Form Help A11y',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [],
+    form: {
+      actionUrl: '',
+      fields: [
+        { type: 'text', name: 'name', label: 'Name', required: true, help: 'Your full name' },
+        { type: 'email', name: 'email', label: 'Email', required: true },
+        { type: 'select', name: 'plan', label: 'Plan', required: false, options: ['A','B'], help: 'Choose your plan' },
+        { type: 'radio', name: 'size', label: 'Size', required: false, options: ['S','M','L'], help: 'Pick one size' },
+        { type: 'checkbox', name: 'agree', label: 'Agree', required: true, help: 'You must agree to proceed' },
+        { type: 'textarea', name: 'msg', label: 'Message', required: false },
+      ],
+      spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
+    },
+    seo: { title: 'Form Help A11y', description: 'desc' },
+  })
+
+/**
+ * Requirements (a11y):
+ * - Each control has an id `field-<name>` and its label has htmlFor pointing to it.
+ * - If field.help exists:
+ *   - Render help element with id `field-<name>-help` containing help text.
+ *   - Control has `aria-describedby` referencing the help id.
+ * - For radio group, set aria-describedby on the fieldset instead of individual radios.
+ */
+
+describe('Exporter - form helptext and aria-describedby', () => {
+  it('renders id/htmlFor and help + aria-describedby wiring', () => {
+    const page = makePage()
+    const out = exportPage(page)
+    const html = out.html
+
+    // text with help
+    expect(html).toContain('id="field-name"')
+    expect(html).toContain('<label for="field-name">Name')
+    expect(html).toContain('id="field-name-help"')
+    expect(html).toContain('Your full name')
+    expect(html).toContain('aria-describedby="field-name-help"')
+
+    // email without help → no aria-describedby
+    expect(html).toContain('id="field-email"')
+    expect(html).toContain('<label for="field-email">Email')
+    expect(html).not.toContain('field-email-help')
+
+    // select with help
+    expect(html).toContain('id="field-plan"')
+    expect(html).toContain('<label for="field-plan">Plan')
+    expect(html).toContain('id="field-plan-help"')
+    expect(html).toContain('Choose your plan')
+
+    // radio group help → fieldset has aria-describedby
+    expect(html).toContain('<fieldset')
+    expect(html).toContain('aria-describedby="field-size-help"')
+    expect(html).toContain('id="field-size-help"')
+    expect(html).toContain('Pick one size')
+
+    // checkbox with help
+    expect(html).toContain('id="field-agree"')
+    expect(html).toContain('<label for="field-agree">')
+    expect(html).toContain('id="field-agree-help"')
+    expect(html).toContain('You must agree to proceed')
+
+    // textarea without help
+    expect(html).toContain('id="field-msg"')
+    expect(html).toContain('<label for="field-msg">Message')
+  })
+})