Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP][DO NOT MERGE] Nunjucks internationalisation support #2648

Closed
wants to merge 4 commits into from

Conversation

querkmachine
Copy link
Member

@querkmachine querkmachine commented May 27, 2022

In addition to updating our JavaScript to allow for localisation (#2614), we also have a few instances of hardcoded strings and fixed word order in our Nunjucks code that need to made configurable. There isn't a 'one size fits all' approach to doing this and we'll probably need to use slightly different methods for enabling localisation of each component.

Identified issues

Possible improvements

  • Date input: Each input's label is localisable, but only by providing the entire items array, requiring service users to also re-define the default name and classes if they don't want these to change. There may be a nicer way of doing this.
  • Error summary: The description is always be interpolated between paragraph tags, even if the description is provided via the html parameter. This is the only component to do this; other components only add paragraph tags if the content is provided via text.

None of the above changes are to enable RTL language support.

Adds Nunjucks parameters for customising the content licence and copyright notices in the footer component, and a review app example of this functionality in action. The hardcoded English language
versions are still used if the parameters aren't used.

I also noticed that the "with custom meta" example was present twice, so I've removed one of them.
@querkmachine querkmachine self-assigned this May 27, 2022
Some government services that use Frontend, but aren't hosted on GOV.UK, such as internal caseworking systems do not have content available under the Open Government Licence. Similarly,
third-parties making use of Frontend components may not have content that is released under Crown Copyright.

This adds two new boolean parameters to the Nunjucks components:

- `hideOpenGovernmentLicenceLogo` — Hides the OGL graphic.
- `hideCrownCopyrightArms` — Removes the royal arms graphic and the Crown Copyright link. Setting this also stops the component using the default `copyright` text, with the expectation that a new
non-Crown copyright notice is to be supplied.
Adds the `menuButton` parameter to customise the text of the menu toggle button that appears on narrow screens.
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2648 May 30, 2022 13:47 Inactive
@edwardhorsford
Copy link
Contributor

Date input: Each input's label is localisable, but only by providing the entire items array, requiring service users to also re-define the default name and classes if they don't want these to change. There may be a nicer way of doing this.

I suspect in most cases teams might already have to do this? Don't you need to provide these where you're pre-setting a date? If a team has a check your answers page they'll likely be needing to pre-set.

(I think it would be great for you to be able to pre-set a date without requiring providing the whole array)

Adds a new parameter to the character count component, `limitHint`, which allows developers to override the limit hint text (announced to screen readers, and shown visibly if JavaScript is
unavailable) for the purposes of localisation.

As this text contains dynamic information, namely the character or word limit, interpolated into it, I've made use of Nunjucks' built-in `replace` function to replace instances of `%{count}`
in the given text with the limit number. This is the same variable formatting and name as in the JavaScript for character count internationalisation.
@querkmachine
Copy link
Member Author

Regarding localisation of error messages and summary list action links—doing this is already possible by discarding the visuallyHiddenText and manually adding a visually-hidden span into the html parameter, such as doing this:

{{ govukErrorMessage({
  visuallyHiddenText: false,
  html: '<span class="govuk-visually-hidden">错误:</span>输入事件名称'
})
{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Nomen Nescio"
      },
      actions: {
        items: [
          {
            href: "#",
            visuallyHiddenText: false,
            html: '<span class="govuk-visually-hidden">Namen </span>ändern'
          }
        ]
      }
    }
  ]
}) }}

Is this a 'good enough' solution for those circumstances? It would require no new code changes, though this process would probably need to be documented somewhere.

Conversely, it does make languages that need to take this approach feel a bit 'second class', but they might be uncommon enough in implementation that it's not worth fussing over.

@edwardhorsford
Copy link
Contributor

I reckon it's probably good enough in the first instance. Agree on documentation as I don't think it's obvious you could do this unless you were rather experienced with the deisgn system - I wonder if it would suit for the design system to have a specific page all about localisation which talks through the various things you might do.

@querkmachine
Copy link
Member Author

Consensus within the team also seems to be that the above proposal will do for the time being. We'll revisit it if it proves to be too manual or too inflexible for service teams needs.

@querkmachine
Copy link
Member Author

The contents of this branch/PR have now been incorporated into #2614, so I'm going to close this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants