Venn Diagram Overlap Features Block for React

Edit REGIONS at the top of the file: each zone has an id (the letters of the groups it is in), a label for the caption, its count and the point where its chip sits. The three groups' totals, "only here" and "in others too" figures are summed from those seven counts, so they always agree with the diagram. GROUPS holds each group's name and sentence.

Each zone is one of the circles, cut or clipped by the others: a zone that is only in one group is its circle with the other two masked out, a pairs-only zone is one circle clipped to another with the third masked out, and the middle is the three clips nested. Only the chosen zone is filled, so the diagram stays one drawing with one hairline per circle.

The zones are one group of radio buttons: Tab puts focus on the chosen zone and the arrow keys move through the seven in reading order, choosing one as they go. Each chip's accessible name is the zone and its count ("Trial and Power: 980 users"), and the caption is a live output, so the choice is announced.

It is a plain link (href="#") in the caption: point it at your segment editor and pass the zone, since the zone's id is the chosen radio's value. The link has no asChild or render because it is not a button.

The figure keeps its square shape and shrinks to the width; each count chip keeps a 44 pixel touch target around a smaller mark. The caption wraps with the link under the text, and the three cells stack, one per row.

No: the circles keep their places, so the figure is dir="ltr". The header, the caption and the cells follow the page's direction, and the arrow on the link mirrors.