Roadmap Preview Changelog Block for React

Edit THEMES at the top of the file: each theme has a name and its items, and an item has a stage (PLANNED, BUILDING or SHIPPED), a target and a title. The count in a row's trigger is worked out from the items, so it never disagrees with the list. The framed card reads FOCUS: its title, how many tasks are done out of how many, its owners and its theme. The bar and the percentage come from those two numbers.

A roadmap that prints exact dates for things not yet built promises what it cannot back. The header says targets are quarters and can move; an item with no quarter says Not scheduled instead of guessing. A shipped item shows the release it landed in, which is a fact.

Reports, the theme that holds the item being built, so the framed card and the open list agree. It is set by the accordion's default value (LEAD); change it to open another, or empty it to start with every row closed. Opening a row closes the one that was open. Add multiple to the Accordion to let several stay open.

Each trigger is a button inside its own h3, under the section's h2, and says whether it is expanded; Tab moves from row to row and Enter or Space opens and closes one. The open list is a real list with a name. The progress bar repeats what the sentence under it says, so assistive technology reads "7 of 11 tasks done" once, as text.

Yes. The Accordion takes hiddenUntilFound, so every closed panel stays in the markup as hidden="until-found", and the browser's find in page opens the theme that holds a match.

Below lg the split becomes one column: the accordion first, then the framed card under a rule. The target stays with its stage under each item's title, nothing scrolls sideways at 320 pixels, and in a right-to-left layout the rows mirror while versions and quarters keep their direction.