Enable translations by SarahW91 · Pull Request #296 · inveniosoftware/react-searchkit

SarahW91 · 2026-04-02T13:30:57Z

Description

I think it would be beneficial to enable translations for this module. There are some rather prominent components, e.g. EmptyResults that can't be translated otherwise.

Adding the necessary scripts and dependencies adds this ability, e.g.:

What do you think? If you are generally okay with this, I'll start marking all strings in the module as translatable.

Checklist

I'm aware of the code of conduct.
I've created logical separate commits and followed the commit message format.
I've identified the copyright holder(s) and updated copyright headers for touched files (>15 lines contributions).
I've NOT included third-party code (copy/pasted source code or new dependencies).
- If you have added third-party code (copy/pasted or new dependencies), please reach out to an architect on Discord.

Samk13

Thanks for this @SarahW91! this is a nice addition, enabling translations definitely makes sense.

Before merging, I'd prefer we align this a bit more with what we already have in invenio-app-rdm:

use the more recent compileCatalog.js pattern (async/await, proper error handling, normalized output, etc..),
generate the translations index (like _generatedTranslations.js) instead of maintaining messages/index.js manually.

This will keep things consistent across packages and avoid extra maintenance later on.

Samk13 · 2026-04-03T12:18:32Z

@@ -0,0 +1,38 @@
+// This file is part of React-Searchkit


Could we align the scripts with the implementation we already use in invenio-app-rdm? https://github.com/inveniosoftware/invenio-app-rdm/blob/master/invenio_app_rdm/theme/assets/semantic-ui/translations/invenio_app_rdm/scripts/compileCatalog.js

Samk13 · 2026-04-03T12:28:34Z

@@ -0,0 +1,69 @@
+import TRANSLATE_AF from "./af/translations.json";


Same here, check the PR: inveniosoftware/invenio-app-rdm@13c1490#diff-8b01847cace59a05dffd86a564f110ec278d9f3913752994b04ed6c42ec72add

What I don't quite get is where the *.po files and language configs are coming from. Are they pulled from Transifex? because there seems to be no step to automatically generate them otherwise

Yes, without Transifex yet, the new language has to be bootstrapped locally first.

In the current Invenio setup, init_catalog only adds the language to package.json; it does not create the .po file automatically.
Then extract_messages updates the extracted JSON and generates the English source files (translations.pot / messages/en/messages.po).
For any additional language, you still need to create messages//messages.po locally first, and only then compile_catalog can convert it to translations.json.

So the local dev flow is basically:

npm run init_catalog lang <lang> npm run extract_messages # create/bootstrap messages/<lang>/messages.po npm run compile_catalog lang <lang>

Once Transifex is set up, that manual step (dev work) gets replaced by pulling the .po files from Transifex.

It makes me wonder where all these languages listed in this PR are coming from. Were they generated automatically, or are they copied manually from another package?

I copied those over from https://github.com/inveniosoftware/react-invenio-deposit

I updated the language list to be the same as on Transifex, created all *.po files and "compiled" the translations to generate the translation.json files.

What would still be missing now to merge this PR @Samk13 ?

Samk13

Thanks for this @SarahW91. I left few comments on smaller cleanup points, but from my testing, the PR looks good and seems ready to merge.

We will have another pass once we publish it on Transifex if something needs to be adjusted, as we can't push directly while developing.

And there are many places where the strings are not wrapped for translations, but you can choose if we add it here or in a follow-up PR e.g:

Samk13 · 2026-04-16T13:51:15Z

+      "da",
+      "de",
+      "el",
+      "en",


After we test that it's working, we can remove all these, and keep en for now, when we set up the Transifex repo, it will update automatically

But there's no harm in keeping them for now? I'd rather remove them in a separate PR after we see everything working together with Transifex

But seems to work:

_generated_translations.js also looks fine to me, I'll push it soon

Samk13 · 2026-04-16T13:53:04Z

@@ -0,0 +1,55 @@
+msgid ""


I think it's safe to delete all other languages other than en at this stage. Once we set up the Transifex, then we can do another pass.

Samk13 · 2026-04-16T14:08:05Z

+  },
+  "jest": {
+    "moduleNameMapper": {
+      "@translations/i18next": "<rootDir>/src/lib/i18next"
+    }
  }


