Terms Accept Dialog Block for React

So you can see it without a click. On load the alert is a copy drawn in place over the sign-up: 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. Review terms in the header opens the real Alert Dialog, modal, with its focus trap and Escape, and the copy stays closed until a reload. Both show the same TermsFields component and share the block's state, so how far someone read in the copy counts in the real alert. In your app keep the Alert Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

The region is a section with an accessible name and tabIndex={0}, so a keyboard user can focus it and scroll with the arrows, Page Down and Space, and the real alert opens with focus on it. percentOf turns the scroll position into a whole percent, 99 at most until the last pixels are reached, and the block keeps the furthest value, so scrolling back up doesn't take the checkbox away. At 100 the status line says once that the end was reached; it never speaks a percentage on every scroll.

It is always on the screen and pressable, never hidden. Pressed before the end it says "Scroll to the end of the terms first" and moves focus to the region; pressed with the box unticked it says to tick the box; otherwise it accepts, closes the alert, unlocks the drawn Continue and says "Terms accepted (version 3)". Nothing is recorded: in your app send the version, the time and the person from the server, never from the page, and keep the alert open with a busy state until it answers. Decline and Escape close the alert and say a seller account needs the terms.

They are typed constants: version 3, effective 1 Sep 2026. The block never reads the clock, so the preview and the gallery card never age. In your app send the version the person saw along with the acceptance, so a later change of the terms can ask again.

The real alert is named by its title and described by its sentence, and opens with focus on the terms. Escape and Decline close it and return focus to Review terms; clicking outside does not close it. The terms are the focus target through initialFocus. Because a modal hides the page's own status message from assistive technology, what is said while the real alert is open is also said by a second status inside it.

The copy shown on load docks to the foot of the page as a bottom sheet, with Decline and Accept and continue pinned side by side and the whole body scrolling when the screen is short. The real alert is as tall as the screen allows, so the terms get the room: the region fills what the title, the checkbox and the buttons leave.