Age Restricted Error Block for React

The in-place copy. On load the gate is drawn as a plain dialog element held open over the stage, so nothing is trapped or focused and the page around it stays usable. Pressing Verify age opens the real alert dialog, with its focus trap, Escape and focus return, and the in-place copy stays closed until a reload. In your app keep the alert dialog and drop the in-place copy: the "in-place" state, the scrim and its dialog, and the Escape effect.

No. The month, day and year live in the page's state only while the gate is open: pressing Continue checks them, then they are cleared whether or not the check passes, and closing the dialog clears them too. Only a yes or no is kept, and only until the page reloads. If your law asks for more than a statement (a document or a payment-card check), do that on your server; this block shows the question, not the proof.

From one AS_OF day typed at the top of the file, so the age is the same on the server and in every time zone and nothing reads the clock. A date that doesn't exist (31 February) or lies after that day is refused with a line saying what is wrong. In your app, take the date from the server.

They close the dialog and leave the page locked: a message on the stage says to use Verify age above, and focus goes back to that button. A click outside the dialog doesn't close it, so the gate is only left on purpose. Nothing is verified by closing it.

That Casklane Club is for adults only, so the cellar stays closed, and that nothing was stored. The gate itself asks "Are you 18 or older?", so the limit is never a secret. Changing the date or the route and pressing Continue works again, as it would on any page that only checks a statement; if the law asks for more, check on your server and rate-limit the retries there.

Tab reaches the Tabs and the arrow keys move between the two routes. The checkbox and the three selects are native controls with visible labels, so they work as in any form: Space ticks the box, and a letter or the arrow keys change a select. Both routes have the same height, so choosing one never moves the dialog.