Benefits About Block for React

The offices are REGIONS, each an id and a label. The columns are CATEGORIES: a title and rows, and each row is a label plus text for every office. The closing figures are STATS, in the same shape. The helper wording takes the three offices in the order United States, United Kingdom, European Union. Adding an office means adding it to REGIONS, to the Region union and to every wording call. The switch, the swapped sentences and the figures all read from those lists.

Every office's sentence is stacked in one grid cell. The offices you are not showing are invisible and hidden from assistive technology, but they still hold their height, so the cell is as tall as its longest sentence. The closing figures work the same way. Switching office changes which sentence is visible. It does not add or remove rows.

The heading is an h2. The switch is a group labelled "Office", and the chosen office is pressed. A polite live region says "Showing the United States offer" (or whichever office is on) when it changes. Each column is an h3 over a description list, so a row reads "Cover" and then its sentence. The closing figures are another description list: the label, then the value. The lines are hidden from assistive technology.

Tab reaches the group. Arrow keys move between the three offices, and the one you land on is selected. You cannot turn the group off: one office is always showing. The pressed office is drawn in the foreground, so it stays clear in every theme.

The switch wraps under the heading. The four columns stack as bands, each with a rule from rail to rail, and the three figures sit under a last rule. Nothing scrolls sideways at 320 pixels. Amounts stay in their own direction, so a currency sign does not jump to the other end of the line in a right-to-left layout.

The header and the columns fade up once on load. Changing office does not animate the text: the other sentence is already there and becomes visible. With reduced motion the entrance is skipped. Nothing loops.