Before After Toggle Features Block for React

Each side is a few lists at the top of the file: BEFORE_NAV, BEFORE_ROWS and BEFORE_BANNERS for the cluttered screen, and AFTER_NAV and AFTER_ROWS for the clean one. A row has a label, the kind of control it draws (toggle, select, check or tag) and an optional tag. The caption's counts are computed from these lists.

The two screens sit in one grid cell, inside a frame with a fixed height, and only their opacity changes. A screen turns visible at once and fades out before it becomes invisible, so the one you chose can take focus immediately. The hidden screen is invisible, aria-hidden and inert, which takes it out of the tab order and the accessibility tree. Under reduced motion there is no fade, only a swap.

The control is a named group ("Settings screen") of two options, operated with the arrow keys and Space, with a visible focus ring. The screens are pictures, so they are hidden from assistive technology; instead a polite status line says which one is showing and how many controls it has ("The cleaned-up settings screen, with 8 controls"), and the caption states the same counts in text.

Yes. Every surface is a theme token and the warnings are drawn with an icon and a tint, not a colour: no red or amber. A switch that is on is filled with the foreground colour, so the screens are light on a light page and dark on a dark one and your primary colour is never used.

The control sits centred above the screen. On a phone the navigation column is hidden and the screen shows its settings at full width, still fading out at the foot on the cluttered side, so both sides stay inside about three screens and nothing scrolls sideways at 320 pixels.