Language and Region Settings Block for React

Edit the constants at the top. LANGUAGES lists each language by its tag, its own name and a one-sentence rule describing how it sorts. REGIONS lists each region with its first weekday (0 Sunday, 1 Monday, 6 Saturday), whether people there read a 12-hour clock and whether they measure distance in miles. PLACES are the names the sort cell orders, and SAVED is what the account has stored when the page opens: put the person's real settings there. Everything on the page is worked out from those, so nothing is typed twice.

By the browser's Intl.Collator for the chosen language, so the order is the one that language's readers expect and not a hand-written list. The rows sit in fixed slots, so when you change the language the names change in place rather than rows jumping around. The one-line rule under the list is typed text for each language, and "Åre is 3 of 8" is counted from the sorted list. A browser without locale data falls back to its default order, which still sorts but may not move the accented letters.

The first weekday, the clock and the distance unit are typed per region, in the style of the Unicode locale data, and picking a region resets the two unit selects to its usual choices. If you then pick something else, the cell says it is not the usual choice there. The month is fixed (October 2026) and always six rows, so its height never changes, and the weekday names and the two examples are printed by Intl.DateTimeFormat and Intl.NumberFormat in the chosen language and region, so decimal commas and 12-hour marks come out as they do for real users.

Nothing leaves the page. The block keeps the saved settings and the ones being edited, counts how many differ and says so in its status line ("2 changes not saved yet."). Save makes the edited copy the saved one and says it was saved in this demo; Discard puts the saved copy back. To make it real, send the language, region and unit choices to your API in the save handler and update the saved copy from the response. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus, and pressing one says there is nothing to do.

The language, region and unit controls are native selects with visible labels, and the status line is a polite live region that is present from the start: after each choice it says what changed ("Sorted for Svenska: Åre is 3 of 8."). The month is a real table with a caption, abbreviated weekday headings that carry the full day name, and a screen-reader note on the first day of the week, today is marked with aria-current="date", and the sorted places are an ordered list. Every control works from the keyboard.

Not here. This panel shows only what a language and a region change in the place they live: the order of names, the first day of the week and the units. A table of sample dates, numbers and currencies belongs to the language and region dialog, which is a separate block, so a settings page can use both without repeating itself.