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,53 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import React from 'react'
+import BuilderClientPage from '@/components/BuilderClientPage'
+import I18nProvider from '@/components/I18nProvider'
+import en from '@/messages/en.json'
+import { assertDescribedBy } from '@/components/testUtils/inspectorA11y'
+
+describe('Inspector a11y sections template - Hero/CTA/FAQ describedby wiring', () => {
+  it('Hero, CTA, FAQ inspector inputs are wired to helptexts', () => {
+    render(
+      <I18nProvider locale="en" messages={en as unknown as Record<string, string>}>
+        <BuilderClientPage />
+      </I18nProvider>
+    )
+
+    // Add hero to enable inspector
+    const addHero = screen.getByRole('button', { name: 'Add Hero' })
+    fireEvent.click(addHero)
+
+    // Select first section (Hero)
+    const selectButtons = screen.getAllByRole('button', { name: /Select \d+/ })
+    fireEvent.click(selectButtons[0])
+
+    const heroHeading = screen.getByLabelText('Hero Heading')
+    assertDescribedBy(heroHeading, 'ins-hero-heading-help')
+
+    // Replace with CTA and test describedby
+    const addCta = screen.getByRole('button', { name: 'Add CTA' })
+    fireEvent.click(addCta)
+    const selectSecond = screen.getAllByRole('button', { name: /Select \d+/ })[1]
+    fireEvent.click(selectSecond)
+
+    const ctaText = screen.getByLabelText('CTA Text')
+    assertDescribedBy(ctaText, 'ins-cta-text-help')
+    const ctaHref = screen.getByLabelText('CTA Href')
+    assertDescribedBy(ctaHref, 'ins-cta-href-help')
+
+    // Add FAQ and test using shared help id
+    const addFaq = screen.getByRole('button', { name: 'Add FAQ' })
+    fireEvent.click(addFaq)
+    const selectThird = screen.getAllByRole('button', { name: /Select \d+/ })[2]
+    fireEvent.click(selectThird)
+    // Add one FAQ item to render inputs
+    const addFaqItem = screen.getByRole('button', { name: 'Add FAQ Item' })
+    fireEvent.click(addFaqItem)
+
+    const faqQ = screen.getByLabelText('FAQ Q 0')
+    const faqA = screen.getByLabelText('FAQ A 0')
+    assertDescribedBy(faqQ, 'ins-faq-help')
+    assertDescribedBy(faqA, 'ins-faq-help')
+  })
+})