Info Alert Banner Block for React

The notice is part of the page from the first paint, so it is a section named by its heading: screen readers list it with the page's regions, and people can jump to it or past it. A live region (role="status") only announces content that changes after load, so it would say nothing here, and role="alert" interrupts whatever is being read, which suits an error, not a heads-up. If your notice appears later, after a save or a sync, put role="status" on an element that is in the page from the start and fill its text when the notice arrives.

The block's rows shrink from their full height to nothing while the card fades, in 300 ms, and it ends at its top rule, so the next section's rule takes its place. Once folded, the card is inert and hidden from screen readers, and the section drops its name. The dismiss button can't keep the focus, so focus moves to a short visually hidden line at the same spot, "Export notice dismissed.", which screen readers read out, and the next Tab carries on from there. With reduced motion the block closes at once.

The block forgets on purpose, so the preview always shows it. To remember, write a key for this notice (tallyfern:tax-columns-notice) to localStorage in the dismiss handler, and read it back after the first render, never during it, so the server and the browser agree. Read it in a useEffect and set hidden when it's there. Name the key after the notice, so the next notice shows again.

Swap the icon (TriangleAlertIcon, CircleAlertIcon, CircleCheckIcon) and the two status classes: text-info on the icon and via-info on the top hairline become text-warning, text-destructive or text-success, and their via- pair. Keep the heading and the sentences in the foreground colours: the icon's shape and the words carry the meaning, so it reads the same without colour, and no status colour ever fills a surface.

See the new columns is a link (href="#"): point it at your changelog or the help article. It's an outline Shine Button, small, so it stays quieter than the page's main call to action; a band of light sweeps across it once on hover and keyboard focus. It renders the link it's given with render, with nativeButton={false}.

Below md the icon, the heading and the dismiss button share the first row, with the dismiss button in the top end corner; the sentences and the button take the panel's full width under them. From md it's one row: the copy at the start, the button and the dismiss button at the end. At 320 pixels nothing scrolls sideways, and in a right-to-left layout everything mirrors.