Language Selector Footer Block for React

Edit TRANSLATIONS at the top of the file: each entry is a language's code, its own name, the tagline, the three groups (a title and four link labels each), the two policies and the rights line. Add an entry and a fourth segment appears in the control, in the order of the array. Every language needs the same number of groups and links, because the footer is drawn from the selected entry alone.

Only the footer: the choice lives in this block's own state and changes the words it draws. It does not reload the page, set a cookie or change your site's locale. To make it a real language switch, call your router's locale change (or set the cookie your server reads) inside the choose handler and keep the dictionary for the footer's strings.

Each rewritten heading, link, sentence and the tagline carries lang with the language's code, so a screen reader switches pronunciation for that text and the browser hyphenates and picks fonts for it. The control's own label stays in English, because the person using it may not read the language they just chose, and each segment has a visually hidden name in its own language ("Français", "Deutsch").

A live line that exists from the start and is empty until the first change says "Language: Français" once, politely. It never speaks on load. The segments are real radio buttons, so Tab reaches the group, the arrow keys move between the languages and a screen reader hears "English, radio button, 1 of 4".

No. The tagline sits in one grid cell together with an unseen copy of every language's version, so the cell is as tall as the longest. The link lists are single lines, so the groups keep their height, and the band under them never moves.

The brand stacks over the link groups, which run two to a row and three from sm. In the band the control comes first and the legal row wraps beneath it; four short segments fit at 320 pixels with room to spare.