Social Connect Login Block for React

The row of the only connected method counts as the last way in: its Disconnect button gets aria-disabled instead of disabled, so it stays focusable and pressable, and pressing it says why in the status line and never opens the dialog. The rule lives in the block's state (the list of connected methods), not in the button, so no path can reach zero. In your app enforce it on the server too, and count a passkey or an SSO login as a way in.

Disconnecting asks first in an Alert Dialog whose first focus is "Keep it", with no close on an outside click. Confirming removes the method and leaves an Undo in the foot; pressing it reconnects the method and puts back the method that was shown first. Connecting another method clears the Undo, because the last change is no longer the one on top. Focus moves to the button that replaced the one you pressed.

Everything. Connect marks a method as connected and links nothing, and the accounts shown are made up. For real, send the visitor to the provider to authorise on Connect and store the link when they return; on Disconnect revoke the provider's grant and delete your link, and only after the server confirms that another way in remains.

It is a Radio Group of the four methods, and only connected ones can be chosen: the others keep their place in the grid so nothing moves, but are hidden and out of the tab order. Choosing one says "Google will show first." in the status line. Disconnecting the chosen method moves the choice to the first one left, so the sign-in page never leads with something that isn't there.

Each row stacks: the tile and the name on top, the button under the detail line. The detail line keeps room for two lines so a longer message doesn't push the next row, and the radio choices form two columns. The panel keeps its height whatever is connected.

Yes. Every button is named for its method ("Disconnect GitHub", "Connect X"), the count of connected methods is text, the dialog traps focus and returns it, and one polite status line reports each change. The Undo is out of the tab order and the reading order when there is nothing to undo.