Tabbed Sections Reviews Block for React

Each group is a typed list at the top of the file: RECENT, HELPFUL, CRITICAL and VERIFIED are built from REVIEWS with a sort or a filter, and TABS gives each a label, a count, a note and the three rows shown (SHOWN). Add a tab by adding an entry to TABS; the trigger, the count and the panel come from it. The "With photos" tab of other review lists is left out, since no review here carries a photo.

From the length of each group: all 18 reviews for the first two tabs, the reviews rated 1 or 2 stars for Critical, and the verified purchases for the last. Tab names include the count for screen readers ("Critical 4 reviews").

All four panels are drawn together, unseen, in the same grid cell, and the live panel sits on top of them, so the cell keeps the height of the tallest panel. The unseen copies are hidden from assistive technology and the keyboard.

The tab list is one tab stop; the arrow keys move between tabs and Home and End jump to the ends. The panel follows the selected tab, and each review keeps its title as an h3 under the section's h2. Tabs select as they receive focus.

The four tabs scroll sideways inside the band, with the selected one kept in view, and each panel's rows stack the reviewer above the text. Nothing scrolls the page sideways at 320 pixels.