Time Zone Overlap FAQ Block for React

Edit the constants at the top of the file. CORE_START and CORE_END are the team's core hours in minutes after midnight UTC, DAY_START and DAY_END the candidate's day on their own clock, and MIN_OVERLAP the least overlap you ask for. ZONES lists each place with its offset in minutes: add one by adding a line. The overlap, the number in the band and the strip all come from the same two functions, so they can't disagree.

No, deliberately. Offsets are standard time, and the caption under the strip says so, because daylight saving changes on different days in different places and a fixed page would be wrong for part of the year. If your core hours are tied to a city, express them in that city's standard time and say which.

The Select is named "Your time zone" and announces the zone it holds; the number beneath it is a polite status, so "Your overlap: 3 hours" and its sentence are read out when you choose another zone. The strip is decoration for the same number, so it's hidden from assistive technology; its frame is a named region you can focus and scroll with the arrow keys on a phone.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found", and the browser's find in page opens the answer that holds a match. The strip and the number are state, so only the questions are in the markup.

Tab moves from the Select to the strip and on down the rows; Enter or Space opens a question. In the Select, the arrow keys and typing move through the zones. Tab moves from question to question.

The Select goes full width with the overlap under it, and the strip keeps a minimum width of 36 rem inside its frame, which scrolls sideways and starts at 06:00 so your working hours are in view, while the row names stay put at the start. The strip's hours stay in clock order in right-to-left layouts, as time does.