Moderation Queue Reviews Block for React

While focus is anywhere inside the block: on a queue row, on a button, on the review. They don't listen on the rest of the page, so typing elsewhere is never taken. Each key makes the same decision as its button and moves on to the next review that is still waiting. Holding a key down doesn't repeat the decision, and a key combined with Control, Alt or Command is left alone. The buttons carry aria-keyshortcuts where the library keeps it.

The last decision, and as many before it as you press it for: the block keeps a short trail of what each review was before you decided. Undo returns to that review, sets it back to its earlier state and puts focus on Approve. It is switched off when there is nothing to take back. Two reviews are already rejected when the page loads, and those can't be undone because you didn't decide them.

Moderation that hides honest criticism is not moderation. Three of the eight held reviews are low or middling ratings that no rule is broken by, held only because readers reported them; the right decision for them is Approve. The rest are held for a phone number, a link to another shop, abusive words or a private person's name, which are the reasons a review can be rejected. Change HELD to put your own reviews and reasons in.

No. Every decision changes the rows on this page and nothing else; the status line says "Nothing is published in this demo", and a reload starts afresh. To make it real, send the review's id and the verdict to your own endpoint from the decide helper and seed the initial verdicts from your data.

No. The review in focus and an unseen copy of all eight share one grid cell, so the buttons and the status line never move whichever review you open. The queue shows every row at once, so its height is fixed too.

Yes. The queue and the review swap sides, the divider follows, and the counts, dates and phrases such as "Review 1 of 8" are each wrapped so their digits stay in order. The key caps keep their letters.