Feature Tour Login Block for React

Nothing leaves the page. Sign in waits under a spinner for less than a second, then shows "You're signed in" with the address you typed, and a polite status message says nothing was sent; Sign out brings the form back with your email still filled in. The tour is drawn from typed data (the lanes and cards, the tasks and the eight days of rows are all made up) and nothing in it is a real table. To wire the form for real, post the email and password to your auth endpoint where the code says so, keep the busy state until it answers, then redirect, or show its error under the field it concerns.

It's a real tab list: Tab moves focus onto the selected tab, and the arrow keys move between Boards, Timeline and Reports, with Home and End jumping to the first and last; the panel under the list changes with the selected tab. A tab is selected as soon as it gets focus. The drawings are hidden from assistive technology and the sentence under each is real text, so a screen reader hears what the tab shows.

Every drawing sits in a box of the same height (15 rem) and each sentence reserves two lines, so whichever tab is selected, the panel is the same size. A panel that varied would need an unseen copy of each panel in one grid cell; fixed sizes make that unnecessary.

They're built from plain boxes and bars in greyscale, with lane and task data typed at the top of the file: the Boards lanes hold cards with literal width classes, the Timeline rows have literal column classes on a twelve-column week grid, and the Reports bars take their height from the eight values, with the total worked out from them. Replace a drawing with a real screenshot of your own, or an image you have the rights to use, and keep its alt text empty if the sentence says what it shows.

A disabled button can't explain itself, and keyboard users can't reach it. Here it stays enabled: pressing it with an empty or malformed email, or no password, marks those fields invalid, writes one sentence under each and moves focus to the first, which reads its problem out. Typing clears that field's problem. The browser's own validation bubbles are turned off with noValidate, so the messages look the same in every browser, and each field keeps a line for its problem even when there is none, so a problem never pushes the page.

The form comes first in the markup, so Tab order and the reading order for a screen reader start with the sign-in and the heading, and on a phone, where the side is gone, nothing has to be reordered. The side is placed at the start of the band with two grid classes (lg:col-start-1 lg:row-start-1) and the divider is its end border. It follows the page direction, so in a right-to-left layout the side sits at the right.

The tour is hidden below 1024 px (max-lg:hidden), so a phone shows the product's mark, the heading, the form and the Sign in button, which ends on the first screen. The tour is a nice-to-have, so a phone user loses nothing needed to sign in.