Transfer Ownership Settings Block for React

Shown open in place for the preview: on load a copy of the alert is drawn over the members list as a native non-modal dialog element, so nothing is trapped or focused and the page around it stays readable. Press Transfer ownership in the header and the real Alert Dialog opens, with its focus trap, Escape, focus on Cancel and no close on an outside click; the in-place copy stays closed until a reload. Both share one content component and the same state, so what you chose in place is there in the real one. In your app keep only the Alert Dialog.

Step one needs an admin chosen: Continue waits quietly and, pressed early, says Choose an admin first and moves focus to the list. Step two has nothing to fill in and shows the table and what moves, with Back to return. Step three needs the workspace name exactly, capitals included, and the line under the field says Matches or Does not match as you type. Cancel, Escape and the in-place Cancel all leave everything as it was.

Nobody's role changes. The dialog closes, the head of the members list says Transfer pending until that person accepts, the header's button reads Transfer pending and waits, and Cancel transfer puts everything back with focus on Transfer ownership. A real product keeps the current owner in charge until the other person accepts, and expires the offer; this demo has no clock, so the offer stays until you cancel it.

Edit PEOPLE (an id, a name, an address and a role of owner, admin, editor or viewer), WORKSPACE (the name to type) and MOVES (what the new owner gains). The admins listed in step one, the counts and the before and after table all come from PEOPLE.

Everything. Nothing is transferred or emailed, and the status line says so. To make it real, send the chosen person's id from submit on the last step, let your server email them and hold the offer, and keep the rules there: only the owner can start a transfer, only an admin can be offered it and the offer needs the other person's acceptance.

The dialog is an alert dialog: focus starts on Cancel and stays inside until it closes, Escape closes it and focus returns to the trigger. Each step moves focus to its first control (the search, the review sentence, the name field), and a polite line inside the dialog says Step 2 of 3: Review. The admins are native radios in a labelled group, so arrow keys and a click on the whole row work. While the real dialog is open the page's own status line is muted so it isn't spoken twice.