Shorts hub › Demos

Connection status demo (BEFORE vs AFTER)

This is a tiny, self-contained UI simulation. Use the toggle to force offline/online and see how status + retry behave.

Online Tip: keyboard users can Tab to every control; focus ring is visible.

BEFORE (common failure)

Only a subtle icon changes. No text. Errors go to the console. Screen-reader users often hear nothing.

(No visible message)
(No sending status text)

AFTER (minimum viable pattern)

Clear, non-annoying status text + polite announcements. Offline is visible and explains what will happen.

Status updates are visible near the action and announced via a polite live region.

Ready.
What gets announced (example)
  • “Sending…” when the send starts
  • “Sent.” on success
  • “Failed to send.” on error (and the alert appears)

Related note: Why connection status needs a clear, non-annoying UI (and what to announce)