Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#1,762 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
84/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
accessibility, frontend, internationalization, testing

Direzione di ricerca

Start with the listed strings in InstrumentSelector.tsx, App.tsx, PreviewFrame.tsx, EditorPane.tsx, and UploadButton.tsx; check how nearby UI uses t({ en, fr }) and how the loading screen accesses i18n outside CoreProvider. Add the playground TSX files (excluding stories) to the react/jsx-no-literals block in eslint.config.js and extend testing/src/specs/playground.spec.ts. Done when the listed strings display in French and lint and the E2E assertions pass.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Area: Playground Bug Difficulty: Low Good First Issue Priority: Low

Several strings in the playground are hard-coded in English, so the French UI shows English in the instrument selector, on the loading screen and in a few labels. The playground offers English and French through its LanguageToggle and translates most text with t({ en, fr }), but these strings skip it. The instrument selector, the control used most, is the most visible case: in French, its search placeholder, its empty state and all three group headings (Examples, Saved, Templates, which are the raw category values) stay in English. react/jsx-no-literals, which catches this in apps/web and packages/react-core, is not enabled for apps/playground in eslint.config.js.

Where

apps/playground/src/components/Header/InstrumentSelector/InstrumentSelector.tsx:33, :44, :46, :48:

aria-label="Load an instrument..."
// ...
<Command.Input placeholder="Search..." />
<Command.List>
  <Command.Empty>No Instruments Found</Command.Empty>
  {Object.entries(categorizedInstruments).map(([heading, instruments]) => (
    <Command.Group heading={heading} key={heading}>

Also:

  • apps/playground/src/App.tsx:13: the loading screen's title="Loading Editor and Toolchain" and subtitle="Please Be Patient, This May Take a While".
  • apps/playground/src/components/Viewer/PreviewFrame.tsx:69: the preview iframe's title="Open Data Capture - Instrument Preview", which screen readers announce.
  • apps/playground/src/components/Editor/EditorPane.tsx:118: the image preview's alt={`Rendering of ${defaultFile.name}`}.
  • apps/playground/src/components/Header/UploadButton/UploadButton.tsx:33,36: the fallback label 'Unlabeled', which becomes the uploaded instrument's visible name.

Reproduce

  1. Open the playground and switch the language toggle to Français.
  2. Open the instrument selector, then type zzz into its search box.
  3. Reload the page.

Actual: the placeholder reads Search..., the headings read Examples, Saved and Templates, the empty state reads No Instruments Found, and the loading screen is in English.
Expected: all of these appear in French.

Tests

Add apps/playground/src/**/*.tsx (excluding stories) to the react/jsx-no-literals block in eslint.config.js, so pnpm lint catches any regression. That lint rule is the guard; the strings themselves have no pure logic to unit-test.

E2E in testing/src/specs/playground.spec.ts: switch to French, open the selector, and assert that the search placeholder and a group heading are the French strings.

Suggested fix

Wrap each string in t({ en, fr }), map the category values to translated headings, and enable react/jsx-no-literals for the playground. The loading screen renders outside CoreProvider, so it needs i18n.t or a small wrapper rather than the hook.

Lingua principale
TypeScript
Stelle
119
Fork
19
Merge medio
18h 50m
PR unite (30g)
36

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di DouglasNeuroInformatics/OpenDataCapture

Tutte le issue di DouglasNeuroInformatics/OpenDataCapture

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.