Reproduction Steps Report Contact Block for React

Each step is its own input in an ordered list, named "Step 1", "Step 2" for a screen reader. "Add step" adds a row and moves focus into it, up to MAX_STEPS (six); once there are more than two, each row has a remove button, and removing one sends focus back to "Add step". A polite line says what changed ("Step 6 removed. 5 steps."). Every row has a stable id, so removing the middle one never mixes up the text.

It lists the five things a report needs and fills each one in as the form meets it, with a count underneath. Each row carries "Done:" or "Needed:" for screen readers, and the count is spoken about 600 milliseconds after the last change instead of on every key. The severity line under the count changes with the chosen severity (all four wordings share one grid cell, so nothing moves).

No. The file stays in the visitor's browser tab and only its name is listed; nothing is sent. A file that is not an image or a text log, or that is over 5 MB, or a third file, is refused with a polite line saying which and why; a drop that mixes good and refused files keeps the good ones. To make it real, send the files where submit waits and check them again on your server.

Nowhere yet. The submit waits 800 milliseconds as a stand-in for a request, then shows a confirmation that says plainly it was saved in the demo only. Replace the timer in submit with your tracker's API: title, steps, severity, expected, actual and files hold everything.

Yes, by one row for each step: that is the content growing, and the confirmation keeps the form's height at the moment you send. Everything else (the severity note, the panel rows, the status lines) holds its space.

The cells stack with the form first and the panel after it, severity becomes two by two, Expected sits over Actual, and the button goes full width. Nothing scrolls sideways at 320 pixels.