Step Verification Accordion Login Block for React

Everything. Any address that looks like an email and any password open the next section, and the code section accepts 482913, printed once under the field. Verifying waits less than a second, then the accordion gives way to "You're signed in" in the same space, with a polite status message saying nothing was sent. In a product, check each answer with your server as it's given and keep the busy state until it answers.

It stays focusable, on purpose: a disabled row would drop out of the tab order and leave a keyboard user with no way to learn why. Pressing or activating it changes nothing in the sections and a polite message says "Finish email first.", naming the step that is waiting. A lock icon and the words "Locked until email is done" say the same on the row.

Pressing a finished section's row, marked "Edit", reopens it and locks the sections after it. They keep what you typed, apart from the code, so you confirm them again in order: finishing the email opens the password with its old value still there. A polite message says which section is being edited.

Tab goes through the open section's fields and button and the rows' triggers, and Enter or Space on a trigger opens it when it's allowed. The arrow keys don't move between the triggers here, so use Tab. Each row is a heading with a button inside, so a screen reader's heading list shows the three steps.

Every section's body is one fixed height, tall enough for the tallest (the code), so opening one while another closes moves nothing, and the result that replaces the accordion shares its space. The page is centered, so anything that grew would move the heading too.