40 lines
1.6 KiB
TypeScript
40 lines
1.6 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { exportPage } from '@/lib/exporter/html'
|
|
import type { Page } from '@/lib/schema/page'
|
|
|
|
const makePage = (overrides: Partial<Page> = {}): Page => ({
|
|
title: 'Fieldset A11y',
|
|
locale: 'en',
|
|
theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
|
|
sections: [],
|
|
form: {
|
|
actionUrl: '',
|
|
fields: [
|
|
{ type: 'radio', name: 'plan', label: 'Plan', options: ['Basic','Pro'], required: false, help: 'Choose your plan' },
|
|
],
|
|
spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
|
|
},
|
|
analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
|
|
seo: { title: 'T', description: 'D' },
|
|
...overrides,
|
|
})
|
|
|
|
describe('Exporter - radio fieldset a11y', () => {
|
|
it('fieldset gets aria-describedby to help id; legend equals label; options share name', () => {
|
|
const page = makePage()
|
|
const { html } = exportPage(page)
|
|
|
|
// fieldset with describedby
|
|
expect(html).toMatch(/<fieldset[^>]*aria-describedby="field-plan-help"/)
|
|
// legend uses label
|
|
expect(html).toMatch(/<legend>Plan<\/legend>/)
|
|
// help element id matches describedby target
|
|
expect(html).toMatch(/<div id="field-plan-help" class="form-help">Choose your plan<\/div>/)
|
|
// radio inputs share name and ids are unique
|
|
expect(html).toMatch(/<input id="field-plan-opt-0" type="radio" name="plan"[^>]*value="Basic"/)
|
|
expect(html).toMatch(/<label for="field-plan-opt-0">Basic<\/label>/)
|
|
expect(html).toMatch(/<input id="field-plan-opt-1" type="radio" name="plan"[^>]*value="Pro"/)
|
|
expect(html).toMatch(/<label for="field-plan-opt-1">Pro<\/label>/)
|
|
})
|
|
})
|