Stats FAQ Block for Vue

Edit STATS at the top of the file: each entry is a label and a value string. Two of them aren't typed. "Answered the first time" is worked out from WEEK (firstTime over handled) and "tickets handled this week" prints WEEK.handled, so the percentage can never disagree with the counts it comes from. Keep each label to a few words and give it a period ("this week", "each quarter") so the figure means something.

Edit QUESTIONS: each entry is an id, the question and its answer, one to three sentences. OPEN_QUESTION names the one that's open on load; set it to an id that doesn't exist to start with all of them closed. One answer is open at a time. Add multiple to the Accordion to let several stay open.

Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens. Search engines and server rendering see all seven, and closing an answer doesn't remove it.

As a definition list: each figure is a dt (the label) and a dd (the value) in its own group, so a screen reader reads "median first reply, 4 min". The value is shown above its label with flex-col-reverse, which changes nothing in the reading order. Values sit in bdi, so a figure like "98%" or "4 min" keeps its order in a right-to-left page.

Each question is a button inside its own h3 under the section's h2, so a screen reader's headings list shows them all. Tab moves from question to question, Enter or Space opens and closes one, and the button says whether it's expanded. The open answer is labelled by its question. The Up and Down arrows also move between questions, and Home and End jump to the first and last.

The title and sentence stay centred, the four figures go two by two on shared hairlines, and the questions follow in the same column, with the answers at a smaller size. A question that doesn't fit wraps to a second line, and nothing scrolls sideways at 320 pixels.