Maintenance Alert Banner Block for React

Edit WINDOW at the top of the file: start and end are UTC hours, and the strip fills from the start hour up to, not including, the end hour. The range in the heading and beside the strip is built from the same numbers. A window that crosses midnight needs two ranges: split it into two fills or change inWindow.

A strip drawn in UTC is the same for everyone and can be rendered on the server without a mismatch. To show a visitor's local time, convert the two hours after the first render, never during it, and say which zone you show. Keep UTC in the text so support and customers talk about the same hours.

The strip is a drawing: it is hidden from assistive technology, and the text beside it says the same thing ("02:00–04:00 UTC", "About 30 minutes read-only"), as does the heading. Nothing in it is a control, so there is nothing to tab through except the status link.

No. The filled cells are in your theme's foreground colour, not a status colour, and the window is also written in the heading and beside the strip. The warning token is on the icon only.

No. A planned notice is on the page from the first paint, so it's a section named by its heading, a landmark people can find and skip. If a maintenance notice appears while someone is on the page, put role="status" on an element that is already in the page and fill it when the notice arrives.

Both bands stack: the heading and sentences first, then the strip across the full width of the page column with all four tick labels, then the window, the read-only time and the link. At 320 pixels the 24 cells shrink and nothing scrolls sideways; the strip keeps its direction, as a clock does, even in a right-to-left layout.