test(ci): add exporter heading levels and a11y typography smoke; update MAIN_PLAN

components/SectionCanvas.keyboard.test.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, test } from 'vitest'
+import { render, screen, fireEvent, within } from '@testing-library/react'
+import React, { useState } from 'react'
+import SectionCanvas from './SectionCanvas'
+import type { Section } from '@/lib/state/store'
+
+function Wrapper() {
+  const [sections, setSections] = useState<Section[]>([
+    { type: 'hero', props: { heading: 'H', subheading: '' } },
+    { type: 'faq', props: { items: [] } },
+    { type: 'cta', props: { text: 'Go', href: '#' } },
+  ])
+
+  const onMove = (from: number, to: number) => {
+    setSections((prev) => {
+      const next = prev.slice()
+      const [sp] = next.splice(from, 1)
+      next.splice(to, 0, sp)
+      return next
+    })
+  }
+
+  return (
+    <SectionCanvas
+      sections={sections}
+      onMove={onMove}
+      onRemove={() => {}}
+      onSelect={() => {}}
+    />
+  )
+}
+
+describe('SectionCanvas keyboard/fallback reorder', () => {
+  test('clicking Down and Up buttons reorders items', () => {
+    render(<Wrapper />)
+
+    // initial order: hero, faq, cta
+    const list = screen.getByTestId('section-canvas')
+    let items = within(list).getAllByTestId(/sec-item-/)
+    expect(items[0]).toHaveTextContent('hero')
+    expect(items[1]).toHaveTextContent('faq')
+    expect(items[2]).toHaveTextContent('cta')
+
+    // move first item (index 0) down
+    fireEvent.click(within(items[0]).getByLabelText('Down 0'))
+
+    items = within(list).getAllByTestId(/sec-item-/)
+    expect(items[0]).toHaveTextContent('faq')
+    expect(items[1]).toHaveTextContent('hero')
+    expect(items[2]).toHaveTextContent('cta')
+
+    // move last item up
+    fireEvent.click(within(items[2]).getByLabelText('Up 2'))
+
+    items = within(list).getAllByTestId(/sec-item-/)
+    expect(items[0]).toHaveTextContent('faq')
+    expect(items[1]).toHaveTextContent('cta')
+    expect(items[2]).toHaveTextContent('hero')
+  })
+})