What's Next Changelog Block for React

Edit FEATURES at the top of the file. Each feature has a stage (PLANNED, DEVELOPING, BETA or RELEASED), a quarter as its target, a title and a line. The meter fills as many stops as the stage's step and the stage's name is printed under it, so the drawing and the words always agree. Add a stage by adding one to STAGES; the meter draws a stop for each.

The filled stops are solid foreground and the others a hairline, so the length is the signal, and the stage's name sits right under it. The meter itself is decoration, hidden from assistive technology, because a screen reader hears the same thing as text: the name, then "stage 3 of 4", then the target.

It changes the block's own state and nothing else: the button is a toggle that turns from Notify me to Notifying and back, and a status line (a live region present from load) announces each change and says that nothing is sent. Both labels share one cell, so the button never changes width. To make it real, send the choice to your backend from the handler.

A roadmap that prints exact dates for work in progress promises what it cannot back. Each target is a quarter, said as a target in the header, so a feature that slips changes one word instead of breaking a promise.

Each row is an article with an h3 for the feature, and the rows are a real list. Every bell is a button whose name includes the feature ("Notify me about Branches for design files") and which says whether it is pressed; Tab moves from bell to bell and Space or Enter presses one.

Below lg the row stacks: title and line first, then the meter with its stage and target at the start and the bell at the end. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the rows mirror, while the meter stays left to right, like a time axis, and the quarters keep their form.