Split View Reviews Block for React

Each row is a checkbox in a Label, so the whole row is the target. The first tick shows that review in the pane; a second shows both in two columns on a desktop (stacked on a phone); a third unticks the oldest tick so there are never more than two, and the status line says which two. The "Both mention" line is the topics that appear in both reviews' mentions, or "No topic in common". Unticking the only picked review is ignored, with a note, so the pane is never empty.

Tab reaches the first checkbox; Space ticks it. Up and Down move focus to the checkbox above or below without ticking, as a shortcut over the rows: the checkboxes stay the normal way in, so a screen reader or a switch device works without it. Tab and Shift+Tab still walk the rows one by one.

On a desktop, the live pane and an unseen copy of every pair of reviews (and of the longest one alone) share one grid cell, so the cell is always as tall as the biggest case. Nothing below it moves whichever review you tick. The copy is aria-hidden and inert. On a phone the copy is hidden, because the pane is the last thing and the extra space would only show as a gap.

Edit REVIEWS at the top of the file: each has a title, text, rating, date, mentions (the topics it talks about, which the shared line compares), and an optional reply. The list order is the array order, the average in the header is worked out from the ratings, and the pane's height comes from the longest reviews, so a longer review needs no extra styling.

Yes. The list sits at the start, the divider and the seller reply's rail use logical sides, and the dates and ratings are wrapped so their digits stay in order. The arrow keys move through the rows in either direction because they follow the list's order, not the screen's.