Policy Update Diff Success Block for React

Nothing was published or sent. The wording, the five departments and their counts are typed sample data, and Remind 14 people only changes this page ("Reminder queued for 14 people in this demo. Nothing was sent."). To wire it, build CLAUSES from your two versions (each as pieces of unchanged, removed and added text) and DEPARTMENTS from your acknowledgement records, and send the reminder from remind.

Each clause is a list of typed pieces. The old wording is the unchanged and removed pieces, with the removed ones in a real del element (struck through, in a heavier weight) under a minus and the word "Removed"; the new wording is the unchanged and added pieces, with the added ones in an ins element (underlined) under a plus and "Added". Assistive technology announces the two elements as removed and inserted text, and nothing is conveyed by color. A clause that was dropped shows its words struck through and "Nothing replaces it" in place of the new wording.

From the departments. The people who have read it and the people who have to are sums of the five rows (39 of 53, shown as a last row named Everyone), the percentage is rounded from them, the number on the reminder button is the people still to read, and the clause counts in the header come from the clauses. Each bar is the share of its own department and is hidden from assistive technology, since "19 of 22" carries the same fact.

Yes. The page builds a small one-page PDF in the browser from the same wording the panel shows (each changed clause before and after, and the read count) and saves it through a Download Trigger. It is plain text in one font, named as a sample, and says in its second line that it comes from a demo. In your app, return the real document from your server instead.

It marks the button as queued ("Reminder queued", still focusable), changes the line above it to "14 reminded" and says so in the polite status line. Pressing it again says the reminder is already queued. It sends nothing.

The header's button drops under the sentence and the departments go under the clauses, with the reminder button at the end. Every clause keeps its two lines, so nothing is cut.