Multilingual Footer Block for React

Add an entry to TRANSLATIONS at the top of the file: the code, the language's own name (what the Select shows), the Select's label in that language, the tagline, three groups of three links, the policies and the rights line. Set rtl: true for a right-to-left language. The Select lists the entries in array order, and nothing else in the file needs to change.

The footer element gets dir="rtl", so the brand cell moves to the end, the link cells and their text align to the start of the new direction, and the legal row puts the copyright at the right and the Select at the left. The library's direction provider is set too, because the Select's list and its keyboard handling follow it rather than the document. The wordmark stays left-to-right, since it is artwork. Choosing another language flips it back.

Every rewritten part carries lang, so a screen reader pronounces it in the right language, and the Select's own entries are tagged with theirs. A live line that is empty from the start says "Language: Deutsch" once per choice. The Select is named in the current language ("Idioma", "言語"), and its list opens with the arrow keys or Enter and closes with Escape.

No. The tagline shares one grid cell with an unseen copy of every language's version, so the cell is as tall as the longest. Titles and links are one line each, and the Select has a fixed width.

No: the choice lives in this block and only affects the footer. To make it a real switch, call your router's locale change or set the cookie your server reads from the Select's change handler, and keep the dictionary for the footer's strings.

The cells stack, one to a row and the three groups side by side from sm; the legal row stacks with the Select at full width under the policies. In Arabic it mirrors the same way, and nothing scrolls sideways at 320 pixels.