Accordion Mentorship Team Block for React

Edit PAIRS at the top of the file. A pair is an id, a mentor and a mentee (each a name and a role), a focus for the row, a goal, how many sessions are held and when the pair meets. TOTAL is the number of sessions every pair plans, and OPEN_PAIR names the row that is open on load. The header's counts are added up from the pairs, so they always agree with the rows.

Yes. The two avatars and the arrow sit in one row that follows the page direction, so the mentor is at the start and the arrow points at the mentee in either direction; the arrow also mirrors. Screen readers hear "Jun Watanabe mentors Olu Adeyemi", because the word is written out between the names; the avatars and the arrow are decoration.

Add multiple to the Accordion.

Each pair is a button inside its own h3 under the section's h2. Tab moves from row to row, and Enter or Space opens and closes one. This library leaves the arrows to Tab: every row is a tab stop, with no arrow-key roving between them.

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

The bar is decoration. The count beside it, "6 of 8 held", carries the number as text. The bar is the block's foreground colour rather than the theme's primary, so the primary colour stays free for your own main action.

All six rows show, because they are short. The panel's text starts at the row's edge instead of lining up under the names, and its four parts stack one above the other, so nothing scrolls sideways at 320 pixels.