Error Support Channels Block for React

Nothing leaves the page. The button waits under a spinner for less than a second, then a polite status line says what a real press would do ("Chat drafted. A real one would open now") and that nothing was sent or searched, naming whether the error details were attached; Start over clears the message and returns focus to it. To wire it for real, open your chat widget, post the message and its attachments to your help desk, or run your help-centre search where the code says so, and show its error under the message if it fails.

They're typed constants (CHAT, EMAIL, HELP), because the block can't know your staffing and never reads the clock. Replace them with your real hours and service levels, and say only what you can keep: a promise like "we reply within 24 hours" belongs on this page only if your team meets it, and a chat that is only staffed on weekdays should say so.

It decides whether the reference, the time and the page travel with the message. The disclosure under the button lists the three lines; when the switch is off they're struck through and marked "not attached", and the status line after sending says so. In your app, fill them from the real failure (an id from your error tracker, the request time, the route) and send them with the message, so support doesn't have to ask.

A disabled button can't explain itself, and keyboard users can't reach it. Pressing it with an empty message writes one sentence under the field and moves focus there, which reads the problem out. Typing clears it. The field keeps a line for its problem even when there is none, so a problem never pushes the page.

The three channels stay in one row, as an icon over a name, and the chosen channel's wait or reply time appears in one line under them; the composer follows with the message, the switch and the send button, which stays on the first screen. The channels' times are still read out by screen readers in each cell.

The channels are a labelled group of native radio buttons: arrow keys move and choose, Tab leaves the group, and each cell's name includes its time. The switch is a named control, the disclosure's button says whether it's open, and after sending, focus moves to the status line so the result is read out. The chosen channel is shown by a filled dot and a heavier edge, never only a color.