Highlight Filter Team Block for React

Edit PEOPLE and DEPARTMENTS at the top of the file. A person is a name, a role and a department; the chips' headcounts and the live line are counted from the same data. Keep the people in the order you want them on the wall: the file doesn't re-sort them. Eighteen fills the rows at three and six columns; another count leaves a short last row, which still has its lines because each cell draws its own.

Hiding leaves holes and makes the block shrink, which moves everything below it. Dimming keeps every cell where it was: the cell takes a light tint, the avatar turns to an outline and the name to the muted colour, all at AA contrast in light and dark themes, while the picked people's avatars fill solid. Nothing is removed from the list, so a screen reader still meets all eighteen, and it also reads the department after each role.

They are a toggle group named Departments: Tab moves into it, the arrow keys move between chips, and Space or Enter presses one. Several can be pressed at once, and with none pressed everyone is shown normally. Each chip is read with its headcount ("Engineering, 5 people"), and a polite line says how many people are highlighted ("7 of 18 people highlighted").

The chips scroll sideways from rail to rail, with the next chip peeking in. The wall is three columns and shows all eighteen people, six short rows, so a picked department is never hidden behind a button; the roles are read by screen readers but not shown, to keep the cells small. Picking a chip changes colours only, so the page does not move.

Each cell draws only its end and bottom borders, and a wrapper clips the last column's and the last row's, so the page's rails and the next block's top rule close the wall without doubling. The band's rule and the wall's top rule, with + marks where they meet the rails, come from Guides.