shadcn.io is not affiliated with official shadcn/ui
Related Questions FAQ Block for Svelte
A cross-linked FAQ for a password manager: every answer ends in two related questions, and choosing one opens that row, scrolls to it and moves focus to its question.
Installation
Overview
A cross-linked FAQ for Svelte with Ark UI. Six questions sit in a narrow column of hairline rows under a short rule with + marks at its ends, each opened by a plus that turns into a cross. Every answer ends in two related questions as links; choosing one closes the row you were on, opens the one you chose, moves focus to its question and brings it to the top of the screen. The accordion is controlled, one answer at a time. It's built from Accordion and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For help centres where one answer usually raises the next question.
FAQ
How do the related links work?
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.
How is the accordion controlled?
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.
How do I add a question or change its links?
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.
How does it work with a keyboard and a screen reader?
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.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.
Are the closed answers in the page's markup?
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 of them, and closing an answer doesn't remove it.
What moves, and what happens with reduced motion?
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.