From 033519f973054e32872e51d31732505a8a3662f5 Mon Sep 17 00:00:00 2001
From: Jaybe <master@jaybe.dev>
Date: Mon, 17 Nov 2025 21:19:01 +0900
Subject: [PATCH] =?UTF-8?q?Export=20=ED=9A=8C=EA=B7=80:=20=ED=8F=BC=20requ?=
 =?UTF-8?q?ired/pattern/maxlength=20+=20describedby=20=EA=B2=80=EC=A6=9D?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80,=20:invalid=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=ED=8F=AC=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/exporter/formError.regression.test.ts | 52 +++++++++++++++++++++++
 lib/exporter/html.ts                      |  1 +
 2 files changed, 53 insertions(+)
 create mode 100644 lib/exporter/formError.regression.test.ts

diff --git a/lib/exporter/formError.regression.test.ts b/lib/exporter/formError.regression.test.ts
new file mode 100644
index 0000000..87732c0
--- /dev/null
+++ b/lib/exporter/formError.regression.test.ts
@@ -0,0 +1,52 @@
+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: 'Form Error Regression',
+  locale: 'en',
+  theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+  sections: [],
+  form: {
+    actionUrl: '',
+    fields: [
+      { type: 'text', name: 'name', label: 'Name', required: true, pattern: '^[A-Za-z ]+$', maxLength: 30, help: 'Enter your name' },
+      { type: 'email', name: 'email', label: 'Email', required: true, help: 'We will contact you' },
+      { type: 'textarea', name: 'msg', label: 'Message', required: false, maxLength: 200, help: 'Optional' },
+    ],
+    spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
+  },
+  analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+  seo: { title: 'T', description: 'D' },
+  ...overrides,
+})
+
+describe('Exporter - form error/required/pattern regression', () => {
+  it('adds required/pattern/maxlength attributes and aria-describedby links', () => {
+    const page = makePage()
+    const { html } = exportPage(page)
+
+    // required/pattern on text
+    expect(html).toMatch(/<input[^>]*name="name"[^>]*required/)
+    expect(html).toMatch(/<input[^>]*name="name"[^>]*pattern="\^\[A-Za-z \]\+\$"/)
+    expect(html).toMatch(/<input[^>]*name="name"[^>]*maxlength="30"/)
+    // describedby via help
+    expect(html).toMatch(/<label for="field-name">Name<\/label>/)
+    expect(html).toMatch(/<input[^>]*id="field-name"[^>]*aria-describedby="field-name-help"/)
+    expect(html).toMatch(/<div id="field-name-help" class="form-help">Enter your name<\/div>/)
+
+    // email required + describedby
+    expect(html).toMatch(/<input[^>]*type="email"[^>]*name="email"[^>]*required/)
+    expect(html).toMatch(/<input[^>]*id="field-email"[^>]*aria-describedby="field-email-help"/)
+
+    // textarea maxlength + describedby
+    expect(html).toMatch(/<textarea[^>]*name="msg"[^>]*maxlength="200"/)
+    expect(html).toMatch(/<textarea[^>]*id="field-msg"[^>]*aria-describedby="field-msg-help"/)
+  })
+
+  it('CSS includes :invalid rule for error state', () => {
+    const page = makePage()
+    const { css } = exportPage(page)
+    expect(css).toMatch(/input:invalid,select:invalid,textarea:invalid\{[^}]*border-color/)
+  })
+})
diff --git a/lib/exporter/html.ts b/lib/exporter/html.ts
index d2612c9..f884822 100644
--- a/lib/exporter/html.ts
+++ b/lib/exporter/html.ts
@@ -314,6 +314,7 @@ function buildCss(page: Page) {
   label{ display:block; margin: .5rem 0 }
   button{ background: var(--primary); color:#fff; border:none; padding:.75rem 1rem; border-radius:.5rem }
   button:focus, a:focus, input:focus, select:focus, textarea:focus{ outline: 3px solid #2563eb; outline-offset:2px }
+  input:invalid,select:invalid,textarea:invalid{ border-color:#ef4444 }
   .faq-list{ list-style:none; padding:0; margin:0 }
   .faq-item{ margin: .75rem 0 }
   .faq-q{ font-size: 1rem; font-weight:600; overflow-wrap:anywhere }