Language Switch Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The header button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same LanguageFields component and share the block's state, so a language chosen in the copy is chosen in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

The landing page drawn behind the dialog. Its headline, sentence and button are typed in all eight languages in LANGUAGES, the language chip in its top bar and the header button show the new name, and a polite status message says what changed. Arabic also sets dir="rtl" on the drawn page, so the rows mirror and the text reads from the right; every other language sets its own lang. Cancel, Escape and the close button leave the page as it was and reset the choice.

Everything. The translations, the coverage percentages and the choice live in the file and in the block's state; no locale is set on your browser, no cookie is written and no request goes out. In your app send the chosen id to your router or i18n library in apply (a locale prefix on the URL, or a stored preference), and compute the percentages from your catalogue of strings: translated divided by total, per language. Swap the typed headline for your own message files.

Each row prints "74% translated" and draws the same share as a thin bar. The numbers are typed here as the share of the site's strings that have a translation; a language below 100% shows the rest in the original. The bar is decoration and hidden from assistive technology, because the percentage is already in the row's text.

Yes. The real dialog is named by its title and described by its sentence, focus is trapped while it is open, and Escape, Cancel and the close button return focus to the header button. The languages are a radio group: the arrow keys move and choose in one step, Tab leaves the group, and each name carries its own lang so a screen reader pronounces it in that language. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the header button.

The copy shown on load docks to the foot of the page as a bottom sheet with Apply pinned at the bottom and the eight languages scrolling above it. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen. The drawn page keeps its headline, sentence and button and drops the menu bars.