Accordion Expandable Reviews Block for React

Edit REVIEWS at the top of the file. Each entry has a body, a date, a helpful count, an id, the name, a rating, a title and a reply; leave reply empty and the reply box doesn't draw. The seller's replies are typed text, as the block sends nothing, and the "have a reply" count in the header is worked out from them.

Any number. The open rows are held in the block, so Expand all opens all twelve, the label turns into Collapse all, and a polite line says "All 12 reviews are open." Opening or closing a single row afterwards keeps the rest as they were. The Accordion takes multiple and a controlled value.

Yes. The Accordion takes hiddenUntilFound, so closed reviews stay in the markup as hidden="until-found" and the browser's find in page opens the row that holds a match.

Each row's trigger is a button inside its own h3, so a headings list shows all twelve titles, and it says whether it is expanded. Tab moves from row to row and into an open row's Helpful button; Enter or Space opens and closes a row. This library's accordion does not move between rows with the arrows: use Tab.

The trigger wraps to two or three short lines: the stars and their number, the title, then the reviewer and date. The one-line excerpt is dropped until the row opens, and the open review stacks the reviewer, the text, the vote and the reply.