feat(ui): add a language switcher to the settings dropdown - #1748
Merged
Conversation
Adds a compact DE/FR/IT picker beside the dark-mode switch. The app has carried four locales with no way to change language short of the ?lang= querystring or clearing site data. A segmented control rather than a cycling toggle like the dark-mode switch: with three options, cycling makes reaching the third a guessing game, and the current language is worth showing rather than inferring from the surrounding text. English is deliberately absent, as requested. It is also the right call independently: the BABS catalogue has no English labels — resolveBabsLang maps anything unknown onto German — so an English UI is half translated. It remains reachable via ?lang=en. Buttons are labelled with autonyms (Deutsch, Français, Italiano) rather than translated names: a picker that names languages in a language you may not read is not much use. The visible label is the abbreviation, so the autonym is the accessible name, and lang= on each button stops a screen reader pronouncing "Français" with English phonetics. Active state uses aria-pressed, since these are toggles rather than navigation. Matching on resolvedLanguage rather than language so a regional variant like de-CH marks the German button active instead of leaving the control looking broken. A language outside the three highlights nothing, which is honest — clicking any button moves to a supported one, whereas pretending German is active would contradict the text on screen. Persistence needs no work: the detector already caches to session and local storage on change (see i18n/index.ts). Navbar.test.tsx needed its react-i18next mock extended — it supplied only `t`, and the switcher reads i18n off the same hook, so every render of the navbar threw. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Code Coverage OverviewLanguages: TypeScript TypeScript / code-coverage-agentThe overall line coverage in commit aebf499 in the Show a line coverage summary of the most impacted files.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a compact DE/FR/IT picker beside the dark-mode switch in the settings dropdown.
The app has shipped four locales for a long time with no in-app way to change language — the only routes were the
?lang=querystring or clearing site data to re-trigger browser detection.The control
A segmented control, not a cycling toggle like the dark-mode switch next to it. With two states a toggle is fine; with three, cycling makes reaching the third a guessing game, and the language currently in effect is worth showing rather than leaving the user to infer it from the surrounding text.
Built from Bulma's
buttons has-addons are-small, so it inherits the existing button styling and theming rather than introducing new CSS. Onemb-0is needed because Bulma's.buttonscarries a bottom margin meant for standalone groups, which otherwise misaligns the group against the icon.English is excluded, as requested. It is also the right call independently: the BABS symbol catalogue has no English labels —
resolveBabsLangmaps anything unknown onto German — so an English UI is half translated. It stays reachable via?lang=enfor anyone who wants it.Details worth a second look
Autonyms, not translated names. The accessible name of each button is
Deutsch/Français/Italiano, not a name translated into the current UI language. A language picker that names languages in a language you may not read is not much use, and this is the near-universal convention. The visible label is the abbreviation, so the autonym lives inaria-label;lang=on each button stops a screen reader pronouncing "Français" with English phonetics. Each abbreviation is also a prefix of its autonym, so WCAG 2.5.3 (Label in Name) holds.aria-pressed, notaria-current. These are toggle buttons, not navigation, so a screen reader announces which language is in effect.Matches on
resolvedLanguage, notlanguage. i18next collapses regional variants, so ade-CHbrowser — the common case for this audience — marks the German button active instead of leaving the control looking broken with nothing selected.A language outside the three highlights nothing. An English browser resolves to
en, and no button reads as active. That is deliberate: clicking any button moves to a supported language, whereas pretending German is active would contradict the text on screen. Flagging it because it is the one visible consequence of excluding English — addingento theLANGUAGESarray is a one-line change if you would rather it never happen.No persistence work needed.
i18next-browser-languagedetectoris already configured to cache to session and local storage on change (i18n/index.ts), so the choice survives a reload without touching the detection config.Also in here
Navbar.test.tsxmockedreact-i18nextwith onlyt. The switcher readsi18noff the same hook, so every navbar render threwCannot read properties of undefined (reading 'resolvedLanguage')— 5 failures. The mock now suppliesi18ntoo.Verified
yarn test --runnpx tsc --noEmitdevelopbaseline (measured by stashing)yarn lintyarn buildThe 7 new tests cover: the three languages are offered and English is not (asserting exactly 3 buttons, so adding a language is a deliberate change); clicking switches; only the active button is pressed; a regional variant resolves to its base; clicking the active language is a no-op; nothing is active for an unsupported language; and each button carries
lang=with the autonym as its accessible name.Rendered markup was also inspected directly to confirm the classes land where intended (
is-primary is-selectedon the active button only) — the part tests cannot judge.