Self-Assessment Coaching Contact Block for React

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 a call to your coach's inbox or booking tool: details holds the format, note, name and email, scores holds the three ratings in the order of AREAS, and focusLine(scores) gives the focus line. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.

The lowest score wins. If two areas share the lowest score the line names both ("Most room: Health and Relationships") and the "Most room" badge shows on both bands; if all three scores are equal it names none and says "All three sit at 5", and the focus line reads "Focus: to choose together". The rule lives in roomLine and focusLine at the top of the file, so you can weight an area or add a fourth by editing AREAS. The scores are the visitor's own ratings, labelled as not a test, advice or a diagnosis.

The form has noValidate, so the block shows its own messages. At least one slider has to be moved from its starting 5 (three untouched sliders are not an answer), a format has to be chosen, the note needs a sentence of at least 12 characters, the name can't be empty and the email needs an @ and a domain. A problem appears under its field, the control gets aria-invalid and a description that points to it, and focus moves to the first one: the first slider, if no score was given. Typing, moving a slider or choosing a format clears its message.

Each is a real slider named after its area, so arrow keys move one point, Home and End jump to 1 and 10, and a screen reader hears "8 of 10". The summary line follows the sliders as you drag, but nothing is spoken while dragging: one polite status line announces "Most room: Health. Focus: Health (3 of 10)." when a slider is let go. The level meter beside each slider is a drawing in CSS marked aria-hidden; the number carries the score. Each Slider points aria-labelledby at the band's heading; the end of a change is onValueCommitted.

It thanks the visitor by first name, repeats the email and the format, and lists the three scores and the focus line, so they can see what was sent. It is a status region that takes focus when it appears, so a screen reader reads it at once, and "Send another request" brings back an empty form with the sliders at 5 and puts focus on the form's heading. It promises nothing a server would have to keep.

Each band stacks: the area's name with its meter and number on one line, the slider full width under it (the area's one-line hint and the "Most room" badge appear from md and sm). The summary's lines reserve their height, so no score change moves the form. Below lg the split stacks: format and note first, then name, email and the button at full width, and the contact details last; under 360 pixels their labels shrink to icons while screen readers still hear them. The email, phone and hours are fictional (.example is a reserved domain, 555-0100 to 0199 a reserved range): replace EMAIL, PHONE, PHONE_HREF and HOURS at the top of the file.