Before After Toggle Feedback Culture Block for React

The habits are HABITS at the top of the file. Each has a title, a rule and two versions, before and after, each with the comment's text and what the author hears. Keep the five examples about the same screen, as they are here, so the reader sees one change at a time, and keep each version to a sentence: both sit in one grid cell, so the taller of the two sets the row's height.

A group with nothing pressed would show nothing to compare. The group is multiple-select under the hood, and the handler keeps the newly pressed button and drops the old one, so pressing the pressed button does nothing and pressing the other one moves it. Before is pressed when the page loads.

The toggle group is named "Show comments" and each button announces whether it is pressed. In every row only the shown version is readable: the other version is hidden from assistive technology and from the keyboard (it is aria-hidden and inert), so a reader hears exactly one comment per habit. Each habit is an h3 in an ordered list; the numbers are decorative.

The toggle drops under the header and the rows stack: the habit's name and rule first, the example under it. Rows stay the height of their taller version, so flipping doesn't shift the page, and nothing scrolls sideways at 320 pixels.

No. The toggle is local state: it resets when you reload, and nothing is stored or sent. If you want the page to open on the rewritten comments, change the initial useState("before") to "after".

The header and the rows fade up once on load, and each example cross-fades for a fifth of a second when you flip the toggle. With reduced motion the entrance is skipped and the comments swap instantly.