From 50204e981b49c05981575c89515b3e57d8db9d5b Mon Sep 17 00:00:00 2001
From: owenatgov <owen.jones@digital.cabinet-office.gov.uk>
Date: Thu, 4 Mar 2021 13:37:54 +0000
Subject: [PATCH] Tidy up untranslated content and formatting on accordion docs

---
 .../components/accordion.js                   |  14 +-
 .../components/_accordion.html.erb            |   5 +
 .../components/docs/accordion.yml             | 144 +++++++++---------
 config/locales/en.yml                         |  10 ++
 4 files changed, 98 insertions(+), 75 deletions(-)

diff --git a/app/assets/javascripts/govuk_publishing_components/components/accordion.js b/app/assets/javascripts/govuk_publishing_components/components/accordion.js
index 9aea61db46..4ef74314db 100644
--- a/app/assets/javascripts/govuk_publishing_components/components/accordion.js
+++ b/app/assets/javascripts/govuk_publishing_components/components/accordion.js
@@ -31,6 +31,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.upChevonIconClass = 'gem-c-accordion-nav__chevron'
     this.downChevonIconClass = 'gem-c-accordion-nav__chevron--down'
 
+    // component content pulled from translated data attributes
+    this.$module.actions = {}
+    this.$module.actions.showText = this.$module.getAttribute('data-show-text')
+    this.$module.actions.hideText = this.$module.getAttribute('data-hide-text')
+    this.$module.actions.showAllText = this.$module.getAttribute('data-show-all-text')
+    this.$module.actions.hideAllText = this.$module.getAttribute('data-hide-all-text')
+    this.$module.actions.thisSectionVisuallyHidden = this.$module.getAttribute('data-this-section-visually-hidden')
+
     // Indicate that js has worked
     this.$module.classList.add('gem-c-accordion--active')
 
@@ -117,7 +125,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     // Build additional copy for assistive technology
     var srAdditionalCopy = document.createElement('span')
     srAdditionalCopy.classList.add('govuk-visually-hidden')
-    srAdditionalCopy.innerHTML = ' this section'
+    srAdditionalCopy.innerHTML = this.$module.actions.thisSectionVisuallyHidden
 
     // Build additional wrapper for toggle text, place icon after wrapped text.
     var wrapperShowHideIcon = document.createElement('span')
@@ -178,7 +186,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     var icon = section.querySelector('.' + this.upChevonIconClass)
     var showHideText = section.querySelector('.' + this.sectionShowHideTextClass)
     var button = section.querySelector('.' + this.sectionButtonClass)
-    var newButtonText = expanded ? 'Hide' : 'Show'
+    var newButtonText = expanded ? this.$module.actions.hideText : this.$module.actions.showText
 
     showHideText.innerHTML = newButtonText
     button.setAttribute('aria-expanded', expanded)
