Language Selector Pill Banner Block for React

Everything that happens on a choice is in one function, choose: it stores the code, closes the popover and speaks the result. Replace its first line with your navigation (swap the locale segment of the URL, or call your i18n library's setLocale) and let the page reload in that language. Write the code to a cookie too, so the next visit starts in the same language.

Someone who reads only Japanese can't find "Japanese" in a list. Each language's name is in its own script with a lang attribute, so screen readers switch voice for it, and the English name sits beside it as a quiet hint. The button's visually hidden prefix, "Language:", names the control for assistive technology.

Add an entry such as { code: "ar", english: "Arabic", native: "العربية" }. The pill and the list already use logical spacing, so they mirror with the page. In choose, set dir="rtl" on the document's html element when the code is a right-to-left one, and keep numbers and code in dir="ltr" spans.

Enter or Space on the button opens the list, Tab and Shift+Tab move through the languages, Enter chooses one, and Escape closes the list without changing anything. After either, focus is back on the button. The current language carries aria-current, so screen readers say which one it is.

The pill renders in flow so the preview and a stack of blocks can see it. To float it, add fixed inset-x-4 bottom-4 z-50 mx-auto to the pill (the section named "Guide language") and remove the block's wrapper padding if the pill lives on its own. The popover flips upward on its own when there is no room below. Keep room for the home indicator with bottom-[max(1rem,env(safe-area-inset-bottom))].

Yes, but decide on the server: read the Accept-Language header and pass the best match as the first code, so the pill's first paint is already right. Reading navigator.language in an effect works too, at the cost of the button's label changing a moment after load.