# Users can submit messages with the Enter key

- **Pattern:** `ab-000152` (`ai-chat-visibility.input-and-history.keyboard-submit`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000152
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000152)

## Why it matters

Forcing users to mouse over to a send button for every message is both slow and jarring — it breaks the typing flow that everyone has been trained on by every messaging product in existence. Keyboard power users will bounce off a chat interface that requires a click per submit, and on tablet and laptop users the friction accumulates across hundreds of messages per session. This also affects accessibility: users who rely on keyboard-only navigation per WCAG 2.2 SC 2.1.1 (Keyboard) must have a keyboard submit path.

## Severity rationale

High because keyboard-only submit is both a productivity and an accessibility requirement and its absence is immediately felt.

## Remediation

In `src/components/chat/ChatInput.tsx`, add an `onKeyDown` handler that submits on Enter (without Shift), prevents the default newline, guards against empty input and in-flight generation, and reserves Shift+Enter for newline. Surface the shortcut with a visible hint near the input.

```tsx
onKeyDown={(e) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    if (!isLoading && input.trim()) handleSubmit(e);
  }
}}
```

## Detection

- **ID:** `keyboard-submit`
- **Severity:** `high`
- **What to look for:** Find the `onKeyDown` handler on the message input. Quote the actual key check logic if found (e.g., quote the `e.key === 'Enter' && !e.shiftKey` condition). Verify that pressing Enter (without Shift) submits the form. Check that the handler calls `e.preventDefault()` to prevent a newline being added on submit. Confirm that pressing Enter while `isLoading` is true does not send a duplicate message.
- **Pass criteria:** Pressing Enter submits the message. Pressing Shift+Enter adds a newline. The handler prevents default form behavior on Enter to avoid newline insertion at submit time. The handler must also guard against submitting empty messages (at least 1 character required) or submitting while loading. Count all keyboard event handlers on the input to verify coverage.
- **Fail criteria:** Enter only adds a newline with no submit shortcut at all, or Enter is entirely ignored. Users can only submit via mouse click on the send button.
- **Skip (N/A) when:** The interface uses Ctrl+Enter or Cmd+Enter as the submit shortcut and this is clearly communicated to users. Signal: a visible keyboard shortcut hint shows the alternative submit key.
- **Detail on fail:** `"No onKeyDown handler found on message input — Enter key does not submit; button click required for every message"`
- **Remediation:** In `src/components/chat/ChatInput.tsx`, add an `onKeyDown` handler:

  ```tsx
  onKeyDown={(e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      if (!isLoading && input.trim()) handleSubmit(e);
    }
  }}
  ```

  Show a visible hint near the input so users know the keyboard behavior.
- **Cross-reference:** For a deeper analysis of keyboard accessibility in interactive components, the Accessibility Fundamentals Audit covers keyboard navigation in detail.

## External references

- wcag 2.1.1

Taxons: user-experience

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