Bulk Actions Reviews Block for React

Edit REVIEWS at the top of the file: each review has a start status (pending, published or hidden) and, for a hidden one, a held reason shown under its title. The tab counts, the "10 reviews, 4 pending" line and the table rows are worked out from the current status of each row, so the numbers always match what the table shows.

The checkbox in the head chooses every row of the open tab, shows a dash when only some of them are chosen and clears them when pressed again. Changing tab clears the choice, so "3 selected" never counts rows you can't see. Each row's checkbox is named with its title, so a screen reader says what is being chosen. The dash is drawn by the block itself, because this checkbox draws a tick in its partial state.

It opens a Dialog that says how many reviews are about to go and that deleting is for abuse, spam and personal data, with "hide a review instead if you are not sure". Confirming removes the rows from this table and the counts drop; nothing is deleted anywhere and a reload starts afresh. Publish and Hide change the status only, and the line in the band says what was done and that nothing is published in this demo.

An unseen copy of the full table sits in the same grid cell as the open panel, so the block is always as tall as the All tab started out, whichever tab is open, whatever you delete. The band is outside the panels, so it never moves either.

Rating, Reviewer and Date heads are buttons, and the head's aria-sort follows the order. Each column starts in its natural direction (best, A to Z and newest first), and pressing it again reverses it. The order applies to whichever tab is open; ties fall back to the review's id so it never shuffles.

Yes. The select column, the heads and the cells follow the page's direction, and dates, counts and ratings are each wrapped so their digits stay in order. The sort arrows don't mirror: up and down mean the same everywhere.