Filterable Testimonials Block for React

Edit ROLES and PEOPLE at the top of the file. Each person lists every role they hold in roles, and a quote is shown when the person holds all of the picked roles. The chip counts, the status line and the empty state all come from the data, so adding a quote or a role needs no other change. The grid is four columns from lg; with a number of quotes that isn't a multiple of four, the last row is shorter.

A chip that isn't picked shows how many quotes would match with it added to the picks; a picked chip shows how many match now. With nothing picked, each chip shows its role's total. They are recounted from the data on every change, never typed, so they can't drift from the wall.

Each chip is a toggle button: Tab moves to the group, the arrow keys move between chips, and Space or Enter toggles one; it is announced as pressed or not pressed, with its count. A picked chip gets a foreground border and a tint, not the primary colour. When the picks change, a polite status line reads the result ("2 of 8 quotes shown"), so the wall's change is announced without moving focus. Clearing the filters returns focus to the first chip.

Below sm the eight cells become one row you swipe, each cell 85% of the width so the next quote is visible as the hint. The first quote starts on the first screen, with the chips above it. The row is a tab stop, so a keyboard can scroll it with the arrow keys. From sm the cells sit in a grid and nothing scrolls sideways.

An unseen copy of all eight cells sits in the same grid cell as the live wall, so the cell keeps its full height while the quotes you filtered out leave. The copy is hidden from screen readers and can't take focus. The empty state replaces the cells inside the same box, so it doesn't move the page either.

Quotes that come back fade in with CSS; with reduced motion they simply appear. In a right-to-left page the chips, the cells and the lines mirror, and each quote keeps its curly marks in place. The one call to action is a Shine Button, which sweeps a band of light once on hover or focus and only fades it in with reduced motion.