Attention Control Patterns

Priority Preview

A static priority flag preview shows Launch checklist, High priority flag, Red flag marker, and Preview only status.

Program

Priority flag previews should show the visual marker before any ordering or sync is saved.

priority_flag_preview.html
Visuals: captured from real browser rendering
<section class="priority-preview" aria-labelledby="priority-preview-title"><h2 id="priority-preview-title">Priority flag preview</h2><dl>
  <div><dt>Item</dt><dd>Launch checklist</dd></div>
  <div><dt>Flag</dt><dd>High priority</dd></div><div><dt>Marker</dt><dd>Red flag</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Preview only</span></dd></div></dl>
  <p class="check">Learner check: the priority marker is visible before any ordering is saved.</p>
  <p class="note">Static priority flag preview only; no notification service, reminder service, scheduling service, priority service, sync service, storage, cookie, route, API, network, script, event listener, form submit, input, checkbox, analytics, timer, object URL, download, service worker, account/session behavior, or live message update runs.</p></section>
<style>
  .priority-preview { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b91c1c; padding: 12px; background: #fef2f2; }
  .priority-preview dl { display: grid; gap: 8px; margin: 0; }
  .priority-preview dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .priority-preview dt { color: #475569; }
  .priority-preview dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #fecaca; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the priority preview.

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

  2. Show item row.

    The item is exact pinned data.
    The item is exact pinned data.

  3. Show flag and marker rows.

    The flag and marker are exact pinned data.
    The flag and marker are exact pinned data.

  4. Render preview-only status.

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

  5. Check priority readback.

    The check says the priority marker is visible before any ordering is saved.
    The check says the priority marker is visible before any ordering is saved.

  6. Check priority honesty.

    Item, flag, marker, status, and no live message update.
    Item, flag, marker, status, and no live message update.
step flow step(1) labels the source, step(2) shows the item, step(3) shows flag and marker rows, step(4) shows preview-only status, step(5) checks the priority readback, and step(6) checks the honesty note.
priority readback The section heading names the priority flag preview surface.
priority rows Item, Flag, Marker, and Status values are exact pinned data.
no live priority ordering The lesson should not imply notification services, reminder services, scheduling services, priority services, sync services, storage, cookies, routes, APIs, networks, scripts, event listeners, form submits, inputs, checkboxes, analytics, timers, object URLs, downloads, service workers, account/session behavior, or live message updates.