Permissions Account Block for React

Edit ROLES (an id and a label), set YOU to the signed-in person's role, and list the permissions in GROUPS: each has an id, a name and the roles that hold it. Every count on the page, the "14 of 22" in the heading and the per-group "5 of 7", is worked out from those lists, so there is nothing to keep in step. Pass a role id from your session in place of YOU to show each person their own column.

Request marks the row "Requested" and says "Requested from the owner in this demo. Nothing was sent." Undo takes the last request back. To make it real, post the permission and the requester in request, mark the row only when your server answers, and let your server say when a request is granted or refused. The matrix itself is read-only by design: it explains a role, it doesn't change one.

Each group row is a button with aria-expanded that shows or folds its rows, and says how many permissions each role holds in it ("5 of 7" under Editor). Members is open when the page loads, so a denied row and its Request button are in view. The folded rows are hidden from everyone, assistive technology included, and the chevron turns to show the state.

In three ways that don't depend on colour: the head cell is framed with plus marks and carries the word You, the column is a solid tint, and the narrow layout adds "(your role)" for screen readers. Cells say "Allowed" or "Not allowed" in words, so the matrix reads the same without the icons.

Four roles don't fit beside the names, so a row of four choices picks the role and its column shows alone, with the Request button in the last column for what your own role lacks. The tick or dash column, the group folds and the status line work the same. The foot with the status line and Undo stays pinned to the bottom of the screen.

It is a real table with a caption, column heads and a row head on every row, inside a keyboard-focusable scroll region. Request buttons are named for the permission ("Request Delete pages") and change to "Delete pages: requested", the status line is a polite live region present from the start, and the group buttons say how many permissions they hold and whether they are shown. The table is native on every library, so React Aria's arrow-key grid doesn't take over the page.