Search Testimonials Block for React

Edit PEOPLE at the top of the file: each person has a quote, name, role, company and initials. The search reads only the quote text, which is also the text that gets marked, so a result always shows why it matched. Add as many quotes as you like; the band reserves room for all of them.

The text you type, anywhere in a quote, ignoring case and accents. A phrase matches as a phrase, so "dark mode" finds only quotes that have those two words together. It is a plain text search, not a pattern: characters like a dot or a bracket just match themselves. For fuzzy matching, swap the matches helper and give the highlight your own matcher.

The box is a search landmark with a label, and the matched words are real mark elements. The result count is read out by a hidden polite status line a moment after you stop typing, so it isn't repeated on every keystroke; the visible count beside it is hidden from screen readers so it isn't read twice. Quotes that do not match are taken out of the page for screen readers as well as for the eye, and the "All 8 quotes" button reports whether the rest are shown.

Press Escape in the box, or Tab to the Clear button that appears beside it and press Enter. Either one empties the box and keeps focus there. The empty state's Clear search button does the same.

An unseen copy of all eight rows sits in the same grid cell as the live list, so the band keeps its full height while the quotes you searched out leave. The copy is hidden from screen readers and can't take focus. On a phone the copy follows the "All 8 quotes" button, so a search with more matches than the four shown by default grows the list; that is the one deliberate shift.

With reduced motion the marks are simply there, with no underline-then-fill, and the block appears without a fade. In a right-to-left page the header, the box and the rows mirror, and each quote keeps its curly marks in place.