# Keyboard shortcuts are available for power users

- **Pattern:** `ab-000335` (`ai-ux-patterns.core-interaction.keyboard-shortcuts`)
- **Severity:** info
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000335
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000335)

## Why it matters

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.

## Severity rationale

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.

## Remediation

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`.

```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.

## Detection

- **ID:** `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:

  ```tsx
  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 `?`:

  ```tsx
  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.

---

## External references

- wcag 2.1.1

Taxons: user-experience, accessibility

HTML version: https://auditbuffet.com/patterns/ab-000335