The small adventure
ODE forms can be used in more than one language, sometimes by people collecting
data far from a reliable network connection. The Formplayer already translates
its visible interface into English, Portuguese, and French, but the progress
bar's screen-reader labels are still hard-coded in English.
Let's make those two quiet little chevrons speak the same language as the rest
of the form.
Where to start
formulus-formplayer/src/components/FormProgressBar.tsx
formulus-formplayer/src/components/FormProgressBar.test.tsx
formulus-formplayer/src/i18n/useOdeT.ts
formulus-formplayer/src/locales/{en,pt,fr}.json
formulus-formplayer/AGENTS.md
The translation keys already exist:
nav.previousScreen
nav.nextScreen
What to change
- Use Formplayer's existing translation hook for the previous and next button
aria-label values.
- Preserve the current English fallback text.
- Extend the component tests to prove that at least one non-English locale is
used correctly.
- Keep the visible behavior, navigation callbacks, and disabled states exactly
as they are today.
Done when
Verify it
From formulus-formplayer/:
pnpm run lint
pnpm run format:check
pnpm test run
pnpm run build
What you will meet along the way
This issue is a compact tour of Formplayer: the React app that renders JSON
Forms inside Formulus and ODE Desktop. It also shows ODE's two localization
layers: ODE-owned interface text and form-author-owned content.
AI tools are welcome, not required
An AI assistant can help trace how FormplayerLocaleContext reaches a component
or suggest a test setup. Please still follow that path yourself and explain in
the pull request why the chosen hook updates when the locale changes. The goal
is a working fix and a new contributor who knows this corner of ODE.
If the test context is unclear, ask in the issue before building a new i18n test
helper. There may already be a tiny pattern worth reusing.
The small adventure
ODE forms can be used in more than one language, sometimes by people collecting
data far from a reliable network connection. The Formplayer already translates
its visible interface into English, Portuguese, and French, but the progress
bar's screen-reader labels are still hard-coded in English.
Let's make those two quiet little chevrons speak the same language as the rest
of the form.
Where to start
formulus-formplayer/src/components/FormProgressBar.tsxformulus-formplayer/src/components/FormProgressBar.test.tsxformulus-formplayer/src/i18n/useOdeT.tsformulus-formplayer/src/locales/{en,pt,fr}.jsonformulus-formplayer/AGENTS.mdThe translation keys already exist:
nav.previousScreennav.nextScreenWhat to change
aria-labelvalues.used correctly.
as they are today.
Done when
entries; no duplicate strings are introduced.
tests remain green.
Verify it
From
formulus-formplayer/:pnpm run lint pnpm run format:check pnpm test run pnpm run buildWhat you will meet along the way
This issue is a compact tour of Formplayer: the React app that renders JSON
Forms inside Formulus and ODE Desktop. It also shows ODE's two localization
layers: ODE-owned interface text and form-author-owned content.
AI tools are welcome, not required
An AI assistant can help trace how
FormplayerLocaleContextreaches a componentor suggest a test setup. Please still follow that path yourself and explain in
the pull request why the chosen hook updates when the locale changes. The goal
is a working fix and a new contributor who knows this corner of ODE.
If the test context is unclear, ask in the issue before building a new i18n test
helper. There may already be a tiny pattern worth reusing.