Language Switcher Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline above the drawn language button, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the language you chose and what you typed in the copy are in the real dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

Because someone who cannot read the interface's language can still find theirs: Deutsch, Español, 日本語, עברית, العربية. Each native name is set with its own lang, so screen readers pronounce it and browsers pick the right font, and Hebrew and Arabic also carry dir="rtl", so their letters sit in the right order inside a left-to-right row. The English name sits under it for everyone else.

It reads the native name, the English name and the language code, with accents and case folded away, so "espanol" finds Español and "arab" finds the Arabic row. The matched letters are marked in whichever name matched. The foot counts the languages that match ("3 of 10 languages") and says it aloud a moment after typing stops. A search with no match says to try the English name or the language's own.

Four labels on the drawn lesson page (the title, the goal and the two buttons) switch among typed translations, and the page's wrapper gets the language's lang and dir, so choosing Hebrew or Arabic mirrors the layout. The foot button shows the language's own name. The drawing is hidden from assistive technology, so the status line says what was set. The translations are typed, in this demo only; in your app they come from your message catalogs.

All of it. Nothing is saved, no locale cookie is set and no page reloads. The completeness figures are typed data; in your app they come from your translation tool. pick is where you would set the locale (a route, a cookie or a user setting), and the status line is the one polite live region.

Yes. Type to search, the arrow keys move, Enter chooses the highlighted language and Escape closes the menu and puts focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The current language is ticked and says so for screen readers. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.

The copy shown on load docks to the top of the page at full width, so the keyboard does not cover the foot; the bars go and the percent words stay, and the key hints go while the count stays. The real dialog keeps the Command dialog's own phone layout.