Behind the Scenes About Block for React

The departments are DEPARTMENTS at the top of the file. Each has a name, a line, a list of facts (a label and a value), tools and a note. The first department starts open. Add a fact and the opened row gains a column on a wide screen and a stacked line on a phone.

The heading is an h2. Each department is an h3 whose button opens the row. The opened figures are a description list, the label first and then the value, so "Tickets closed, 46" reads as a pair. The tools are a list of badges. The note is a paragraph after them. The lines are hidden from assistive technology.

Enter or Space opens a row, and opening one closes the open one. Tab moves between the rows' buttons; this base does not add arrow-key movement between them.

No: a closed row's figures, tools and note are not in the page until the row opens.

The three figures in an opened row stack in one column, and the tools wrap. 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. The block has no autoplay and nothing loops.