Quiet Hours Heatmap FAQ Block for React

Edit LEVELS at the top of the file: one array of twelve numbers per day, from 0 (quiet) to 4 (packed), starting at FIRST_HOUR (8, so 8 am). The summary line is worked out from those arrays: the quietest and busiest two-hour windows across the weekdays and the peak across the weekend, written as "1 to 3 pm". Change a number and the line follows, in the figure and in its text alternative.

No. It's a grid of spans: each cell is the theme's foreground colour at 20, 40, 60 or 85 percent, or the muted colour for a quiet hour, so it works in every preset and in dark mode with no palette to tune. The catalog's Heatmap is a different thing, a drifting thermal-camera background, and isn't used here.

The grid is one image whose text alternative is the summary: the quietest and busiest windows and the weekend peak, not eighty-four cells. The same sentence is visible under the figure. On a phone the grid scrolls sideways, so its frame is a named region you can focus and scroll with the arrow keys. Each question is a button inside its own h3.

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 heatmap sits in the first answer, so it's in the markup too, whether or not it's open.

Tab moves from question to question; Enter or Space opens one. Tab moves from question to question.

The header and the rows stack as they are; the heatmap keeps a minimum width of 32 rem inside its frame, which scrolls sideways, and the legend moves under the summary line. Nothing scrolls the page sideways at 320 pixels. Under right-to-left languages the grid stays in reading order for time, with the hours running the same way as the clock.