Diagram FAQ Block for React

The diagram is decoration, hidden from assistive technology; the four steps carry the same words and are the real controls. Hovering or focusing a step lights its arrow and fades the rest; pressing a step pins it (aria-pressed) so it stays lit when the pointer leaves, and pressing it again unpins it. Nothing is pinned to start, so every arrow shows at full strength.

Edit STEPS and LIFELINES at the top of the file. A step has an id, the short label on its arrow, a title and text for the list, gap (0 for an arrow between the first two lifelines, 1 between the last two) and toward, which is start or end along the reading direction. Three lifelines and four arrows fit a 320-pixel phone; a longer flow needs a taller figure, not a wider one.

Yes. The lifelines are columns of a grid and the arrows use start and end, so the order of the three participants and the direction of every arrowhead mirror with the page. The labels on the arrows are code-like strings and stay as written.

Yes. The Accordion takes hiddenUntilFound, so closed answers stay in the markup as hidden="until-found" and the browser's find in page opens the one that holds a match.

Each question is a button inside its own h3 under the section's h2. Tab moves from question to question and, in an open answer, through the steps; Enter or Space opens a question or pins a step.

The header stays centred, the rows run the width of the column, and in the open answer the steps stack under the diagram, which shrinks to the width of the screen. Arrow labels are short on purpose and truncate rather than overflow at 320 pixels.