Linked Accounts Account Block for React

Edit PROVIDERS and ACCOUNT at the top. Each provider has an id, a two-letter mark for its neutral tile, a name, the email it returned and whether it is verified at the provider; ACCOUNT is the address this account was made with. A provider whose address equals ACCOUNT needs no choice, and every other one gets the radio cards, starting from the safe answer in START (keep it separate). The header count, the Signs in to column and the status line are all worked out from the choices, so they cannot disagree with the table.

Choosing, Apply and Discard only change this page's state: Apply says "Done in this demo. Nothing was sent." and no address is added to any account and no provider is contacted. To wire it, send the decisions in apply to your server, which should add the provider's address to the account only when the provider says it is verified, and load the returned addresses into PROVIDERS from your own link records.

If an address that a provider has not verified could be attached to an account, anyone who typed someone else's address at that provider could take over the matching account. So that card is disabled with the reason in text, the choice stays on Keep it separate, and the account count says that signing in with it would create a new account. A provider that verifies the address makes both cards available.

Each pair is a native radio group named for its provider, so Tab reaches the checked card and the arrow keys move between the two, with the same ring on every library. A disabled card is skipped. The radio's name is its title and its sentence is its description. The cards are the radios' labels, so clicking anywhere on one picks it.

It is a real table with a caption, column headers with scope, and a row header for each provider. The tiles are hidden from assistive technology because the name is always beside them, and the badges say their state in words. On a phone the head row is kept for screen readers and every cell carries its own label, so each card reads the same. One polite status line reports Apply, Discard and an empty press.

Each provider is a card: the tile and name, then the address, the verification and where it leads as labelled lines, then the two choices stacked. The status line and the Apply and Discard buttons pin to the bottom of the screen while the cards scroll under them.