Add i18n lookup function

src/govuk/components/accordion/accordion.mjs

@@ -16,6 +16,7 @@
 */
 
 import { nodeListForEach } from '../../common.mjs'
+import I18n from '../../i18n.mjs'
 import '../../vendor/polyfills/Function/prototype/bind.mjs'
 import '../../vendor/polyfills/Element/prototype/classList.mjs'
 
@@ -25,6 +26,16 @@ function Accordion ($module) {
   this.$showAllButton = ''
   this.browserSupportsSessionStorage = helper.checkForSessionStorage()
 
+  var defaultConfig = {
+    i18n: {
+      hideAllSections: 'Hide all sections',
+      hideSection: 'Hide<span class="govuk-visually-hidden"> this section</span>',
+      showAllSections: 'Show all sections',
+      showSection: 'Show<span class="govuk-visually-hidden"> this section</span>'
+    }
+  }
+  this.i18n = new I18n(defaultConfig.i18n)
+
   this.controlsClass = 'govuk-accordion__controls'
   this.showAllClass = 'govuk-accordion__show-all'
   this.showAllTextClass = 'govuk-accordion__show-all-text'
@@ -232,15 +243,11 @@ Accordion.prototype.setExpanded = function (expanded, $section) {
   var $icon = $section.querySelector('.' + this.upChevronIconClass)
   var $showHideText = $section.querySelector('.' + this.sectionShowHideTextClass)
   var $button = $section.querySelector('.' + this.sectionButtonClass)
-  var newButtonText = expanded ? 'Hide' : 'Show'
-
-  // Build additional copy of "this section" for assistive technology and place inside toggle link
-  var $visuallyHiddenText = document.createElement('span')
-  $visuallyHiddenText.classList.add('govuk-visually-hidden')
-  $visuallyHiddenText.innerHTML = ' this section'
+  var newButtonText = expanded
+    ? this.i18n.t('hideSection')
+    : this.i18n.t('showSection')
 
   $showHideText.innerHTML = newButtonText
-  $showHideText.appendChild($visuallyHiddenText)
   $button.setAttribute('aria-expanded', expanded)
 
   // Swap icon, change class
@@ -277,7 +284,9 @@ Accordion.prototype.checkIfAllSectionsOpen = function () {
 Accordion.prototype.updateShowAllButton = function (expanded) {
   var $showAllIcon = this.$showAllButton.querySelector('.' + this.upChevronIconClass)
   var $showAllText = this.$showAllButton.querySelector('.' + this.showAllTextClass)
-  var newButtonText = expanded ? 'Hide all sections' : 'Show all sections'
+  var newButtonText = expanded
+    ? this.i18n.t('hideAllSections')
+    : this.i18n.t('showAllSections')
   this.$showAllButton.setAttribute('aria-expanded', expanded)
   $showAllText.innerHTML = newButtonText
 

src/govuk/i18n.mjs

@@ -0,0 +1,39 @@
+/**
+ * i18n support initialisation function
+ *
+ * @constructor
+ * @param    {Object}  translations  - Key-value pairs of the translation
+                                       strings to use.
+ */
+function I18n (translations) {
+  console.log(this)
+
+  // List of translations
+  this.translations = translations || {}
+}
+
+/**
+ * The most used function - takes the key for a given piece of UI text and
+ * returns the appropriate string.
+ *
+ * @param    {String}  lookupKey  - The lookup key of the string to use.
+ * @returns  {String}             - The appropriate translation string.
+ */
+I18n.prototype.t = function (lookupKey) {
+  var outputString = lookupKey
+
+  // Error if no lookup key has been provided
+  // Otherwise assign the string to our processing variable
+  if (!lookupKey) {
+    if ('console' in window) {
+      console.log(new Error('i18n lookup key missing.'))
+    }
+    return
+  } else {
+    outputString = this.translations[lookupKey]
+  }
+
+  return outputString
+}
+
+export default I18n