Searchable Directory Team Block for React

Edit PEOPLE at the top of the file: each person is a name, a role, a department and a city. The two selects list the departments and cities found in that data, A to Z, behind an "All" option, and the count in the live line comes from the same list, so adding someone needs no other change. Initials are taken from the name.

The name and the role, ignoring case and accents, so "ferrer" and "design lead" both find Lucia Ferrer. Department and city have their own selects. The three filters combine: a search for "engineer" with Department set to Support shows only the support engineers.

The line beside the filters is a polite live region ("Showing 5 of 18 people", or "No one matches"), so each change is read once, without moving focus. The search field and both selects have names. Clear filters resets all three and puts focus back in the search field, because the button hides itself once nothing is filtered.

Yes, a table with a name, so a screen reader announces each cell with its column. It's a native table: Tab moves through the controls and the page, and the rows aren't tab stops.

The filters stack: the search on its own line, the two selects side by side, then the count and the clear button. The Department and City columns fold into a line under each role, eight rows are shown and a Show all button (it says how many) opens the others. The button reports whether the list is open and which list it controls, and it only appears while more than eight people match.

The table's area holds the height of the full list on screens from sm, so a short result leaves empty room below it instead of pulling the next section up. The empty state fills the same area.