Social Connect Onboarding Block for React

X: letters, numbers and underscores, 15 at most. LinkedIn: letters, numbers and dashes, 3 to 100. GitHub: letters, numbers and single dashes, 39 at most, not starting with a dash. A website: an address such as example.com, with an optional path. The patterns are in PATTERNS and the sentence for each is hint in NETWORKS; they check the shape only.

On every keystroke, in a line that is always reserved under the field so a message never moves the rows. That line is plain text and not a live region, so a screen reader is not interrupted while you type; pressing Save speaks the result in the status line, and a refused Save explains why and puts focus back in the field.

Save keeps the handle in this tab and turns the row into “Saved”: the field becomes read-only and the button reads Edit. Edit makes the field editable again and focuses it. A row with nothing typed, or with a handle the service would not accept, answers Save with a sentence and no change.

Everything. Nothing is looked up, so a handle that does not exist is accepted if its shape is right, and the card is a drawing of the page. In your app save the links where save says so, and if you want to confirm that a profile exists, do it on your server and answer in the same line under the field.

The step needs one saved link. Continue stays visible but quiet until there is one (X starts saved), and pressing it early says so and focuses the first field. Skip for now leaves the step.

The card moves above the rows and shrinks to one row, the owner's initials and name, while the links it would show are named in the sentence under it. The rows stack with the field full width and Save under it, and the foot pins to the bottom of the screen.