Stacked Alert Banner Block for React

Edit NOTICES at the top of the file: each entry has an id, a kind (error, warning, info or success), a title, a line, a link and an href. Keep the most urgent first. The icon and its status colour come from kind, so a new notice needs nothing else. Past five rows it stops being a banner and becomes a notification centre, which is a different block.

The count ("4 notices to review") is a polite status region that is in the page from the first paint and only changes its text, so a screen reader says the new number after each close without interrupting what it is reading. It reads "1 notice" in the singular.

To the next row's close button, or the one before it when you closed the last row, so you can keep pressing Enter to clear the list. When the final notice goes, there is no button left to keep focus on: the block folds away, and focus moves to a short visually hidden line, "All notices dismissed.", which is read out; the next Tab carries on from there. Dismiss all does the same.

No, on purpose: the preview always shows the four. To remember a close, store the notice's id where you keep other user state and filter NOTICES with it on the server, so the page never paints a notice and then removes it.

The list fades up once when the page loads, and a closed row shrinks from its full height to nothing while it fades, in 300 ms, both with CSS only. With reduced motion turned on nothing animates: rows close at once.

Below md each row is the icon, the title and the close button on one line, with the detail clamped to two lines and the link under it; from md it is one row, the detail clamped to one line and the link and the close button at the end. At 320 pixels nothing scrolls sideways, and in a right-to-left layout the rows, the arrows and the close buttons mirror.