From 486258d64e766b5ada3e1cc04c584e68daf0d552 Mon Sep 17 00:00:00 2001 From: Douglas Greenshields Date: Mon, 5 Dec 2022 17:34:03 +0000 Subject: [PATCH] Add support for localisation of aria-label specific text for show all button in Accordion component --- app/views/examples/translated/index.njk | 1 + src/govuk/components/accordion/accordion.mjs | 18 +++++ .../components/accordion/accordion.test.js | 73 +++++++++++++++++++ src/govuk/components/accordion/accordion.yaml | 10 +++ src/govuk/components/accordion/template.njk | 2 + 5 files changed, 104 insertions(+) diff --git a/app/views/examples/translated/index.njk b/app/views/examples/translated/index.njk index 84bb7f13b7..ba22094768 100644 --- a/app/views/examples/translated/index.njk +++ b/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", diff --git a/src/govuk/components/accordion/accordion.mjs b/src/govuk/components/accordion/accordion.mjs index 3dd9257697..f053db4e4c 100644 --- a/src/govuk/components/accordion/accordion.mjs +++ b/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 diff --git a/src/govuk/components/accordion/accordion.test.js b/src/govuk/components/accordion/accordion.test.js index 0eccddfbc3..01c59a0a11 100644 --- a/src/govuk/components/accordion/accordion.test.js +++ b/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' diff --git a/src/govuk/components/accordion/accordion.yaml b/src/govuk/components/accordion/accordion.yaml index 78f775fc1a..d79245debb 100644 --- a/src/govuk/components/accordion/accordion.yaml +++ b/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 diff --git a/src/govuk/components/accordion/template.njk b/src/govuk/components/accordion/template.njk index f20ecf8e2c..e2da1b748c 100644 --- a/src/govuk/components/accordion/template.njk +++ b/src/govuk/components/accordion/template.njk @@ -3,9 +3,11 @@