Message Compose Review Patterns

Message Draft

A static message draft preview shows Please review the launch notes., 0 files, Normal priority, and Draft only status.

Program

Message draft previews should show the body and delivery metadata before any live message changes or delivery.

message_draft_preview.html
Visuals: captured from real browser rendering
<section class="message-draft" aria-labelledby="message-draft-title"><h2 id="message-draft-title">Message draft preview</h2><dl>
  <div><dt>Draft</dt><dd>Please review the launch notes.</dd></div>
  <div><dt>Attachments</dt><dd>0 files</dd></div><div><dt>Priority</dt><dd>Normal</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Draft only</span></dd></div></dl>
  <p class="check">Learner check: message body and metadata are visible before delivery.</p>
  <p class="note">Static message draft only; no live compose editor, file API, attachment upload, email service, chat service, send queue, storage, route, API, network, script, form submit, analytics, timers, or live message changes run.</p></section>
<style>
  .message-draft { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #1d4ed8; padding: 12px; background: #eff6ff; }
  .message-draft dl { display: grid; gap: 8px; margin: 0; }
  .message-draft dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .message-draft dt { color: #475569; }
  .message-draft dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the message draft.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show message body.

    The draft body is exact pinned data.
    The draft body is exact pinned data.

  3. Show attachments and priority.

    The attachment count and priority are exact pinned data.
    The attachment count and priority are exact pinned data.

  4. Render draft-only status.

    The status badge says this is only a draft.
    The status badge says this is only a draft.

  5. Check draft preview.

    The check says body and metadata are visible before delivery.
    The check says body and metadata are visible before delivery.

  6. Check draft honesty.

    Draft, attachments, priority, status, and no live message changes.
    Draft, attachments, priority, status, and no live message changes.
step flow step(1) labels the source, step(2) shows the draft, step(3) shows attachments and priority, step(4) shows the draft-only status, step(5) checks the draft preview, and step(6) checks the honesty note.
draft preview The section heading names the message draft preview surface.
draft rows Draft, Attachments, Priority, and Status values are exact pinned data.
no live message change The lesson should not imply live compose editors, file APIs, attachment uploads, email services, chat services, send queues, storage, routes, APIs, networks, scripts, form submits, analytics, timers, or live message changes.