Theme
Tip: try Tab + Enter.
What to look for
- Can you review an important action before it’s final?
- Does confirm have clear, explicit text (not just “OK”)?
- After confirming, can you undo for a short window?
- Does the UI avoid stealing focus, while still announcing outcomes?
Related: confirmation dialogs and Undo toasts.
BEFORE: instant submit (no review, no undo)
This pattern is risky for legal/financial/data actions. One accidental Enter can finalize.
AFTER: review + confirm + Undo
A safer pattern: validate → review step → confirm → short undo window.
Step: Edit
Please fix:
Edit
Required. Receipt will be sent here.
Please enter an email address.
Required. You’ll review before confirming.
Please enter a whole number ≥ 1.
Status: ready.
Review
Double-check before confirming. This is where many mistakes are caught.
Email:
Amount: $
Confirmed
Payment confirmed. Undo is available briefly.
Undo window: 10s
Status: confirmed.
Notes
- This demo is inspired by WCAG’s Error Prevention requirement for important submissions (legal/financial/data).
- In real apps, you may also support “Edit later”, drafts, and/or a reversible backend state.
- Keep labels explicit: “Confirm payment” beats “OK”.