Toggle Setting Alert Banner Block for React

A visually hidden polite line is in the page from the start, empty, and gets its text ("Email alerts are on.") when the switch changes, so the change is announced once and nothing is read at load. The switch itself is named "Email alerts for failed checks", and its state is the switch's own.

The switch is controlled by the block's enabled state: call your API in the change handler and keep the switch's value in step with the answer. While the request runs you can disable the switch, and on failure set it back and put the reason in the live line. The block itself stores nothing, so the preview always starts off.

A sentence that changes length changes the height of the block, and the page below jumps. With both in one grid cell the longer one sets the height and the other is invisible, so switching moves nothing. Screen readers hear only the visible one.

It's a setting, not news: the switch is the answer, and it stays so the setting can be changed back. If you want the callout gone once it's on, fold it the way the other alerts do and move focus to a status line.

No. The label and its dot are decoration for sighted people and are hidden from assistive technology, because the switch already says on or off. The dot is a status colour only when on, and the word says the same thing, so the state doesn't rely on colour.

The icon, heading and switch share the first row, with the switch at the end; the sentence takes the panel's full width under them. From md it is one row with the sentence beside the switch. At 320 pixels nothing scrolls sideways, and in a right-to-left layout everything mirrors.