Language Switch Top Bar Banner Block for React

Edit VERSIONS at the top of the file: for each language the BCP 47 code, the direction dir, the line, the lead words in front of the next language's name and the language's own name. The button cycles through the list in order and wraps round. Keep each sentence and its button under about 55 characters so they fit two lines at 320 pixels.

All the versions are rendered in the same grid cell: the visible one, plus a hidden copy of each (invisible, aria-hidden and inert), so the cell is always as tall as the tallest version. Switching only changes which text shows. The button itself is the same element in every version, so keyboard focus stays on it.

Its span carries lang="ar" and dir="rtl", which sets the sentence's reading order, puts the button at the sentence's end and isolates it from the English page around it. The name of the next language in each button is its own lang and dir span too, so "العربية" inside a Spanish sentence and "English" inside an Arabic one read correctly. If the page itself is already right to left, the strip's own layout (the icon, the close button) mirrors with it.

A polite status line, present from load and empty until the first switch, then holds the new sentence, with the new language's lang and dir so it is read in that voice. The visible sentence is not itself a live region, so nothing is announced twice. The button keeps its place, and its name changes with the sentence.

It folds the strip's height away with a CSS transition (at once under reduced motion), makes the bar inert, moves focus to the first thing after it on the page and says "Announcement dismissed." The section's padding is inside the fold, so the block ends up 0 pixels tall.

The icon at the start is dropped below 640 pixels to leave the line the width, and the sentence and button wrap to two lines at most at 320 pixels. The close button keeps the top end corner.