Add data-nosnippet to accordion 'show' text

The data-nosnippet attribute stops the 'show' text from appearing in any Google Search text snippets.

We have successfully used a similar approach for the [cookie banner](#2192)
and on [GOV.UK Publishing components](alphagov/govuk_publishing_components#1185)

src/govuk/components/accordion/accordion.js

@@ -143,6 +143,10 @@ Accordion.prototype.constructHeaderMarkup = function ($headerWrapper, index) {
   // Create container for show / hide icons and text.
   var $showToggle = document.createElement('span')
   $showToggle.classList.add(this.sectionShowHideToggleClass)
+  // Tell Google not to index the 'show' text as part of the heading
+  // For the snippet to work with JavaScript, it must be added before adding the page element to the
+  // page's DOM. See https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#data-nosnippet-attr
+  $showToggle.setAttribute('data-nosnippet', '')
   // Create an inner container to limit the width of the focus state
   var $showToggleFocus = document.createElement('span')
   $showToggleFocus.classList.add(this.sectionShowHideToggleFocusClass)

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

@@ -231,6 +231,14 @@ describe('/components/accordion', () => {
         expect(ShowOrHideButtonText).toEqual('Hide this section')
       })
 
+      it('should have a data-nosnippet attribute on the "Show / hide this section" container to hide it from search result snippets', async () => {
+        await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+
+        const dataNoSnippetAttribute = await page.evaluate(() => document.body.querySelector('.govuk-accordion__section-toggle').getAttribute('data-nosnippet'))
+
+        expect(dataNoSnippetAttribute).toEqual('')
+      })
+
       describe('hidden text', () => {
         it('should contain hidden text " this section" for assistive technology', async () => {
           await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })