Matching Diagram Mentors Team Block for React

Edit PAIRS at the top of the file: each pair is an id, a mentor and a mentee (a name and a role each), a focus and the sessions held so far. The mentors keep that order; MENTEE_ORDER is where each pair stands in the learners' column (the pair's position in PAIRS at each row), and the curves are drawn from the two positions, so changing the order redraws them. Keep the list at about six: each person has a 56 pixel row.

The people are buttons in two lists. Each one's name ends with who they are matched with ("Tariq Mansour, Cabinet maker, Mentors Eun-ji Park"), and a button says whether it is pressed. The curves and the diagram's title are hidden from assistive technology: everything the lines show is already in the names. Pinning a pair is announced through a polite status line under the diagram.

Tab moves from person to person through the mentors and then the learners, and each focused person draws their pair, so the diagram follows focus the way it follows the pointer. Enter or Space pins the pair, and again unpins it. A pinned pair stays drawn when nothing else is focused or hovered.

Yes. The columns swap sides with the page direction, so the mentors are still at the start, and the drawing is mirrored so each curve still runs from a mentor to their learner.

When you follow a pair, the curves change weight and the other avatars and names fade to a quieter colour, over a third of a second, and the block fades up once on load. With reduced motion these are instant changes and the block simply appears. Nothing moves by itself.

The two columns and the space between them need about 700 pixels, and a diagram that scrolls sideways can't be read at a glance. Below md the block shows a list of the same pairs: the avatars with an arrow, the names, the focus and the number of sessions. Both versions are in the page, and only the one that fits is shown.