fix(cms): support keyboard selection of content templates (#91)

Co-Authored-By: Codex <noreply@openai.com>

Author: snowopsdev

cms/src/components/ops/NewContentFlow.tsx

@@ -41,6 +41,18 @@ export function NewContentFlow({ templates, mode, pipelineReady, runActive }: Pr
 
   const chosen = templates.find((t) => t.id === templateId) ?? null
 
+  const chooseWithKeyboard = (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {
+    let next: number
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') next = (index + 1) % templates.length
+    else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') next = (index - 1 + templates.length) % templates.length
+    else if (event.key === 'Home') next = 0
+    else if (event.key === 'End') next = templates.length - 1
+    else return
+    event.preventDefault()
+    setTemplateId(templates[next].id)
+    event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[role="radio"]')[next]?.focus()
+  }
+
   const createFromKeyword = (event: React.FormEvent) => {
     event.preventDefault()
     if (!chosen) return
@@ -79,13 +91,15 @@ export function NewContentFlow({ templates, mode, pipelineReady, runActive }: Pr
             </p>
           ) : (
             <div className="datum-new__cards" role="radiogroup" aria-label="Kind of piece">
-              {templates.map((t) => (
+              {templates.map((t, index) => (
                 <button
                   aria-checked={templateId === t.id}
                   className={`datum-new__card${templateId === t.id ? ' is-selected' : ''}`}
                   key={t.id}
                   onClick={() => setTemplateId(t.id)}
+                  onKeyDown={(event) => chooseWithKeyboard(event, index)}
                   role="radio"
+                  tabIndex={templateId === t.id || (templateId === null && index === 0) ? 0 : -1}
                   type="button"
                 >
                   <strong>{t.name}</strong>

cms/tests/int/newContentKeyboard.int.spec.ts

@@ -0,0 +1,41 @@
+import React from 'react'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, expect, it, vi } from 'vitest'
+
+vi.mock('next/navigation', () => ({ useRouter: () => ({ push: vi.fn() }) }))
+vi.mock('next/link', () => ({
+  default: ({ children }: { children: React.ReactNode }) => React.createElement('span', null, children),
+}))
+vi.mock('@/components/ops/topicDiscoveryActions', () => ({ createTopicsAction: vi.fn() }))
+vi.mock('@/components/ops/TopicDiscovery', () => ({ TopicDiscovery: () => null }))
+vi.mock('@/components/ops/ContentRunForm', () => ({ ContentRunForm: () => null }))
+const { NewContentFlow } = await import('@/components/ops/NewContentFlow')
+afterEach(cleanup)
+
+it('offers one template tab stop and selects adjacent templates with arrow keys', () => {
+  render(React.createElement(NewContentFlow, {
+    templates: [
+      { id: 1, name: 'Listicle', intent: null, requiredSections: 2 },
+      { id: 2, name: 'How-To', intent: null, requiredSections: 3 },
+      { id: 3, name: 'Comparison', intent: null, requiredSections: 4 },
+    ], mode: 'mock', pipelineReady: true, runActive: false,
+  }))
+  const radios = screen.getAllByRole('radio')
+  expect(radios.map((radio) => radio.tabIndex)).toEqual([0, -1, -1])
+  radios[0].focus()
+  fireEvent.keyDown(radios[0], { key: 'ArrowRight' })
+  expect(document.activeElement).toBe(radios[1])
+  expect(radios[1].getAttribute('aria-checked')).toBe('true')
+  expect(radios.map((radio) => radio.tabIndex)).toEqual([-1, 0, -1])
+  fireEvent.keyDown(radios[1], { key: 'ArrowDown' })
+  expect(document.activeElement).toBe(radios[2])
+  fireEvent.keyDown(radios[2], { key: 'ArrowRight' })
+  expect(document.activeElement).toBe(radios[0])
+  fireEvent.keyDown(radios[0], { key: 'ArrowLeft' })
+  expect(document.activeElement).toBe(radios[2])
+  fireEvent.keyDown(radios[2], { key: 'Home' })
+  expect(document.activeElement).toBe(radios[0])
+  fireEvent.keyDown(radios[0], { key: 'End' })
+  expect(document.activeElement).toBe(radios[2])
+  expect(radios[2].getAttribute('aria-checked')).toBe('true')
+})