Should we remove this block?
It looks like it was added only to mirror the new Rollup alias for @translations/i18next, so Jest can resolve that import if tests cover those components.
I don’t think it’s exercised by the current test suite, so if we keep the alias it’s mostly defensive; if we drop the alias and use relative imports instead, this config can go away too.
WDYT?

I don't know enough about this setup to feel confident in removing it. If someone with more experience thinks it's safe, I can do it, but for now I'd say we keep it.

SarahW91 · 2026-04-16T14:30:57Z

And there are many places where the strings are not wrapped for translations, but you can choose if we add it here or in a follow-up PR e.g:

* https://github.com/inveniosoftware/react-searchkit/blob/master/src/lib/components/Sort/Sort.js#L159

* https://github.com/inveniosoftware/react-searchkit/blob/master/src/lib/components/SortBy/SortBy.js#L126

* https://github.com/inveniosoftware/react-searchkit/blob/master/src/lib/components/SortOrder/SortOrder.js#L128

* https://github.com/inveniosoftware/react-searchkit/blob/master/src/lib/components/ResultsPerPage/ResultsPerPage.js#L81

* https://github.com/inveniosoftware/react-searchkit/blob/master/src/lib/components/RangeFacet/RangeCustomFilter.js#L369-L372

I'm not sure if AriaLabels need translating. Where do they show up for users? Sorry if that's obvious, but I'm not usually a frontend dev ;)

Samk13 · 2026-04-16T14:40:26Z

I'm not sure if AriaLabels need translating. Where do they show up for users? Sorry if that's obvious, but I'm not usually a frontend dev ;)

hmmm, I'd lean toward translating them. ARIA labels don't show up visually in the UI, but they're used by screen readers, so they're still part of the user experience for people relying on assistive technologies.

If those users don't speak English, leaving ARIA labels untranslated can make navigation difficult or confusing. From an accessibility perspective, its usually best to include them in translations.

That said, its not always enforced strictly all over our code base, so as I mentioned, we could also handle it in a follow up if thats easier.

SarahW91 requested review from Samk13 and carlinmack April 2, 2026 13:30

SarahW91 marked this pull request as draft April 2, 2026 13:32

SarahW91 marked this pull request as ready for review April 2, 2026 13:32

Samk13 requested changes Apr 3, 2026

View reviewed changes

SarahW91 added 14 commits April 13, 2026 16:58

feat: enable GitHub translation workflow

fd68959

feat: add Transifex config

0c8da4d

feat: add scripts for translation workflow

345b61b

feat: add i18n config to package.json

2a0aa75

feat: add missing dependencies and alias for i18n

c7a1cf7

update package-lock.json

0214fff

ui(translations): mark strings as translatable

5e9039c

ui(translations): extract translations

69baad3

ui(translations): remove unused translations and fix interpolation

8499bb1

formatting: fix formatting

4b8a1f9

formatting: fix formatting

5a540dc

feat(translations): adjust translation scripts to use new implementation

2501a83

formatting: fix formatting

cd7dee9

update translations after rebase

e87f8a6

SarahW91 force-pushed the enable_translations branch from c5af22a to e87f8a6 Compare April 13, 2026 15:26

SarahW91 added 6 commits April 13, 2026 17:29

update RangeFacet.js

2bcdc87

update language list

f5396a5

extract translations again

5d408ea

create po files

e02caf6

compile translations

1406764

compile translations

2d315cf

Samk13 reviewed Apr 16, 2026

View reviewed changes

update path in tx config

999c3c1

SarahW91 added 3 commits April 20, 2026 11:59

add _generated_translations.js

2d556df

make ariaLabels translatable

a4b858a

make ariaLabels translatable

e2b77e1

Samk13 requested a review from utnapischtim April 20, 2026 10:14

update translation template

4f951dc

SarahW91 requested a review from Samk13 April 20, 2026 10:17

		@@ -0,0 +1,69 @@
		import TRANSLATE_AF from "./af/translations.json";

Conversation

SarahW91 commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Uh oh!

Samk13 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Samk13 Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Samk13 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SarahW91 commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Samk13 commented Apr 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

SarahW91 commented Apr 2, 2026 •

edited

Loading

Samk13 Apr 7, 2026 •

edited

Loading

SarahW91 commented Apr 16, 2026 •

edited

Loading