Sign-in Alerts Account Block for React

Edit ALERTS. Each has an id, a title, a severity (critical, warning or info), a summary of what happened, the browser, city and documentation ip, an ISO when, whether it is unread, and how it stands: resolved is empty while it needs review, or "me" or "secured" with the ISO day in on. STEPS lists the three things to tick. The tab counts, the status line, the list order and the pane's facts are all worked out from those, so nothing is typed twice.

Everything: This was me and the ticked steps change this page's state and say so in the status line ("Marked as you in this demo. Nothing was sent."), and no account setting is touched. To make it real, call your endpoint from resolveMe (record the confirmation and clear the block) and show a failure in the same line; make each step a link to the page that does it and resolve the alert from the server when the change is seen, rather than from a ticked box.

As an icon and a word: an octagon and Critical, a triangle and Warning, a circle and Info. Only the Critical icon takes the destructive colour, and no row is tinted. The unread dot is a small solid dot and the alert's name for a screen reader ends with "Unread", since a dot is not read out.

Every alert's pane is in the page, stacked in one cell, and only the chosen one shows (the others are hidden from everyone, including assistive technology), so the pane is as tall as the tallest alert whichever you choose. Opening the three steps does grow it, because you asked for more to read. Choosing a tab picks its first alert; resolving one moves to the next in that list, and when the list is empty it says so and the pane asks you to pick.

The list and the pane take turns. Tapping an alert opens its pane in place of the list, with focus on its title and a Back button at the top that returns to the list with focus on the alert you left. From the medium breakpoint both show side by side and Back is hidden. The status line sits at the foot of the panel in both.

The tabs are real tabs with a panel each, the alerts are a labelled list of buttons with the open one marked as current, and the pane's facts are a description list. Both actions stay in place and focusable once an alert is resolved: pressing one says it is already resolved. The steps are checkboxes named by their sentence, and the status line is a polite live region present from the start. Addresses read start to end in any language, and the Back arrow flips in a right-to-left page.