Optimistic UI failures: pending → revert → retry (without stealing focus)

Interactive micro-demo: optimistic-ui-demo.html

What can go wrong

• The UI flips, but the request fails (offline, timeout, auth, validation).
• The user keeps going, assuming it worked (because you gave no signal).
• When they return later, their state “mysteriously” changed back.

Minimum checklist (practical)

• Pending state: show “Saving…” (and consider aria-busy on the region).
• Failure message: explain what happened (“Couldn’t save”).
• Revert or mark unsynced: either revert the optimistic change, or show a clear “not synced” indicator.
• Recovery action: provide Retry (or Undo, depending on the action) as a real button.
• Don’t steal focus: announce via a polite live region or role="status" toast, but keep focus where the user was.

ARIA notes (small but important)

• Prefer aria-live="polite" for background status. Save assertive for urgent errors.
• Keep the live region in the DOM; update its text (don’t constantly create/remove it).
• If you show a toast with actions (Retry), don’t auto-focus it; let users choose.

Why this matters

• It reduces “I did that already” duplicate actions.
• It’s friendlier for keyboard and screen reader users.
• It avoids surprise state changes later.