Team Members Settings Block for React

Edit START: each member has an id, a name, an address, a role (job), whether they use two-factor and the last day they were active as an ISO date. JOBS lists the roles a member can be given, SEATS is what the plan includes and AS_OF is the day the last-active column counts from, so the page reads the same every time. The seat meter, the two-factor meter, the counts and the hints are all worked out from the list.

Tick the members, pick a role in the foot's menu and press Change role. The button waits quietly until both a member and a role are chosen, and pressing it early says which is missing and moves focus there. The menu doesn't act on its own when you arrow through it, so a keyboard or screen reader user can't change five people by accident. A single person's role changes as soon as you choose it in their row, and the status line names who and what.

Because every step can be undone. Remove marks the ticked members as removed, frees their seats and leaves their rows in place as struck lines, and Undo puts the list back as it was before the last change, up to five steps. The status line says what was removed and how many seats are in use. If your product can't take a removal back, ask in an alert dialog first, as the destructive blocks in this category do.

Everything. Roles and removals only change the list in the page, and nobody is told or signed out. To make it real, send each change from setJob, changeRole and removePicked to your server, and let it keep the rules the page only shows: the owner can't be changed or removed, a plan has a seat limit, and a removed member's sessions end. Replace the list with the server's answer.

Tab runs through the select-all box, each member's box and role menu, then the foot: Undo, the role menu, Change role and Remove. Every box and menu is named for its member ("Select Calum Rennick", "Role for Calum Rennick"). Change role, Remove and Undo stay focusable while they have nothing to do and explain why in the status line, which is the one live region. Removed members read as "Removed in this demo".

Each member is a card with the same box, role menu and facts, and the foot stays pinned to the bottom of the screen while the panel scrolls under it, with the status line and Undo on top, the role menu below and Change role and Remove under that.