Notification Denied Error Block for React

The permission line is a real read of Notification.permission after the page loads, and the page never calls Notification.requestPermission. The email address is kept in the page's own state and nothing is sent; "Saved in this demo" says so. In your app, post the address to your mailing service on submit, and ask for push permission only from a button the visitor presses, never on load.

It is a demo control and it is on when the page opens, so the blocked state is what you see whatever your browser says. Turn it off and the Push cell shows your browser's own answer: Blocked, Allowed, Not asked (the value default) or Unavailable, each with its own fix line, all held in one cell so nothing moves.

Blocked (the visitor said no, so the fix is in the browser's site settings), Allowed (nothing to fix), Not asked (the browser has never been asked, and a real page asks from a button) and Unavailable (the browser has no notification support, which some phones' browsers don't). Each has a different shape in the badge, so colour never carries it.

When you press the button, not while you type. An empty field says "Enter your email address." and a malformed one says "Enter a full email address.", under the field, with focus on it. A good address shows a busy button for under a second and then the saved result in the same space, with a Change address button that returns to the field.

Tab goes to the switch, then the field, the button and, once saved, Change address. Every result is spoken through one polite status line; a saved address takes focus on its own line because the busy button drops focus.

The switch sits under the sentence, the two cells stack with Push first, and the button is full width. Saving never changes the panel's height, because the form and its result share one cell.