Quick Actions Login Block for React

Everything. The five destinations, their notes, the signed-in address and the switch are typed, any password is accepted, and a sign-in only shows where a real one would land you. In a product, send the chosen destination (as a path, validated against your own routes) with the sign-in request, and store the always-resume choice on the account.

While focus is anywhere in the block but a text field, the digits 1 to 5 choose the row with that number, say so in a polite message and move focus to it. They are not bound to the page, so they never fight the browser, and they are ignored with Ctrl, Alt or Command held, in the password field (where digits are typing) and while the switch is on.

Turned on, it chooses Resume the Q4 plan, dims the other rows (they leave the Tab order, and the text under the switch says why) and the button reads "Sign in and open the Q4 plan". Turned off, the rows are live again with the first still chosen. It is a native-feeling switch named by its own text, in the foreground color rather than the primary one.

So the one thing the person is about to do is always spelled out: "Sign in and open Website" names where they will land. An empty password is caught on the press: it says "Enter your password." under the field and moves focus there, and nothing is submitted.

They are native radio inputs in one list named "Where to land after you sign in". Each row is read as its title with the note as its description, and announces the shortcut key. The key caps drawn at the end of a row are hidden from assistive technology so the name stays short.

The destinations stack above the password, the key caps and the long sentence under the heading are dropped (the keys still work with a keyboard), and the button is pinned to the foot of the screen so it is always reachable while the rows scroll.