Gantt Timeline FAQ Block for React

Edit PHASES at the top of the file: each phase has an id, a label, the week it starts in (start, counting from 1) and how many weeks it runs (span). The scale ends with the last phase, so adding a phase that runs to week 10 widens the grid to ten columns. The bars are grid items placed by two CSS variables, and the week lines are a background on each row, so nothing is measured in code.

The card is one image with a text alternative built from PHASES: "A timeline of the purchase over 8 weeks: offer in week 1, inspection in week 2, appraisal in weeks 3 to 4, mortgage in weeks 2 to 6 and closing in weeks 7 to 8." The drawing itself is hidden from assistive technology, and the same weeks appear as text in each question's badge and in the caption below the card.

A timeline reads from the first week to the last in every language, so the card keeps its left-to-right order in right-to-left layouts, like a chart or a time series. The title, the questions and the badges follow the page's direction.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found". One answer is open at a time.

Each question is a button inside its own h3 under the section's h2; Tab moves between them and Enter or Space opens one. The timeline has nothing to operate, so it has no tab stops.

Below the sm breakpoint the row labels drop their week text and the label column narrows, so the eight weeks still fit at 320 pixels with the bars in the same order; the weeks remain in the badges and the text alternative. The first question starts well inside the first screen.