Approval Review Patterns

Approval Checklist

A static approval checklist shows Legal approval with two checked rows, one needs-review row, and Overall 2 of 3 ready.

Program

Approval checklists should show readiness row by row without live forms, saves, or approval workflow tools.

approval_checklist_readback.html
Visuals: captured from real browser rendering
<section class="approval-checklist" aria-labelledby="checklist-title">
  <h2 id="checklist-title">Legal approval</h2>
  <ul aria-label="Legal approval checklist">
    <li><span class="checked">Checked</span> Privacy copy checked</li>
    <li><span class="checked">Checked</span> Terms copy checked</li>
    <li><span class="review">Needs review</span> Brand wording needs review</li>
  </ul>
  <p class="status">Overall: 2 of 3 ready</p>
  <p class="note">Static approval checklist only; no form submit, storage, approval API, project API, or analytics runs.</p>
</section>
<style>
  .approval-checklist { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .approval-checklist ul { display: grid; gap: 8px; margin: 0; padding-left: 1.25rem; }
  .checked, .review { border-radius: 999px; padding: 2px 8px; background: #dcfce7; }
  .review { background: #fef3c7; }
  .status { border: 1px solid #60a5fa; background: #eff6ff; padding: 8px; }
  .approval-checklist p, .note { margin: 0; }
  .note { color: #475569; }
</style>

  1. Label the approval checklist.

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

  2. Show the first checked row.

    The first row is exact pinned data.
    The first row is exact pinned data.

  3. Show the second checked row.

    The second row is exact pinned data.
    The second row is exact pinned data.

  4. Show the needs-review row.

    The third row is exact pinned data.
    The third row is exact pinned data.

  5. Show the overall readback.

    The summary states the static readiness count.
    The summary states the static readiness count.

  6. Check checklist honesty.

    Checked rows, review row, overall readback, and no workflow API.
    Checked rows, review row, overall readback, and no workflow API.
checklist label Legal approval names the checklist surface.
readiness rows Two rows are checked and one row needs review.
no workflow API The lesson should not imply form submits, storage, approval APIs, project APIs, or analytics.