Redirect Countdown Error Block for React

A redirect that waits for the visitor to ask would be a button, not a redirect. This one is bounded (eight seconds, then it stops), it can be cancelled with Stay here, and it never takes anyone away from the page without their having seen why. That is the spirit of WCAG 2.2.1 (Timing Adjustable): let the visitor stop or extend a time limit. The only timer is one second long at a time and is cleared when you press Stay here or leave the page.

Nothing navigates. At zero, or when you press Go now, a polite status line says what a real page would do ("You would be taken to /profile now") and that this demo stayed where it was. To wire it for real, call your router at that point in goNow and in the effect that ends the countdown, and keep Stay here working.

It stops the countdown where it is, keeps the ticks as they were, and says "Redirect cancelled" with the seconds that were left. The same button then reads "Run the countdown again", which starts from eight. In a real page you may not want the second half: remove it and the visitor stays for good.

No. The ticks and the seconds beside them are decoration (hidden from assistive technology), because a number that changes every second would be read out every second. The polite status line speaks only when the state changes: when it starts, when you cancel, when it ends. Reduced motion changes only the ticks: they switch without a transition, and the countdown keeps counting because it carries information.

From the server, with a 301 or 308, whenever the visitor doesn't need to know. A page with a countdown is for the cases where the change is worth explaining (a renamed account, a new domain); the server should still answer it with the right status. A component can't send that status.

No: it is a drawn clock and reads in one direction in every language, like a time axis; the words around it follow the page's direction.