Region Rows Data Centers About Block for React

Edit REGIONS at the top of the file: each has a name, sites, state, racks and used, the hardware line and its audits. The percentage and the bar come from used and racks. Round trips live in PAIRS, one line per pair of regions; each region shows its two nearest pairs, so adding a region means adding its pairs, and its row picks them up.

A row says its state in words beside a dot: a solid dot for "Operational" and a warning dot for "Maintenance". The dot is decoration, so a reader who cannot tell the two apart still has the word, and a screen reader hears only the word. The capacity bar is in the foreground tone and is hidden from assistive technology, because the row already says "37 of 48 racks" and "77%".

Each row's header is a button inside an h3, so the regions are headings and Enter or Space opens one. Opening a row closes the open one, and the first row starts open. Tab moves between the rows' buttons; this base does not add arrow-key movement between them.

No: a closed row's facts are not in the page until the row opens.

Each row stacks its parts (name and sites, state, then the capacity bar with its racks and percentage), and an opened row's three facts stack in one column. The block ends on the last row, with no rule under it, so it joins the next block's top rule. Nothing scrolls sideways at 320 pixels.

The header and the rows fade up once on load, and a row opens with a short height transition. The height transition of a row does not yet stop under reduced motion on this base.