search

ministryofjustice / moj-frontend

Use the MoJ Design System to design, build, and deliver accessible and consistent services.
https://design-patterns.service.justice.gov.uk/
MIT License
30 stars 18 forks source link

Allow users to provide translations for hardcoded content in components #404

Open CarolineS-QA opened 1 year ago

CarolineS-QA commented 1 year ago

Summary

Allow english text provided by javascript to be customised or changed (for translation).

Motivation

During an accessibility audit we had the following issue raised.

Issue: Table sort by copy for screen readers not translated to Welsh (AA) WCAG 2.1 violation: WCAG 2.1 violation: 3.1.2: Language of Parts Page: All pages using the table sort by functionality Description: When switching the language of the page to Welsh, the table sort by copy read by screen readers remains partly in English, e.g. "Sort by Cyfeirnod cleient (descending)"

The text is provided by the JS from MOJ frontend. Currently there is no functionality to support other languages.

Describe alternatives you've considered

I have made this change manually for our service in our copy of minified MOJ frontend. This is the only workaround available. https://github.com/hmrc/agent-permissions-frontend/pull/194

Ideally, users of MOJ frontend would have the capability to provide customised context for any strings used in messages.

Additional context

In different projects alternative languages are configured in different ways. HMRC Digital's platform is built with Scala/Play framework so typically content is defined in messages and messages.cy files.

But govuk-frontend has been working on a similar issue with their JS https://github.com/alphagov/govuk-frontend/issues/1708

gregtyler commented 1 year ago

In the latest version of the pattern library you can configure translations for Sortable table when initialised with JavaScript:

new MOJFrontend.SortableTable({
  table: $table,
  statusMessage: 'Trefnu yn ôl %heading% (%direction%)',
  ascendingText: 'esgynnol',
  descendingText: 'disgynnol',
});

However, this isn't documented, isn't very flexible, and isn't consistent with other components

Components which still have English hard-coded:

Components where you can override the translation, but it's not consistent:

Other links:

CarolineS-QA commented 1 year ago

Wow, well, that's handy to know I suppose. As you say, wish it was a bit easier to find that out!

My service uses the multi-select as well so I guess that's still something to fix 😅 Thanks for the response 👍

gregtyler commented 1 year ago

Upstream Design System now has guidance for localisation so we can follow their lead.