Answers First Contact Block for React

The subject is split into words of four letters or more, folded to lower case without accents, and each word is looked for in an answer's question, text and a hidden hints string. A word that appears in more than three of the five answers is too common to help and is dropped, unless it is all there is. The first two matches open and every match gets a Match badge; clearing the field closes everything again. Edit ANSWERS, COMMON and MAX_OPEN to fit your own help centre.

Each answer's question is a button inside a heading, so screen readers can list the questions. Typing the subject opens rows for you; you can still open and close any row yourself. Every row opens and closes with Enter or Space. How arrow keys move between rows differs by library, so test the one you ship.

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call: details holds the name, email, subject and message. The address in the note under the button, help@quillnest.example, is on the reserved .example domain.

Before anything is typed it says how many answers there are; while typing it says how many match ("1 of 5 answers match your subject") or that none do. It's a status region, so a screen reader hears it only when the count changes, not on every keystroke. The subject field points to it with aria-describedby.

On lg the answers area has a floor height that fits five rows with two of them open, so typing never moves the page. On a phone the answers come last, so opening them only pushes the end of the block down.

It thanks the visitor by first name, repeats the subject and the email replies go to, and offers "Send another message", which brings back an empty form, closes the answers and puts focus on the form's heading. It promises no reply time.