Session Timeout Dialog Block for React

So you can see it without a click, and so a poster never ages. On load the alert dialog is a copy drawn in place over the page: a native dialog element with the alert dialog role that isn't modal, so nothing is trapped or focused, its digits stopped at 1:00 and its bar full. The Simulate idle button opens the real Alert Dialog, modal, with its focus trap, Escape and focus return, and there the clock runs from the moment it opens and starts over each time. The copy stays closed until a reload. Both show the same TimeoutFields component and share the block's state. In your app keep the Alert Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Not every second. The digits are hidden from assistive technology, and a polite status line speaks only at 30 seconds, at 10 seconds and when the session ends. That line lives inside the dialog, because a modal hides the rest of the page from a screen reader. The sentence in the dialog carries the rule in words, and the person can always extend it with a button, which is the first control focused, so the time limit can be turned off or extended as WCAG 2.2.1 asks.

Nothing signs out. At zero, or on Sign out now, the page's account is veiled with a note and the header's button becomes Sign in again, which lifts the veil. In your app call your sign-out and refresh endpoints from leave and keep, reset the clock on real activity (key presses and pointer moves, throttled), and share the session's state between tabs, for instance with a BroadcastChannel, so one tab's warning doesn't contradict another's. A real app also resets on activity: here only a button extends the session.

It closes the warning and the session goes on, and the polite status says so. It never signs anyone out. An alert dialog is also the kind that a click outside doesn't close, because the question needs an answer, and first focus lands on Stay signed in rather than on a way to leave.

The bar along the top is left out and the digits still run: the time still passes, so the number has to keep moving, but nothing slides.

Yes. The real alert dialog is named by its title and described by its sentence, first focus lands on Stay signed in, and Escape returns focus to the header's button. After a result, focus goes to the header's button again, whichever one it is now. The trigger is passed to AlertDialogTrigger through render, the dialog is controlled with open and onOpenChange, and first focus is set with initialFocus. The copy shown on load moves no focus.