Role Selection Onboarding Block for React

Edit ROLES. Each role has an id, a title, the line on the card (opens), where the user starts (start) and what is added there (also); the sentence joins the last two as “will start you on {start}, with {also}”. Add the icon for a new role to RoleGlyph. Keep the id other for the card that has the field.

The page's one polite status. Before a pick it says to choose a role; after a pick it names the start view for it; after Continue it says “Saved in this demo” and repeats it. It is always at least two lines high, so a longer sentence never moves the buttons, and screen readers hear it each time a pick changes it.

Continue stays in the tab order and looks quiet until a role is picked. Pressing it, or pressing Enter on it, says “Choose a role to continue.” in a line under the stack that is always reserved, and puts focus on the first card. With Something else picked and fewer than three characters in its field, it asks you to say what you do in a few words and focuses the field.

It is always in the card, so the page never grows: it is switched off until that card is picked, then it takes typing. The text is not part of the sentence; it is yours to send with the answer. Picking another card switches it off again and keeps what was typed.

Everything. Continue says the role was saved in this demo and nothing leaves the page. In your app send role (and the field's text when the role is other) to your server where submit says so, open the view its response names, and keep the sentence as the preview of what was accepted. Skip for now says it was skipped and keeps what was picked.

Tab reaches the stack as one stop and the arrow keys move between cards and pick them; Tab again reaches the field when its card is picked, then Continue and Skip. On a phone each card shows only its icon and name (the line stays for screen readers) and Continue sticks to the foot of the screen, so it is always in reach.