Related Questions FAQ Block for React

Each question lists the ids of two others in related, and the block looks up their wording from the same QUESTIONS array, so a link can't name a question that doesn't exist. Choosing one opens that row, moves focus to its question button and, once the row you left has closed, scrolls it to the top of the screen. Without a script the links are plain anchors that jump to the row.

A useState holds the open question and the Accordion reads it, so the links can change it. The Accordion takes value as an array and onValueChange; the block keeps one id in it.

Edit QUESTIONS at the top of the file: each entry is an id, the question, its answer and the two ids in related. OPEN_QUESTION names the one that's open on load. Keep every id in related pointing at a question that exists.

Each question is a button inside its own h3. Choosing a related link moves focus to the question you chose, so a screen reader reads it and its new state, and Tab continues from there. The links sit in a list under a "Related questions" label, and the arrow beside each is decorative and flips in right-to-left languages.

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

The header and the rows fade up once on load, the plus turns into a cross, and an answer eases open. With reduced motion the entrance is off and the plus becomes a cross without turning. Scrolling to the chosen row is a jump, never a smooth scroll. The answers also open and close at once, with no height animation.