Accordion 'open/close all sections' cannot be customised or translated

[HughePaul]

govuk-frontend/src/components/accordion/accordion.js

Line 60 in 1eef89c

this.$openAllButton.innerHTML = 'Open all <span class="govuk-visually-hidden">sections</span>'

The accordion has hardcoded English text in javascript file, meaning it can't be translated to Welsh. Without being able to translate this our site can't enter Public Beta.

[36degrees]

Hi Paul,

Thanks for raising. This has come up before a few times before – most recently in #1038.

Unfortunately at the minute we don't have a decent solution for localisation / internationalisation.

For now, we suggest that you copy the Javascript for this component into your service's codebase and make the adjustments required for the service you’re working on. I recognise this isn't ideal – in #1038 I mentioned that we were hoping to look at this properly in 'early [2019],' but we haven't got to it yet.

Hope that helps,

Ollie

[HughePaul]

I've penned an MR to try to pull hardcoded text from data attributes and fall back to the existing English - could this be a suitable route for hardcoded text in the javascript?

[36degrees]

Thanks for doing that! 👏 It sounds like a sensible option, but as it introduces new conventions to the component API we need to spend a little bit of time understanding how it might work for other components – both existing, and new ones – and to make sure it's the right approach.

Our team are currently prioritising work to make GOV.UK Frontend pass WCAG 2.1 requirements and we have an external audit coming up soon. Because of this, it may take a little while before we can review your PR.

If this is blocking you, I still recommend copying the JS into your service as the best short-term solution.

Thanks for your understanding.

[HughePaul]

Given the new design of the accordion and the predominant English text for "Show all sections", "Hide all sections", "Show" and "Hide" compared to the old component, I think this has become a bit more important.

New accordion on page in welsh:

Old accordion on same page:

For our own components we've been specifying localised text as component args, the nunjucks has been populating data-text-{name} attributes in the HTML, and the javascript picks those up from the element. That way the page can populate the localised language text, and the component doesn't need to care about which language it is.

[TautvydasPocius]

Hello, is this component ready for production use on a service which is not allowed to use javascript and is multi-lingual? Considering that this component is expiremental as of now would it be best to use an alternative?

[owenatgov]

We ran into a similar problem when developing the pagination component. Each number originally had a visually hidden "page " suffix which we were struggling to translate without requiring teams to pass complex html. The way we solved this was by instead using aria-label's around the pagination numbers. This resulted in some minor duplication but made the html overall simpler and more importantly, easier to localise. Could we do something like this here?

I can see that @querkmachine has already started to try solving this using the html approach as part of the localisation work. That would in theory solve this as well, but I'm sticking my neck out for the aria-label approach. We don't need to do that right now and I don't want to disrupt the in-flow i18n work with this.

[36degrees]

I think this has been addressed by #2699 and #2802 which should go out in the next release – keep an eye on those issues for progress updates.