WCAG 2.2 SC 2.1.1 requires all functionality to be operable via keyboard. AI chat products that force mouse interaction exclude keyboard-dependent users — people with motor disabilities, power users, and developers who never leave the keyboard. The minimum bar — Enter to submit, Shift+Enter for newline — is so widely expected that its absence signals an incomplete implementation. Products missing it consistently receive poor reviews from technical evaluators and fail accessibility audits that gate enterprise procurement.
Info because the gap is a polish and accessibility deficit rather than a data-loss or security failure, but it reliably signals to power users that the product is unfinished.
Add an onKeyDown handler to the chat textarea that at minimum handles Enter (submit) and Shift+Enter (newline). Wire Escape to the stop handler when streaming is active. Both are zero-dependency additions to src/components/chat/ChatInput.tsx.
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault()
handleSubmit()
}
if (e.key === 'Escape' && isLoading) {
stop()
}
}
<textarea
onKeyDown={handleKeyDown}
placeholder="Message (Enter to send, Shift+Enter for newline)"
/>
Document the shortcuts in a tooltip or placeholder text — discoverability is half the value.
ID: ai-ux-patterns.core-interaction.keyboard-shortcuts
Severity: info
What to look for: Count all onKeyDown handlers and global keyboard event listeners related to the chat interface. For each handler, enumerate the keyboard shortcuts detected: Cmd/Ctrl+Enter, Escape, Cmd/Ctrl+K, Cmd/Ctrl+N, up/down arrows, or ? for help. Verify at minimum that Enter sends a message and Shift+Enter inserts a newline (or vice versa). Report the ratio of implemented shortcuts to common AI chat shortcuts.
Pass criteria: At minimum 2 keyboard shortcuts are implemented: Enter submits a message and Shift+Enter inserts a newline (or vice versa, with documentation). Additional shortcuts for common actions (new chat, stop generation) are a bonus. Report even on pass: "Found X keyboard shortcuts across Y handlers."
Fail criteria: No keyboard shortcuts are detected. The chat interface requires mouse interaction for all primary actions.
Skip (N/A) when: Same as prompt-suggestions — single-purpose AI tools where keyboard shortcuts are not relevant to the interaction model.
Detail on fail: "No onKeyDown handlers detected on the chat input beyond the browser default — Cmd+Enter, Escape, and other common shortcuts not implemented".
Remediation: Keyboard shortcuts are a strong signal to power users that the product is polished. Start with the minimum that every AI chat product should have:
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault()
handleSubmit()
}
if (e.key === 'Escape' && isLoading) {
stop()
}
}
<textarea onKeyDown={handleKeyDown} placeholder="Message (Enter to send, Shift+Enter for newline)" />
Consider a keyboard shortcuts modal triggered by ?:
useEffect(() => {
const handleGlobal = (e: KeyboardEvent) => {
if (e.key === '?' && !e.target?.matches('input, textarea')) {
setShortcutsOpen(true)
}
}
window.addEventListener('keydown', handleGlobal)
return () => window.removeEventListener('keydown', handleGlobal)
}, [])
Cross-reference: Keyboard accessibility for AI interfaces is covered in detail in the Accessibility Fundamentals Audit.