Service Dependency Map Changelog Block for React

Edit FOCI at the top of the file. Each entry is a service you can pick: its name, the next version, a change clause for the caption, and two typed lists, dependsOn and usedBy, of links (id, a note, and breaking for an edge the release breaks). The curves, the glyphs, the column counts and the "3 downstream services affected" line are all computed from those lists. A side can hold up to four services; raise SLOTS for more.

Three ways, none of them a colour: its curve is heavier, a round chip with a warning glyph sits on it, and the service's own box has a foreground outline, a glyph and the words "Breaks: …" in its note. Screen readers hear "Breaking change" on those services, and the caption says how many there are.

The SVG and the chips are decoration, hidden from assistive technology: every fact in the drawing is in the three lists as text, in reading order (Depends on, Changing, Used by). The figure keeps its left-to-right layout in a right-to-left page, since the columns are a picture of direction, while text inside the boxes follows the page.

It is a single-choice Toggle Group: the arrow keys move between Orders, Billing and Search and Space or Enter picks one; pressing the chosen item again does nothing, so a service is always shown. The caption is a polite live region, so the new count is read when you switch.

Below the lg breakpoint the curves are dropped and each column becomes a labelled list stacked in reading order, with the chosen service as a dark chip between the two lists. Nothing scrolls sideways at 320 pixels.

The header and the figure fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears. Choosing another service redraws the curves at once, with no animation.