Annotated Group Portrait Gallery Block for React

Each entry in PEOPLE has a name, a role, initials, a tier (0 is the back row), an x position across the picture in percent and a hair style from 0 to 4. Add people to the list and give them a tier and an x; the key and the picture both read it. For a real photograph, swap the Scene and the drawn people for one <img> and place a chip button at each person's position, with the same x and top custom properties the drawn people use.

The key is the keyboard route: every row is a button, so Tab reaches each one, focusing it rings the person in the picture and Enter or Space pins that choice. The people in the picture are decorative duplicates of the rows, left out of the tab order and the accessibility tree, so nothing is announced twice. Pointing at a person works as well, and a touch press on them pins them.

The key is a list named by the heading: each row reads as a button with the name and the role ("Kofi Mensah, Hydrologist, toggle button, not pressed"). When a person is ringed the caption under the picture, a polite live region, says "Kofi Mensah, Hydrologist, is ringed in the picture", and goes back to a plain description when nothing is chosen.

The picture goes first and the key under it. Only eight rows show, and a "Show all 14" button, with aria-expanded and aria-controls, opens the rest. The label stays the same whether the list is open or not; the button's state says which. On a desktop screen all fourteen rows are always shown beside the picture.

The picture is a drawing of a lineup, so it keeps its order and does not mirror; the key, the header and the caption follow the page's direction, and the key's tiers still match the picture's order, back to front.

Yes. The entrance on load is a CSS transition that turns off under prefers-reduced-motion, and the ring around a person appears with no movement at all. Nothing moves by itself.