Add support for localisation of aria-label specific text for show all…

… button in Accordion component

app/views/examples/translated/index.njk

@@ -944,6 +944,7 @@
         i18n: {
           showAllSections: "Dangos adrannau",
           hideAllSections: "Cuddio adrannau",
+          showAllSectionsAriaLabel: "Dangos rhannau o’r acordion hwn"
         },
         "i18n.showSection": "Dangos",
         "i18n.showSectionAriaLabel": "Dangos adran",

src/govuk/components/accordion/accordion.mjs

@@ -390,7 +390,19 @@ Accordion.prototype.updateShowAllButton = function (expanded) {
     ? this.i18n.t('hideAllSections')
     : this.i18n.t('showAllSections')
 
+  var newButtonAriaLabelText
+  if (expanded) {
+    newButtonAriaLabelText = Object.prototype.hasOwnProperty.call(this.config, 'i18n.hideAllSectionsAriaLabel')
+      ? this.i18n.t('hideAllSectionsAriaLabel')
+      : this.i18n.t('hideAllSections')
+  } else {
+    newButtonAriaLabelText = Object.prototype.hasOwnProperty.call(this.config, 'i18n.showAllSectionsAriaLabel')
+      ? this.i18n.t('showAllSectionsAriaLabel')
+      : this.i18n.t('showAllSections')
+  }
+
   this.$showAllButton.setAttribute('aria-expanded', expanded)
+  this.$showAllButton.setAttribute('aria-label', newButtonAriaLabelText)
   this.$showAllText.innerText = newButtonText
 
   // Swap icon, toggle class
@@ -500,12 +512,18 @@ export default Accordion
  * for the buttons toggling each section.
  * @property {string} [hideAllSections] - The text content for the 'Hide all
  * sections' button, used when at least one section is expanded.
+ * @property {string} [hideAllSectionsAriaLabel] - The text content for the
+ * 'Hide all sections' to be made available to assistive technologies such as
+ * screen readers.
  * @property {string} [hideSection] - The text content for the 'Hide'
  * button, used when a section is expanded.
  * @property {string} [hideSectionAriaLabel] - The text content appended to the
  * 'Hide' button's accessible name when a section is expanded.
  * @property {string} [showAllSections] - The text content for the 'Show all
  * sections' button, used when all sections are collapsed.
+ * @property {string} [showAllSectionsAriaLabel] - The text content for the
+ * 'Show all sections' to be made available to assistive technologies such as
+ * screen readers.
  * @property {string} [showSection] - The text content for the 'Show'
  * button, used when a section is collapsed.
  * @property {string} [showSectionAriaLabel] - The text content appended to the

src/govuk/components/accordion/accordion.test.js

@@ -313,6 +313,40 @@ describe('/components/accordion', () => {
           expect(allSectionsToggleText).toBe('Dangos adrannau')
         })
 
+        it('should localise "Show all sections" aria-label based on data attribute', async () => {
+          await goToComponent(page, 'accordion', {
+            exampleName: 'with-translations'
+          })
+
+          const showAllSectionsDataAttribute = await page.evaluate(() =>
+            document.body
+              .querySelector('.govuk-accordion')
+              .getAttribute('data-i18n.show-all-sections-aria-label')
+          )
+
+          const allSectionsToggleAriaLabel = await page.evaluate(
+            () =>
+              document.body.querySelector(
+                '.govuk-accordion__show-all'
+              ).getAttribute('aria-label')
+          )
+
+          expect(allSectionsToggleAriaLabel).toBe(showAllSectionsDataAttribute)
+        })
+
+        it('should localise "Show all sections" aria-label based on JavaScript configuration', async () => {
+          await goToExample(page, 'translated')
+
+          const allSectionsToggleAriaLabel = await page.evaluate(
+            () =>
+              document.body.querySelector(
+                '.govuk-accordion__show-all'
+              ).getAttribute('aria-label')
+          )
+
+          expect(allSectionsToggleAriaLabel).toBe('Dangos rhannau o’r acordion hwn')
+        })
+
         it('should localise "Hide all sections" based on data attribute', async () => {
           await goToComponent(page, 'accordion', {
             exampleName: 'with-translations'
@@ -335,6 +369,45 @@ describe('/components/accordion', () => {
           expect(allSectionsToggleText).toBe('Cuddio adrannau')
         })
 
+        it('should localise "Hide all sections" aria-label based on data attribute', async () => {
+          await goToComponent(page, 'accordion', {
+            exampleName: 'with-translations'
+          })
+          await page.click(
+            '.govuk-accordion .govuk-accordion__show-all-text'
+          )
+
+          const hideAllSectionsDataAttribute = await page.evaluate(() =>
+            document.body
+              .querySelector('.govuk-accordion')
+              .getAttribute('data-i18n.hide-all-sections-aria-label')
+          )
+
+          const allSectionsToggleAriaLabel = await page.evaluate(
+            () => document.body.querySelector(
+              '.govuk-accordion__show-all'
+            ).getAttribute('aria-label')
+          )
+
+          expect(allSectionsToggleAriaLabel).toBe(hideAllSectionsDataAttribute)
+        })
+
+        it('should localise "Hide all sections" aria-label based on JavaScript configuration, falling back to non aria attribute when not set', async () => {
+          await goToExample(page, 'translated')
+          await page.click(
+            '.govuk-accordion .govuk-accordion__show-all-text'
+          )
+
+          const allSectionsToggleAriaLabel = await page.evaluate(
+            () =>
+              document.body.querySelector(
+                '.govuk-accordion__show-all'
+              ).getAttribute('aria-label')
+          )
+
+          expect(allSectionsToggleAriaLabel).toBe('Cuddio adrannau')
+        })
+
         it('should localise "Show section" based on data attribute', async () => {
           await goToComponent(page, 'accordion', {
             exampleName: 'with-translations'

src/govuk/components/accordion/accordion.yaml

@@ -19,6 +19,10 @@ params:
   type: string
   required: false
   description: The text content of the 'Hide all sections' button at the top of the accordion when all sections are expanded.
+- name: hideAllSectionsAriaLabelText
+  type: string
+  required: false
+  description: Text made available to assistive technologies, like screen-readers, as the all sections toggle's accessible name when all sections are collapsed. Defaults to the value for `hideAllSectionsText`.
 - name: hideSectionText
   type: string
   required: false
@@ -31,6 +35,10 @@ params:
   type: string
   required: false
   description: The text content of the 'Show all sections' button at the top of the accordion when at least one section is collapsed.
+- name: showAllSectionsAriaLabelText
+  type: string
+  required: false
+  description: Text made available to assistive technologies, like screen-readers, as the all sections toggle's accessible name when at least one section is collapsed. Defaults to the value for `showAllSectionsText`.
 - name: showSectionText
   type: string
   required: false
@@ -197,7 +205,9 @@ examples:
   data:
     id: with-translations
     hideAllSectionsText: Collapse all sections
+    hideAllSectionsAriaLabelText: Collapse all sections of this accordion
     showAllSectionsText: Expand all sections
+    showAllSectionsAriaLabelText: Expand all sections of this accordion
     hideSectionText: Collapse
     hideSectionAriaLabelText: Collapse this section
     showSectionText: Expand

src/govuk/components/accordion/template.njk

@@ -3,9 +3,11 @@
 
 <div class="govuk-accordion {%- if params.classes %} {{ params.classes }}{% endif -%}" data-module="govuk-accordion" id="{{ id }}"
   {%- if params.hideAllSectionsText %} data-i18n.hide-all-sections="{{ params.hideAllSectionsText | escape }}"{% endif %}
+  {%- if params.hideAllSectionsAriaLabelText %} data-i18n.hide-all-sections-aria-label="{{ params.hideAllSectionsAriaLabelText | escape }}"{% endif %}
   {%- if params.hideSectionText %} data-i18n.hide-section="{{ params.hideSectionText | escape }}"{% endif %}
   {%- if params.hideSectionAriaLabelText %} data-i18n.hide-section-aria-label="{{ params.hideSectionAriaLabelText | escape }}"{% endif %}
   {%- if params.showAllSectionsText %} data-i18n.show-all-sections="{{ params.showAllSectionsText | escape }}"{% endif %}
+  {%- if params.showAllSectionsAriaLabelText %} data-i18n.show-all-sections-aria-label="{{ params.showAllSectionsAriaLabelText | escape }}"{% endif %}
   {%- if params.showSectionText %} data-i18n.show-section="{{ params.showSectionText | escape }}"{% endif %}
   {%- if params.showSectionAriaLabelText %} data-i18n.show-section-aria-label="{{ params.showSectionAriaLabelText | escape }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>