Workspace Invites Settings Block for React

Edit RULES (a domain, the role it joins as and whether it asks for approval), REQUESTS (a name, an address, the role they asked for and their state) and JOBS (the roles a rule can give). The sentence under the rules table, the counts, the try-an-address answer and the line under each request are all worked out from those lists, and MAX_RULES is the limit the add form enforces.

By the domain after the last at sign, compared exactly and without regard to capitals. A rule for example.com does not cover mail.example.com; add that domain as its own rule if you want it. An address with no rule says No rule covers it and needs an invite, and an address that isn't complete yet says so instead of guessing. Requests show the same logic as a line under the name: the rule that holds them, or that no rule covers their domain.

An empty domain, an address with an at sign in it, anything that isn't a plain domain (spaces, slashes, wildcards or a missing dot), a domain that already has a rule and a seventh rule. Each refusal is a one-line reason under the field, the status line says the rule was not added and focus stays on the field. New rules ask for approval until you turn that off, which is the safe default.

Everything. Rules and answers only change the lists in the page; an approved person is not emailed and nobody joins. To make it real, send each change from addRule, changeJob, changeAsk, removeRule and answer to your server, let it send the invitation or the decline, and replace the lists with its answer. Keep the same rules there, since a form in a page can be bypassed.

Tab runs through each rule's role menu, approval switch and Remove, the add form, the try field and each request's buttons. Every control is named for its domain or person ("Joins as, example.com", "Approve Zainab Quartey"). When a button is replaced, as Remove or Approve is, focus moves to the next rule's Remove or to the answer's Undo. A reason under a field is tied to it with aria-describedby, and the status line is the one live region.

Each rule is a card with its domain and Remove, then the role menu and the approval switch on their own lines. The add form stacks its fields, and each request shows its buttons under the person.