Clipboard Denied Error Block for React

Selecting is real: Select all text focuses the box and calls select(), so the keys then copy it. Copy is a real clipboard write when you press it with the demo switch off. Nothing is read from the clipboard, and the share link is a typed sample (LINK) that opens nothing. In your app, replace it with the text your user wants, and keep the status line: it is what tells them to copy by hand.

It is a demo control and it is on when the page opens, so the failure is what you see: with it on, Copy makes no attempt and the status line says it is pretending. Turn it off and Copy calls navigator.clipboard.writeText. Real browsers usually allow that after a press on a secure page, so you will most likely see "Copied to the clipboard"; to see a real refusal, open the page over plain http or inside a frame that blocks it.

The clipboard API only works on secure pages (https), usually only after a press or key, and a frame needs permission from the page that embeds it. Some browsers and some settings also block it per site. The steps in the folded section say how to check each, in order.

No. The Mac and Windows control is a visible choice, defaulting to Mac, because guessing from the browser is unreliable and wrong for anyone on a shared or remote machine. The keys are written as words (Command, Ctrl) in key caps, so they read the same everywhere, and the choice never changes the page's height.

Tab reaches the box (and selects it), then Select all text, Copy, the Mac and Windows control and the folded section's button. The arrow keys move between Mac and Windows. Every result is spoken through one polite status line, and the box is named by its visible label.

The header's switch sits under the sentence, the two buttons wrap if they have to, and the status line reserves three lines so a long message never moves the bands under it.