No Roles Empty State Block for React

The roles live in the page's state: reload and the key ring is bare, and Start over bares it without a reload. Nothing is saved or sent. To wire it for real, post the name and the permission ids to your API where the code says so, then add the role from the response, and load the existing roles into the same list and key ring.

From the switches alone: the permissions that are on are joined with "and" after "can", the ones that are off with "or" after "Cannot", and the two special cases, nothing on and everything on, have their own wording. It is plain text in the page, tied to the Create role button as its description, so it reads when you reach the button, and it never speaks while you flip switches.

An empty name, and a name a role already has, ignoring case. The reason shows in a line under the field that holds its space, so the layout never moves, and focus goes back to the field. The button stays in the tab order and says why instead of doing nothing; with three roles made it tells you to start over, since the demo holds three.

It is decoration, hidden from assistive technology: the same facts are in the form's sentence, the chips under it and the one polite status line, which says each change ("Created Editor with 3 of 5 permissions in this demo"). The words on the tags are HTML laid over the drawing, not SVG text, so they follow the page's font and language.

So a screen reader hears what it grants, such as "Delete: Remove a project for good", while the visible row keeps the short word and its hint. The pressed tone is the foreground color, never the primary, so the Shine Button stays the one colored control.

The key ring comes first, 140 px tall, then the heading and the form. Create role pins to the foot of the screen so it is always within reach however long the switch list is, and the hints under each switch drop so five rows fit. Nothing scrolls sideways at 320 px.