Warning Alert Banner Block for React

Replace the timer: the block's renew handler sets the phase to "renewing" and a 2.2 second effect sets it to "done". Call your API there instead, and set "done" when it succeeds; on failure, go back to "idle" and put the reason in the polite status line. The effect clears its timer when the block unmounts, so leaving the page cancels it.

While renewing, the button is disabled and a polite status says "Renewing certificate". When the result arrives, focus moves to a short visually hidden line, "Certificate renewed, valid for 90 days.", so a keyboard or a screen reader lands where the news is and the next Tab carries on from the block. "Remind me tomorrow" does the same with "We'll remind you tomorrow."

The warning and the result are stacked in one grid cell, as are the two sets of actions. The state that isn't showing is invisible and inert, so it takes no focus and screen readers skip it, and the cell is as tall as the taller one. The button's two labels share a cell too, so it keeps its width while it spins.

The block forgets on purpose, so the preview always shows it. To remember, set a cookie when "Remind me tomorrow" is pressed with an expiry a day away, and skip rendering the block while your server sees it. Reading a stored value after the first paint would show the panel and then fold it, moving the page.

The spinner stops turning and the fade-up and the height fold become instant. The words "Renewing…" and the status line still tell people what is happening.

The icon, heading and sentence come first, then the two buttons side by side under them (they wrap if the screen is too narrow). The frame and its marks stay inside the page's rails, and in a right-to-left layout everything mirrors.