Connection status

The "offline" ribbon: it appears when the browser loses the network and goes away when it returns. On return it says "Connection restored" for 4 seconds (fixed), because learning that you can carry on matters as much as the other. With a network nothing is seen: there is only the status region, empty.

When to use it

• Once, at the top of the application, especially where things are typed or saved: forms, checkout, orders.
• offlineText to say what happens to whatever is done without a network in your application; returnText changes what is said on return, and warnReturn={false} removes the ribbon without saying anything.

When not to

• An outside service that is down or a scheduled stop: GlobalAlert.
• A specific save that has failed: Alert, with "Retry".
• Retrying the requests: it does not do that; that is the HTTP client's business.

Keyboard: nothing in it is focusable.

Accessibility: it is role="status", not alert: losing the network is a notice, not an emergency that must cut off whatever the screen reader is reading. The return is also announced. The region is in place from the start, empty, and the ribbon enters inside it when the network drops: a region that appears with the text already inside is not announced by screen readers. The icon is decorative. The state is read in an effect and not during render: on the server there is no navigator, and painting one thing there and another in the browser breaks hydration.

Fine-tuning: no variables of its own: what you see is amset-connection__banner, inside the region amset-connection, which carries amset-connection--return on return (background --amset-warning-soft without a network, --amset-success-soft on return).

On this page: the buttons of each story fire the window's offline and online events, as the browser would. All the stories listen to the same window, so they react at the same time.