Typewriter FAQ Block for React

Opening a question for the first time puts a Typing Text in its answer, which types the sentence once, without looping. Its speed (14 milliseconds a character on average), jitter (how uneven each keystroke is) and delay (the pause before the first one, so the row has opened) are props in Answer. When it finishes, the row swaps to the plain paragraph, so reopening it costs nothing and the caret is gone. The questions and answers are in QUESTIONS at the top of the file, and OPEN_QUESTION names the one that starts open.

The whole answer, all the time. An invisible copy of the answer sits in the row and holds its full height, so the card never grows as the text types, and Typing Text keeps the complete sentence for screen readers, which read it once rather than letter by letter. The row's button announces itself as expanded the moment it opens.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found", and the browser's find in page opens the answer that holds a match.

The answer shows whole at once: Typing Text draws the finished line and the caret is hidden, so there is nothing to wait for and nothing blinking. The entrances are off too, and the chevron swaps without animating. The answers also open and close at once, with no height animation.

Each question is a button inside its own h3 under the section's h2, with a chevron at its start that points right when closed and down when open (it swaps between two icons, so it reads correctly in a right-to-left page). Tab moves from question to question, Enter or Space opens and closes one, and one answer is open at a time.

The shell narrows to the column with a small margin, the rows keep their chevron, question and answer on the same alignment, and a long answer wraps while it types without moving the rows below. Nothing scrolls sideways at 320 pixels.