Highlighted Phrases Reviews Block for React

Edit THEMES (an id, a label and a tone of praise or complaint) and REVIEWS at the top of the file. A review's text is a list of parts: plain text has an empty theme, and a picked phrase names the id of its theme. The index counts, the summary line and the status line are worked out from the parts, so adding a phrase or a theme needs no other change. Pick phrases yourself, or have your team do it; the block makes no claim that the choice is automatic.

By shape and words: praise has a plus and a solid underline, a complaint a minus and a dashed underline, and each mark starts with "Praise:" or "Complaint:" in text that only screen readers hear. In the index each kind has the same plus or minus, and its accessible name begins with the same word and ends with its count ("Praise: Warm light, 2 phrases").

It makes only that kind stand out. With none pressed every mark is full strength; with some pressed, their marks take a soft tint and the rest step back to a muted tone with a faint underline. Weight and size never change, so no line of text reflows and nothing moves. A polite line says "Showing 2 of 7 kinds of phrase" after each change.

The index moves above the reviews and becomes a row that scrolls sideways, so its summary and the first review share the first two screens; the reading column then follows at full width. Each index item keeps its glyph, its label and its count.

Tab into the index, move between kinds with the arrow keys and press Space or Enter to choose or drop one. The marks are plain text, so a screen reader reads the review straight through with each mark announced by its word.

Yes. The two parts swap sides, the glyph sits at the start of each mark, stars are mirrored so they fill from the start, and counts and dates are isolated so their digits keep their order. Marks that wrap onto a second line keep their underline and tint on both lines.