App Review Reply Testimonials Block for React

Edit REVIEWS at the top of the file: each review has its author, initials, stars, title, body, reply and a relative time written as words (such as "2 weeks ago", so it never goes stale). TEAM sets the name in "Reply from the Kestrel team", LISTING holds the rating shown in the panel's top bar, and STATS is the row of three figures beside the header. OPEN_FIRST is the index of the review whose reply is open from the start; the others get the "Show reply" button.

The button is the trigger of a Collapsible: a tap, click, Enter or Space opens the reply with a short height transition and turns the label into "Hide reply"; with reduced motion it opens at once. The button reports whether it is open to assistive technology, and it's named "Show reply from the team", so it still makes sense out of context.

The stars are decoration, drawn in the text colour (filled) and the border colour (empty), and each review carries the same rating as text for screen readers: "Rated 5 out of 5". They show a rating a customer gave; they are not a control. The reviews, replies and store figures in the demo are made up: replace them with your own, and only show reviews you have the right to quote.

Each review is a list item with an h3 for the title, a figure with a blockquote for the review and a figcaption for the reviewer. The reply follows in reading order, under its own "Reply from the Kestrel team" line with a "Team" badge. The initials avatars, the frame's lines and the + marks are hidden, since names are written beside them.

It's set at max-w-md, about a phone's width, so the reviews read the way they would in the app and a long line never runs across a wide screen. Change that class on the panel for a wider one; the bands fill whatever width they are given. Below the large breakpoint the two columns stack and the panel is centred.

Yes. The divider, the reply's indent and rule sit on the inline start side, so they flip with the reading direction, the chevron on the button turns with it, and each review's text and every figure sit in a bdi.