The playground instrument selector, loading screen and several labels stay in English in the French UI #1762

Activity

1. joshunrau

   added

   BugType: existing behavior is wrongType: existing behavior is wrong

   Priority: LowNice to have, cosmetic or speculativeNice to have, cosmetic or speculative

   Difficulty: LowIsolated change, about 2 hours or lessIsolated change, about 2 hours or less

   Area: Playgroundapps/playground (in-browser instrument editor)apps/playground (in-browser instrument editor)

   Good First IssueWell-scoped, low-risk and self-contained; a good entry point for a new contributorWell-scoped, low-risk and self-contained; a good entry point for a new contributor

   on Oct 7, 2026
2. joshunrau commented on Oct 26, 2026

   

   joshunrau

   on Oct 26, 2026

   CollaboratorAuthor

   More actions

   Still reproduces on main (d86740e), and no open PR changes these strings. The lint guard, the loading-screen fix and the test plan need adjusting, and a few strings are missing from the list.

   The lint rule catches one of these strings

   The react/jsx-no-literals block sets ignoreProps: true (eslint.config.js:237), so it reports JSX text only. Of the strings listed here, that is just No Instruments Found. aria-label, placeholder, title, subtitle and alt are props, heading={heading} is a variable, and 'Unlabeled' is not JSX. Enabling the rule is still worth it, with three changes:

   • Ignore apps/playground/src/instruments/** as well as stories. The proposed glob matches the seven example-instrument .tsx files, such as examples/interactive/Interactive-With-React/App.tsx, which is full of English JSX text. Those files are instrument source, not playground UI.
   • <span>GitHub</span> at ActionsDropdown.tsx:43 fails. Add GitHub to allowedStrings.
   • The . after {formatByteSize(shareURL.size)} at ShareButton.tsx:61 fails too. Add . to allowedStrings next to : and -, or move the period into the t() call.

   apps/web and packages/react-core have the same gap for props. A guard on literal alt, aria-label, placeholder and title values, for example a no-restricted-syntax selector on JSXAttribute, should cover all three, so it belongs in its own change.

   The loading screen stays in English anyway

   useTranslation does not need CoreProvider. libui's hook reads the module-level i18n singleton, and CoreProvider only renders the notification hub and the destructive-action dialog, so App can call the hook directly.

   The language is not kept across loads, though. main.tsx:12-14 calls i18n.init with no defaultLanguage, and libui 6.16.1 falls back to 'en' (src/i18n/translator.ts:102). Nothing stores the toggle's choice: libui keeps the theme in localStorage, but not the language. The Suspense fallback only shows during the initial load, so after step 3 the whole UI is in English, not just the loading screen. Wrap the two strings anyway, but take the loading screen out of Expected. Remembering the language is a separate decision. The language has to be known when main.tsx calls i18n.init, so it cannot come from the store, which hydrates from IndexedDB asynchronously. A localStorage key would work.

   Missed strings

   None of these is JSX text, so the rule will not flag them either.

   • LoginDialog.tsx:159 and UserSettingsDialog.tsx:38: placeholder: 'e.g., https://demo.opendatacapture.org/api'.
   • LoginDialog.tsx:62, :83 and UploadBundleDialog.tsx:113: 'Unknown Error', which becomes the message of the error notification.
   • StorageUsageDialog.tsx:53 and :57: the 'N/A' fallback.

   Plan

   • Headings: move the grouping into a pure InstrumentSelector/group-instruments.ts that walks $InstrumentCategory.options and skips empty categories. In the component, look each category up in a { [K in InstrumentCategory]: string } of t() values. This replaces the cast at InstrumentSelector.tsx:23-25, which claims every category is present. A fresh profile has no Saved group, so code that walks the categories under that cast gets undefined. The group order also becomes fixed. Today it depends on which category holds the alphabetically first label.
   • Keep Load an instrument... and Search... as the en values. index.page.ts:31 and fix(playground): search instruments by label #1817 both locate elements by them. fix(playground): search instruments by label #1817 also edits InstrumentSelector.tsx and playground.spec.ts, so rebase onto it.
   • E2E: the playground renders libui's LanguageToggle directly (Header.tsx:54, IndexPage.tsx:90), and that toggle has no name and no test id. Switch both to react-core's LanguageToggle with activeLanguages={['en', 'fr']}. It offers the same English and Français items and wraps the trigger in data-testid="language-toggle", so the spec can switch language the way gateway-landing.spec.ts:27-35 does. Any trigger name Gateway header's theme and language buttons have no accessible name, so screen readers announce both as just "button" #1722 adds to that wrapper then reaches the playground too. After the switch, the combobox's accessible name is French, so the spec has to open the selector by the French label.
   • Unit test: InstrumentSelector/__tests__/group-instruments.test.ts, in node, following fix: resolve 26 low-difficulty issues, one commit each #1825's SaveButton/is-save-disabled.ts. Assert the fixed category order, and that there is no Saved entry when nothing is saved. A test that renders the selector and checks the French strings needs happy-dom and @testing-library/react, which build: upgrade dependencies held back by breaking changes #1660 adds to apps/playground. Adding them in this change instead needs sign-off.

   _{Triage note written with Claude Code. Code references point at main @ d86740e.}