Delete Account Dialog Block for React

So you can see it without a click. On load the alert is a copy drawn in place over the page: a native dialog element with the alertdialog role that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Delete account button in the header opens the real Alert Dialog, modal, with its focus trap, Escape and focus on Cancel, and the copy stays closed until a reload. Both show the same WipeFields component and share the block's state, so what you typed in the copy is there in the real one. In your app keep the Alert Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

All three panes sit in one grid cell and only the current one is visible and reachable, so the dialog never changes height and Tab never reaches a hidden field. Continue is the catalog Button and stays quiet until its step is done; pressed too early it says what is missing and goes to that field. On the last step the same button becomes the destructive Delete account. Back returns a step, focus lands on each step's first control, and a polite message says which step you are on. Enter in a field does what the button does.

Yes. It is a Download Trigger that saves notehaven-export.json, built in the browser from NOTEBOOKS, the same typed notebooks the first step's counts are summed from. It holds sample data, and a polite message says so. In your app point it at an endpoint that streams the person's real export, and say how long it takes if it is slow. Offer it before the person has to type anything, as the first step does.

Here it deletes nothing. It closes the dialog, draws the banner with the date from AS_OF plus the grace days, turns the header's button into Cancel deletion, and says in a polite message that nothing was deleted. Cancel deletion takes the banner away. With the switch off, the banner says the deletion is scheduled for today. In your app verify the password and the typed email on your server, schedule the deletion there with the grace period, email the owner, and keep the dialog open with a busy state until your server answers.

The real alert is named by its title and described by its sentence, and it opens with focus on Cancel, never on the destructive action, so a stray Enter backs out. Escape and Cancel close it and return focus to the Delete account button; clicking outside does not close it, since an alert has to be answered. Cancel is the focus target through initialFocus. After a confirmed deletion the button that opened the alert is gone, so about 300 ms later focus moves to Cancel deletion, the button that took its place. The copy shown on load moves no focus; Escape inside it and Cancel close it the same way.

The copy shown on load docks to the foot of the frame as a bottom sheet with its actions pinned at the bottom, Back and Cancel side by side over a full-width Continue, and the step panes scroll above them. The numbers stand alone and their titles are read out only. The real alert keeps the Alert Dialog's own layout: a centred card as wide as the screen allows, scrolling inside itself if the screen is short.