Keyword Highlight Testimonials Block for React

Edit KEYWORDS and QUOTES at the top of the file. A quote is a list of parts; give a part a topic matching a keyword's value and those words become markable. Counts, the status line, the dimming and the lit bar are all derived from that data, so nothing else needs editing.

The chips are a Toggle Group of pressable buttons with nothing pressed at rest, and only the latest one you press stays on. Pressing a chip marks that keyword in every quote that mentions it; pressing it again, or pressing Clear at the end of the status line, goes back to the resting state. Quotes that don't mention the keyword stay where they are, in a quieter text colour, so this is a highlighter, not a filter: use a filter block if you want quotes to disappear.

Tab moves into the chips, and the arrow keys move between them; Space or Enter presses one. Each chip reads its name, its pressed state and how many quotes mention it, and a polite status line announces the result, such as "Dark mode comes up in 2 of 5 quotes". The marked words are a real mark element, so assistive technology that announces highlights will do so.

No. Marking words doesn't change their size, the Clear button keeps its space while it is hidden, and the status row reserves its height, so nothing moves when the selection changes. With reduced motion the bar's fade and the colour change are instant and the entrance doesn't play.

The last band holds a Shine Button, the only primary control in the block, linking to href="#": point it at your sign-up. It's a ShineButton with render set to an a element and nativeButton={false}.

Yes. The quotes sit in a bdi so their quotation marks stay at the ends of each sentence, the author column moves to the right, and the lit bar sits on the reading start edge.