Tabbed Sign In And Sign Up Login Block for React

Everything stays in the page. Sending either form waits less than a second and shows what a real product would do next in the card's own space, with a polite status message saying nothing was sent. The Google row opens nothing: it says where a real one would send the visitor and offers a way back that returns focus to the row. Its tile is two typed letters, a placeholder for a logo you have the right to use under the provider's brand terms.

The email only, because a visitor who has typed it once shouldn't type it again. Passwords are kept apart, so a password for signing in never becomes the new one for sign-up, and the name belongs to sign-up. The problems of one tab aren't shown on the other, and a polite message says which tab is showing and that the email is kept.

An unseen copy of both panels sits in the same grid cell as the real one, so the cell is as tall as the taller panel whichever tab is showing. The copy is hidden from assistive technology, out of the tab order and uses its own ids, so nothing is announced twice. The page is centered, so any change in height would move the heading.

Tab reaches the selected tab, then the arrow keys move between "Sign in" and "Create account" and show the panel, and the panel's own fields follow in the tab order. Screen readers hear a tab list with two tabs and a labelled panel for each.

No: only the panel of the selected tab is rendered, apart from the unseen copy that holds the height. What you typed lives in the block's own state, so it's still there when you switch back, and the real fields are rebuilt each time.

A disabled button can't say why, and keyboard users can't reach it. Pressing Sign in or Create account early marks the fields at fault, writes one sentence under each and moves focus to the first, and every field keeps a line for its problem even when there is none, so nothing moves when one appears.