Row Comments Table Block for React

All comments live in one list in state, each with the clause it belongs to. The thread is that list filtered by the open clause and every count in the table is the length of the same filter, so posting a comment updates the count, the heading of the pane and the totals above the table together.

The text is trimmed and added to the end of the open clause's thread, signed with "You" and dated with a fixed time, the box is cleared, the thread scrolls to the new comment and focus lands on it. Posting nothing does not add anything: the status line says what is missing and focus goes back to the box.

Tab reaches each count, which is a toggle button, and Enter or Space opens its thread. While focus is anywhere in the block, Escape closes the thread and returns focus to the count that opened it. On a phone Back does the same, so the table and the buttons are always where you left them.

Below the large breakpoint the table and the thread are one pane at a time. Pressing a count shows the thread with focus on its heading, and Back to the list brings the table back with focus on the count. The owner and status fold under the clause's title, and both views keep the same height.

The count buttons say what they do ("3 comments on Clause 4") and report aria-pressed. The thread is a named, scrollable region, the composer's box is labelled with the clause it posts to, and results are read out through one polite status line. Status is a word beside a dot, never colour alone.

Comments are typed in the file and a new one exists only in this page, signed "You", so nothing is sent and reloading clears it. To use real threads, load your comments into COMMENTS, send the text in post to your server, and add the saved comment to the list from the response.