Time Zone Axis Team Block for React

Edit ZONES at the top of the file: each office is a city, an offset in minutes east of UTC (330 for India) and its people, each with a name and a role. The axis runs from UTC-6 to UTC+9 (FIRST_OFFSET and COLUMNS); widen it for offices further out. The overlap sentence in the header is worked out from the data.

The browser's clock is read once the page has loaded and again every half minute. Until then the times read "--:--" and no band is shaded, so the server and the browser render the same thing. A column is shaded when the local time there, at the current UTC time, is between 09:00 and 17:00 (WORK_START and WORK_END). Nothing animates, and the shading only changes colour, which reduced motion turns off.

The offsets are fixed, which is why the example offices are in places that keep one offset all year (Mexico City, São Paulo, Accra, Lagos, Chennai, Seoul). An office that changes its clocks needs its offset changed twice a year.

The drawing is hidden from assistive technology: the six cells carry the same facts, as an ordered list with a name ("Longwater's offices, with the time in each"), each city a heading and its local time in a time element. The word beside the dot ("At work" or "Off hours") is written out, never colour alone.

Sixteen columns need about 700 pixels, so below lg the drawing would have to scroll sideways, and an aria-hidden scroller can't be reached by keyboard. The list of cells says everything the drawing does, so it takes over: one column on a phone, two from sm.