Read-Only Document Error Block for React

It checks that the message says something (an empty one is named under the field and focused), then records the request in the page's state and says "Recorded in this demo. Lenka Hartwood would get it by email. Nothing was sent." The same button then reads Withdraw request and takes it back. To wire it for real, post the message to the document's owner where the code says so, and show the pending state from the response.

From the typed list ACTIONS: a name, whether the visitor can, and the role it needs. The count in the heading ("3 of 6 allowed") is derived from the same list. State is a word and a shape (a check or a dash), never only a colour. The table is a native one with a caption, column headers and row headers, so a screen reader reads each action with its answer.

Because it keeps the visitor on the page they were reading. The request folds open under the buttons by animating the row height (not at all with reduced motion); while folded it is invisible and inert, so nothing in it takes focus, and what you typed is kept. Opening it makes the page taller, so the page starts at the top rather than the middle: a centred page would move its headline.

The drawn page and its caption sit side by side to save height, the Needs column is dropped, and the two buttons are pinned to the foot of the screen until you reach them. Request edit access is the only coloured control in both layouts.

Usually not: opening a document in view mode is a normal 200, and this page is the screen a visitor lands on. If you refuse an edit action, answer that request with a 403 from the server.

To #: point it at the document's view-only route. It's a Button with render set to an a element and nativeButton={false}. The lock and the page are decoration, hidden from assistive technology in the drawing; the caption and the table say everything in words.