76 lines
3.0 KiB
TypeScript
76 lines
3.0 KiB
TypeScript
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')
|
|
})
|
|
})
|