Support Ticket FAQ Block for React

No: nothing leaves the page. submit checks the subject and the message, shows the confirmation after a short simulated wait (LATENCY) and makes the reference number from the text, so the same ticket reads the same. Replace the body of the timeout with a call to your help desk, and show the confirmation when it answers.

tipsOf splits the subject into words, drops common ones, cuts each to a stem of five letters and counts how many start a word in a question or its keywords. The best three with at least one match show, best first. There's no model and no request: the same words always give the same list. Add keywords to a question to catch the words people use that the question doesn't. The list keeps a floor height, so typing never moves the form, and a polite status line says how many answers match once typing pauses.

Both text fields are required and the message needs at least twenty characters. Submitting with a problem shows a message under each field that's wrong, marks it invalid, and moves focus to the first one; typing in a field clears its message. The form isn't validated on each key, only on Send. The topic always has a value, so it can't be wrong.

TOPICS holds the labels and values. The Select has an accessible name ("Topic") that matches the label you see above it. It takes items={TOPICS} and gives its value as a string.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found".

The suggestions list isn't in the markup until a subject matches, because it's built from the subject.

The questions are buttons in h3 headings; the fields have visible labels; errors are tied to their field. Tab goes through the questions, then the subject, topic, message and Send. After a successful send focus moves to the confirmation, and "Open another ticket" empties the form and puts focus back in the subject. One polite status line says "Sending your ticket…" and how many answers match.

The header and the four questions come first, then the form's card under its own rule with + marks, so a visitor reads the answers before writing. The suggestions area reserves room for three matches, so nothing jumps while typing, and nothing scrolls sideways at 320 pixels.