Episode Timeline FAQ Block for React

Edit EPISODE_LENGTH (in seconds) and the at field of each entry in QUESTIONS, also in seconds; the times in the chips, the markers' places and the time elements are all worked out from them. Keep the markers at least a few minutes apart: each one is a 44 pixel target, so closer ones overlap. The "Hear it at" links go to #: point them at your episode page with a t= parameter.

No, on purpose. A fake player that does nothing would be a trap, so the bar is an index of the episode's questions and the links go to the real episode. If you have a real audio element, call its currentTime from the markers' handler as well.

Each marker is a button in a group named "Episode timeline", and Tab moves between them. A marker is pressed while its question is open, and a screen reader reads its time followed by the question, so the markers make sense without the bar. The caption above the bar is a polite live region: it announces the question you chose. Choosing a marker doesn't move focus.

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 one that holds a match.

Each question is a button inside its own h3 under the section's h2; Enter or Space opens it and closes the one that was open, and the markers follow. The Accordion is controlled, so both controls change the same state. Tab moves from question to question; this accordion doesn't add arrow keys.

Time runs one way on the bar whatever the page's direction, so the bar and its markers stay left to right while the text around them follows the page. With reduced motion the bar's fill jumps instead of sliding, and the entrances are off.