Announce network connection changes

Expose current connectivity and announce meaningful offline and reconnection transitions accessibly.

EasyReact Browser Events

30 min0% acceptance

Description

Build NetworkStatusAnnouncer with injected initial connectivity and event subscription. Show the current state, announce an assertive offline alert, announce reconnection politely only after an offline period, suppress duplicate events, and remove listeners cleanly.

Requirements

Export a NetworkStatusAnnouncer component from src/App.tsx.
Read and render connection.isOnline() exactly once per adapter.
Announce a transition to offline through an assertive accessible alert.
Politely announce reconnection only after the component observed an offline state.
Ignore repeated events whose value matches the current connectivity state.
Use stable live-region markup without shifting keyboard focus.
Keep the visible status synchronized with the latest accepted event.
Invoke the subscription cleanup on adapter change and unmount.

Offline transition

Input

Initial online state, then an offline event

Expected output

Visible status becomes Offline and an alert announces the loss

Explanation

The urgent transition uses alert semantics.

Duplicate online event

Input

Two online events arrive without an offline event between them

Expected output

No reconnected announcement is produced

Explanation

Announcements correspond to state changes, not raw event count.

Constraints

Do not access navigator or window directly
Do not announce the initial online state as a reconnection
Keep a stable live-region container

Hints

Hint 1

Compare each event with the prior accepted state before updating.

Hint 2

Remember whether an offline transition has occurred during this mount.

Hint 3

Separate persistent visible status from transient announcement text.

Reactonline eventsaccessibility