@@ -218,7 +226,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   GemAccordion.prototype.updateOpenAllButton = function (expanded) {
     var icon = this.openAllButton.querySelector('.' + this.upChevonIconClass)
     var openAllCopy = this.openAllButton.querySelector('.' + this.openAllTextClass)
-    var newButtonText = expanded ? 'Hide all sections' : 'Show all sections'
+    var newButtonText = expanded ? this.$module.actions.hideAllText : this.$module.actions.showAllText
     this.openAllButton.setAttribute('aria-expanded', expanded)
     openAllCopy.innerHTML = newButtonText
 
diff --git a/app/views/govuk_publishing_components/components/_accordion.html.erb b/app/views/govuk_publishing_components/components/_accordion.html.erb
index 487572fc5a..183c224b31 100644
--- a/app/views/govuk_publishing_components/components/_accordion.html.erb
+++ b/app/views/govuk_publishing_components/components/_accordion.html.erb
@@ -14,6 +14,11 @@
   data_attributes ||= {}
   data_attributes[:module] = 'gem-accordion'
   data_attributes[:anchor_navigation] = anchor_navigation
+  data_attributes[:show_text] = t("components.accordion.show")
+  data_attributes[:hide_text] = t("components.accordion.hide")
+  data_attributes[:show_all_text] = t("components.accordion.show_all")
+  data_attributes[:hide_all_text] = t("components.accordion.hide_all")
+  data_attributes[:this_section_visually_hidden] = t("components.accordion.this_section_visually_hidden")
 %>
 <% if items.any? %>
   <%= tag.div(class: accordion_classes, id: id, data: data_attributes) do %>
diff --git a/app/views/govuk_publishing_components/components/docs/accordion.yml b/app/views/govuk_publishing_components/components/docs/accordion.yml
index 6bfc9f641b..9164f11e44 100644
--- a/app/views/govuk_publishing_components/components/docs/accordion.yml
+++ b/app/views/govuk_publishing_components/components/docs/accordion.yml
@@ -40,21 +40,21 @@ examples:
     data:
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
   with_supplied_identification:
     description: |
       An `id` is optional as it's automatically generated, but it can be supplied if a specific `id` is required.
@@ -66,29 +66,29 @@ examples:
       id: with-supplied-id-thats-unique-across-the-domain
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
   with_summary:
     description: Adds a subheading below each section heading.
     data:
       items:
         - heading:
-            text: "Understanding agile project management"
+            text: Understanding agile project management
           summary:
-            text: "Introductions, methods, core features."
+            text: Introductions, methods, core features.
           content:
             html:
               '<ul class="govuk-list">
@@ -103,9 +103,9 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Working with agile methods"
+            text: Working with agile methods
           summary:
-            text: "Workspaces, tools and techniques, user stories, planning."
+            text: Workspaces, tools and techniques, user stories, planning.
           content:
             html:
               '<ul class="govuk-list">
@@ -132,9 +132,9 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Governing agile services"
+            text: Governing agile services
           summary:
-            text: "Principles, measuring progress, spending money."
+            text: Principles, measuring progress, spending money.
           content:
             html:
               '<ul class="govuk-list">
@@ -158,9 +158,9 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Phases of an agile project"
+            text: Phases of an agile project
           summary:
-            text: "Discovery, alpha, beta, live and retirement."
+            text: Discovery, alpha, beta, live and retirement.
           content:
             html:
               '<ul class="govuk-list">
@@ -190,54 +190,54 @@ examples:
 
     data:
       data_attributes:
-          gtm: 'gtm-accordion'
-          ga: 'ga-accordion'
+          gtm: gtm-accordion
+          ga: ga-accordion
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
           data_attributes:
-            gtm: 'gtm-accordion-item-1'
+            gtm: gtm-accordion-item-1
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
           data_attributes:
-            gtm: 'gtm-accordion-item-2'
+            gtm: gtm-accordion-item-2
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
           data_attributes:
-            gtm: 'gtm-accordion-item-3'
+            gtm: gtm-accordion-item-3
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
           data_attributes:
-            gtm: 'gtm-accordion-item-4'
+            gtm: gtm-accordion-item-4
   different_heading_level:
     description: This will alter the level of the heading, not the appearance of the heading.
     data:
       heading_level: 3
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
   with_margin_bottom:
     description: |
       The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of 30px.
@@ -245,35 +245,35 @@ examples:
       margin_bottom: 0
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
   with_section_open:
     description: |
       Adding `expanded: true` to the item will mean the section will default to being open, rather than closed. Once a user has opened or closed a section, the state of each section will be remembered - this can override a section's default.
     data:
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
           expanded: true
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
   with_the_anchor_link_navigation:
     description: |
       Some apps require custom ids per accordion section heading for linking between those specific sections, sometimes across multiple pages. An example of this is on manuals pages where multiple manuals will each include large sets of accordions and will reference between specific sections for ease of access to that content. [Live example](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/creating-and-updating-pages#associations).
@@ -287,22 +287,22 @@ examples:
       anchor_navigation: true
       items:
         - heading:
-            text: "Writing well for the web"
-            id: "writing-well-for-the-web"
+            text: Writing well for the web
+            id: writing-well-for-the-web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
   condensed_layout:
     description: |
       This is for when a smaller accordion is required. Since smaller screens trigger a single column layout, this modifier only makes the accordion smaller when viewed on large screens.
@@ -310,7 +310,7 @@ examples:
       condensed: true
       items:
         - heading:
-            text: "Understanding agile project management"
+            text: Understanding agile project management
           content:
             html:
               '<ul class="govuk-list">
@@ -325,9 +325,9 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Working with agile methods"
+            text: Working with agile methods
           summary:
-            text: "Workspaces, tools and techniques, user stories, planning."
+            text: Workspaces, tools and techniques, user stories, planning.
           content:
             html:
               '<ul class="govuk-list">
@@ -354,7 +354,7 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Governing agile services"
+            text: Governing agile services
           content:
             html:
               '<ul class="govuk-list">
@@ -378,7 +378,7 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Phases of an agile project"
+            text: Phases of an agile project
           content:
             html:
               '<ul class="govuk-list">
diff --git a/config/locales/en.yml b/config/locales/en.yml
index fc744a595b..23c7fe1921 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -23,6 +23,12 @@ en:
   common:
     translations: "Translations"
   components:
+    accordion:
+      show: "Show"
+      hide: "Hide"
+      show_all: "Show all sections"
+      hide_all: "Hide all sections"
+      this_section_visually_hidden: " this section"
     attachment:
       opendocument_html: "This file is in an <a href='https://www.gov.uk/guidance/using-open-document-formats-odf-in-your-organisation' target=%{target} class='govuk-link'>OpenDocument</a> format"
       request_format_text: "This file may not be suitable for users of assistive technology."
@@ -54,6 +60,10 @@ en:
       what_wrong: "What went wrong?"
       send_me_survey: "Send me the survey"
       send: "Send"
+    layout_header:
+      top_level: "Top level"
+      nav_items_aria_label: "Show or hide Top Level Navigation"
+      menu: "Menu"
     organisation_schema:
       all_content_search_description: "Find all content from %{organisation}"
     radio: