Session Countdown Banner Block for React

A countdown read out every second would make the page unusable, and a silent one would hide the deadline. The timer is a labelled timer element, which isn't announced as it changes, and its digits are hidden from assistive technology in favour of its label, a sentence with the time left. A separate polite status line speaks three times only: "Your session ends in 5 minutes.", "Your session ends in 1 minute." and "Your session has expired."

It restarts the clock at five minutes, puts the shield back to normal and announces "Session extended. It ends in 5 minutes." The button only changes the timer: in your app, call your session refresh endpoint in stay and restart the clock from its answer.

The strip reads "Session expired" with a line saying you were signed out, and the button is replaced by a Sign in again link. Because the button the keyboard was on disappears, focus moves to the new link when it had been on the button; otherwise it stays where it was. The status line announces the expiry.

The shield switches from a check to an alert shape and takes the warning colour, on the icon only. The text and the digits stay in the foreground colour, and the icon's shape and the status line say the same thing, so it reads without colour.

It's a link (href="#"): point it at your sign-in page. It's an outline Shine Button, small; a band of light sweeps across it once on hover and keyboard focus. It renders the link it's given with render, with nativeButton={false}.

The strip fades in once when the page loads, and the digits change in place without animating. With reduced motion the fade is off. The seconds stay, because a time limit has to be exact: the clock never animates, it only changes its numbers. On a phone the strip wraps to two lines, and the digits keep their order in a right-to-left layout.