Top Bar Tab Switch Banner Block for React

Edit SECTIONS at the top of the file: an id, a label and the summary shown after the name. The summary is plain text, so it's where you put a live figure from your data; keep it to about 30 characters so it stays on one line beside the control on a desktop. To switch a real view, read the chosen state where you render the panel below the bar.

Use this one when the choice changes a view on the same page, like a filter or a mode. Use Top Bar Nav Links when each choice is a page of its own: it renders real anchors in a nav with aria-current, where this renders a radio group with a sliding thumb.

A polite status line is present from the start and empty; choosing a section fills it with that section's sentence ("Roadmap: 12 items planned"), so it's announced once per change. The visible summaries are stacked in one cell, and only the current one is exposed to screen readers.

The segments are a radio group: Tab lands on the chosen one, the arrow keys move the choice (and the summary follows it) and the thumb slides with a CSS transition that reduced motion turns off. The focus ring is drawn on the segment itself.

The control tightens its padding and uses a smaller type size, so all four segments fit in the 256 pixels the strip leaves; the summary takes the second line, so the strip is about 70 pixels tall. In a right-to-left page the segments and the thumb mirror.