Keyword Mentions Reviews Block for React

Replace REVIEWS and TOPICS at the top of the file. A topic is an id, a label and a list of whole lower-case words; a review mentions it when its title or text contains one of them. The counts, the bar widths (a share of all reviews), the averages (in tenths, by whole-number maths) and the above-or-below verdicts are worked out from that, so a new topic needs no other change. Choose keywords that the topic's reviews really use, or the numbers will be off.

The average rating of the reviews that mention the topic, to one decimal, set against the average of all reviews. "Above overall" and "Below overall" are the sign of the difference; a topic whose average equals the overall one reads as above with a zero. A topic mentioned only in unhappy reviews, like delivery, shows a low average even if most owners never mention it, which is the point: the table shows what the people who raise it think.

Press Topic, Mentions or Average. Topics start A to Z; the numbers start with the highest. Press the same header again to reverse. Each header's th carries aria-sort, and a polite note reads the new order out. Rows with equal values fall back to A to Z, so the order never jumps around.

It narrows the reviews under the table to those that mention it, newest first, and tints the topic's row with a check. Press it again, or press Clear, to see every review. The line under the table counts the matches and is read out politely. An unseen copy of the three tallest reviews holds the list's height, so nothing below the block moves.

The table keeps its three columns, the share bar is hidden, and the verdict shows its arrow and sign only, with "Above overall" or "Below overall" in text for screen readers. The first review is on the second screen.

Yes. The columns, bars (which fill from the start) and review columns follow the page's direction; the arrows tilt toward the end, so they are mirrored, and the signed numbers are isolated with a true minus so they keep their order.