No Bug Reports Empty State Block for React

The reports live in the page's state: a reload empties them, and Start over empties them without one. Nothing is sent, and the status line says so ("Nothing was sent."). To wire it for real, post the title, severity and steps to your tracker where the code says so, add the row from the response, and compute the four counters from your own list.

Only the title is required. An empty one says "Give the report a title." in a line under the field and keeps focus there, and the field's hint reads "Up to 60 characters." once it has text. The severity is a group that always keeps one choice (Medium to start) and the steps are optional, up to 200 characters. After a report is added the form is empty again and focus goes back to the title for the next one.

It is hidden from assistive technology; the counters and the table say the same in text. The beetle in it is dashed while there are no reports and turns solid with the first, and a second and a third small beetle join it as reports three, so the jar fills as the table does. The demo lists three reports; the fourth press says so and moves focus to Start over.

Each counter is the number of reports with that severity, counted from the same list the table shows, so they can never disagree. The table is a native one with a caption, column headers and the report's title as the row header; the filed date is a typed day shown in a time element and drops out on a phone.

Tab runs the title, the four severities, the steps, Submit report and Start over, which stays quiet and says "Nothing to start over." until there is something to clear. A polite status line says each change.

The jar sits above the copy at 140 px tall, and Submit report is pinned to the foot of the screen while the form is in view, so it is always in reach. The counters and the table come last; the table drops its date column. Nothing scrolls sideways, even at 320 px wide.