Skip to content

fix(formplayer): localize progress bar navigation labels #907

Description

@Mishael-2584

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

  • The two navigation buttons use the active ODE UI locale.
  • English, Portuguese, and French continue to use the existing catalog
    entries; no duplicate strings are introduced.
  • Tests cover the localized accessible labels and the existing navigation
    tests remain green.
  • Lint, formatting, tests, and build pass for Formplayer.

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions