Return and Refund Patterns

Refund Timeline

A static refund timeline shows Requested, Approved, Refunded, marks Approved current, and avoids payment API or refund processor behavior.

Program

Refund display should show the current step without claiming that a payment processor was contacted.

refund_status_timeline.html
Visuals: captured from real browser rendering
<section class="refund-timeline" aria-labelledby="refund-title">
  <h2 id="refund-title">Refund status</h2>
  <ol>
    <li>Requested</li>
    <li aria-current="step">Approved</li>
    <li>Refunded</li>
  </ol>
  <p class="note">Static refund timeline only; no payment API or refund processor runs.</p>
</section>
<style>
  .refund-timeline { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .refund-timeline ol { display: grid; gap: 8px; margin: 0; padding-left: 1.25rem; }
  .refund-timeline li[aria-current="step"] { font-weight: 700; color: #0f766e; }
  .note { color: #475569; margin: 0; }
</style>

  1. Label the refund timeline.

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

  2. Show the refund heading.

    The heading names the static refund display.
    The heading names the static refund display.

  3. Use an ordered list for refund steps.

    The ordered list keeps the refund steps in sequence.
    The ordered list keeps the refund steps in sequence.

  4. Show the requested step.

    The first pinned step starts the refund timeline.
    The first pinned step starts the refund timeline.

  5. Mark Approved as current.

    The current refund step is exposed with aria-current and visual emphasis.
    The current refund step is exposed with aria-current and visual emphasis.

  6. Show the final pinned step.

    The final step shows the expected end state as static text.
    The final step shows the expected end state as static text.

  7. Check refund honesty.

    Three pinned steps, current marker, and no payment API.
    Three pinned steps, current marker, and no payment API.
refund steps The three refund steps are pinned display data.
current step Approved is marked as the current step.
no payment API The lesson should not imply a payment API or refund processor.