Grouped Accordion Notification Block for React

Edit GROUPS (an id, a name and the noun the summary uses) and NOTES, each with its group id, a title, a line of desc, who it is from, an ISO at time and whether it starts unread. The badges, the summaries ("latest from" is the first note of the group) and the Collapse all label are worked out from those. Times are written in UTC and shown against AS_OF, so the page reads the same on the server and in every time zone.

Read state, the open groups and Clear all live in the page and reset on reload; nothing is sent. To make it real, send the ids from the Mark read handler (it already builds the list of the group's unread ids) and the id of a pressed title, and load the groups from your API. Undo after Clear all would send the reverse.

A button inside the accordion's trigger button is invalid HTML and breaks keyboard and screen reader use. So the trigger leaves room at its end and Mark read sits beside it as its own control, in the focus order straight after its group's trigger. It is named "Mark read, Messages", also when only the icon shows on a phone, and it stays focusable at zero (it answers "Nothing unread in Messages").

It reads the list's height just before it empties, and the empty state takes at least that height, so nothing below it moves. Undo brings the groups back with the open and read state they had.

Each group header is a heading with a trigger button that says whether it is open, and the groups can be opened and closed from the keyboard. Each group's list is labelled by its name. Unread counts are text with a spoken noun, and unread rows begin with the word Unread. The status line is a polite live region present from the start. Several groups can be open at once, because the accordion is in its multiple mode on every target.

The panel is a narrow card on every screen. On a phone Mark read shows only its icon (its name is unchanged), the summaries and rows keep their two lines, and the Collapse all and Clear all buttons stay on the first row of the card.