Consent Check Alert Banner Block for React

No. It is a section named by its heading, in the flow of the page, with real buttons and a checkbox, so nothing is trapped and nothing blocks the page behind it. Screen readers list it with the page's regions and people can jump past it. 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 checked state lives in the block. Both words, "Got it" and "Dismiss permanently", sit in one grid cell inside the button and the unused one is invisible, so the button keeps one width and nothing around it moves when you tick the box. Screen readers hear only the visible word. The label wraps the box, so clicking the words toggles it too.

Not in this block: it forgets on purpose, so the preview always shows it. To remember, set a cookie named after the notice (notchspring-digest-notice) in the dismiss handler when the box is checked, and skip rendering the block when your server sees it. Reading a stored value after the first paint would show the card and then fold it, moving the page, so decide on the server.

The button can't keep the focus once the card is folded and inert, so focus moves to a short visually hidden line at the same spot, "Digest notice dismissed.", which screen readers read out. The next Tab carries on from there.

Acknowledging a notice is not the page's main action, so the button is an outline Button and the checked box is a foreground tone, not the primary colour. That leaves the primary for your hero's or pricing's one call to action.

The icon and heading stay on one row with the sentence under the heading. The footer stacks: the checkbox first, then the button at the full width of the panel. At 320 pixels nothing scrolls sideways, and in a right-to-left layout everything mirrors.