Allow users to provide translations for hardcoded content in components

[CarolineS-QA]

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]

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:

• Add another (Remove button)
• Multi select ("Select all" label)
• Password reveal ("Show/Hide password" button)

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

• Button menu
• Filter toggle button
• Multi file upload
• Sortable table

Other links:

• GOV.UK Design System spike to use JS config and data attributes
• hmrc-frontend approach using data attributes

[CarolineS-QA]

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]

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