Anchor Link FAQ Block for React

Each row has an id of the form q-<question id>, and the # link points at it. On load, and whenever the address's anchor changes, the block reads it: if it names a question, that row opens, scrolls to the top of the screen once the row above has closed, and gets a ring that goes at your next click. Because every row's id is in the markup, the browser also jumps to it before the script runs.

It copies the link's full address: the page's own URL plus the row's anchor. The status line beside the title shows the address without its https://, and the # turns into a check for three seconds. The link also navigates, so the address bar holds it too; if the browser refuses clipboard access (a page that isn't served over HTTPS), the status line says so instead of claiming success.

Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer. The id becomes the anchor, so keep it stable once links are out in the world; changing the question's wording is safe. OPEN_QUESTION names the row that's open when the address has no anchor. One answer is open at a time.

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.

Each question is a button inside its own h3, and each # is a real link named "Link to" and the question, placed right after its row. Tab goes from a question to its link and on to the next question; Enter on a link copies the address and follows it. The status line is a polite live region, so the copy is announced.

Yes. The # is never hidden behind a hover: it sits in a 32 pixel square at the start of every row, and the question's text starts after it. The status line moves under the title, the rows run from rail to rail, and nothing scrolls sideways at 320 pixels.

The header and the rows fade up once when the page loads, the ring fades in, and an answer eases open. With reduced motion the entrance and the ring's fade are off, and the answers open and close at once. Scrolling to a deep link is a jump, never a smooth scroll.