govuk_publishing_components 24.10.2 → 24.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8e7fe72e738809175f7caa96a6003eb8191b09e0f26bbc72963088d6ef20eb7d
-  data.tar.gz: ca5784e8fc57b3314d60ea63733e03d636671329d5ef697d59ff82a595069200
+  metadata.gz: 1a7412745cae4dbe87f20efe5c2b982af372122cae8564c4f7279f17ea16f82a
+  data.tar.gz: 8f52c319afd75c6744c17b39719624bdda2888908d481291fc7fe34e51fb604d
 SHA512:
-  metadata.gz: f376231a1805b60263dd404cfe9f39fa5c552ae227a3c2059a9353da6afdfa14a6a3831b68e5c4346b3ca2624a861deb89695d5b738cdb7c59c66ee02b641c52
-  data.tar.gz: 26e0e71bad0c3b6d98e0d091b7925999fc8b0600e01c30900f1271ecb047619b0a4361ffa0f767f5f1f18539bf189f0fa3c8f7ad36f8107b0846808a8d3b9448
+  metadata.gz: ee916cc182125dc67fab048c61b9647434141a8a28832015d1d2f2159cf329506375fe136e8f46b8989a00f8c7f7ae7c7fabeec0e6195eae9b6eb0c9114ea644
+  data.tar.gz: a0bdb49b4a265e2054a05121d0d1f6c0cf0c79d5aaa3c0d0d390e90712b9935cd484cbe3cb0cc62ab2b5c2ac43ce9784b24ea4475791e32ed6b9aa2d322b6e34

data/app/assets/javascripts/govuk_publishing_components/components/accordion.js

@@ -47,7 +47,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.initSectionHeaders()
 
     // Feature flag for anchor tag navigation used on manuals
-    if (this.$module.getAttribute('data-anchor-navigation')) {
+    if (this.$module.getAttribute('data-anchor-navigation') === 'true') {
       this.openByAnchorOnLoad()
       this.addEventListenersForAnchors()
     }

data/app/assets/javascripts/govuk_publishing_components/components/feedback.js

@@ -1,5 +1,4 @@
-/* eslint-env jquery */
-
+/* global XMLHttpRequest, FormData */
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
@@ -11,53 +10,56 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.element = $element[0]
       this.somethingIsWrongForm = this.element.querySelector('#something-is-wrong')
       this.surveyForm = this.element.querySelector('#page-is-not-useful')
-      this.$prompt = $element.find('.js-prompt')
-      this.$fields = $element.find('.gem-c-feedback__form-field')
-      this.$forms = $element.find('.js-feedback-form')
-      this.$toggleForms = $element.find('.js-toggle-form')
-      this.$closeForms = $element.find('.js-close-form')
+      this.prompt = this.element.querySelector('.js-prompt')
+      this.forms = this.element.querySelectorAll('.js-feedback-form')
+      this.toggleForms = this.element.querySelectorAll('.js-toggle-form')
+      this.closeForms = this.element.querySelectorAll('.js-close-form')
       this.activeForm = false
-      this.$activeForm = false
-      this.$pageIsUsefulButton = $element.find('.js-page-is-useful')
-      this.$pageIsNotUsefulButton = $element.find('.js-page-is-not-useful')
-      this.$somethingIsWrongButton = $element.find('.js-something-is-wrong')
-      this.$promptQuestions = $element.find('.js-prompt-questions')
-      this.$promptSuccessMessage = $element.find('.js-prompt-success')
-      this.$somethingIsWrongForm = $(this.somethingIsWrongForm)
-      this.$surveyForm = $(this.surveyForm)
-      this.$surveyWrapper = $element.find('#survey-wrapper')
-
-      var that = this
+      this.pageIsUsefulButton = this.element.querySelector('.js-page-is-useful')
+      this.pageIsNotUsefulButton = this.element.querySelector('.js-page-is-not-useful')
+      this.somethingIsWrongButton = this.element.querySelector('.js-something-is-wrong')
+      this.promptQuestions = this.element.querySelectorAll('.js-prompt-questions')
+      this.promptSuccessMessage = this.element.querySelector('.js-prompt-success')
+      this.surveyWrapper = this.element.querySelector('#survey-wrapper')
+
+      var thisModule = this
       var jshiddenClass = 'js-hidden'
 
       setInitialAriaAttributes()
       setHiddenValues()
 
-      this.$toggleForms.on('click', function (e) {
-        e.preventDefault()
-        toggleForm($(e.target).attr('aria-controls'))
-        trackEvent(getTrackEventParams($(this)))
-        updateAriaAttributes($(this))
-      })
+      for (var j = 0; j < this.toggleForms.length; j++) {
+        this.toggleForms[j].addEventListener('click', function (e) {
+          e.preventDefault()
+          var el = e.target
+          toggleForm(el.getAttribute('aria-controls'))
+          trackEvent(getTrackEventParams(el))
+          updateAriaAttributes(el)
+        })
+      }
 
-      this.$closeForms.on('click', function (e) {
-        e.preventDefault()
-        toggleForm($(e.target).attr('aria-controls'))
-        trackEvent(getTrackEventParams($(this)))
-        setInitialAriaAttributes()
-        revealInitialPrompt()
-        var refocusClass = '.js-' + $(e.target).attr('aria-controls')
-        $element.find(refocusClass).focus()
-      })
+      for (var i = 0; i < this.closeForms.length; i++) {
+        this.closeForms[i].addEventListener('click', function (e) {
+          e.preventDefault()
+          var el = e.target
+          var formToToggle = el.getAttribute('aria-controls')
+          toggleForm(formToToggle)
+          trackEvent(getTrackEventParams(el))
+          setInitialAriaAttributes()
+          revealInitialPrompt()
+          var refocusClass = '.js-' + formToToggle
+          thisModule.element.querySelector(refocusClass).focus()
+        })
+      }
 
-      this.$pageIsUsefulButton.on('click', function (e) {
+      this.pageIsUsefulButton.addEventListener('click', function (e) {
         e.preventDefault()
-        trackEvent(getTrackEventParams(that.$pageIsUsefulButton))
+        trackEvent(getTrackEventParams(thisModule.pageIsUsefulButton))
         showFormSuccess()
         revealInitialPrompt()
       })
 
-      this.$pageIsNotUsefulButton.on('click', function (e) {
+      this.pageIsNotUsefulButton.addEventListener('click', function (e) {
         var gaClientId
         var dummyGaClientId = '111111111.1111111111'
         if (window.GOVUK.cookie('_ga') === null || window.GOVUK.cookie('_ga') === '') {
@@ -68,95 +70,129 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         setHiddenValuesNotUsefulForm(gaClientId)
       })
 
-      $element.find('form').on('submit', function (e) {
-        e.preventDefault()
-        var $form = $(this)
-        $.ajax({
-          type: 'POST',
-          url: $form.attr('action'),
-          dataType: 'json',
-          data: $form.serialize(),
-          beforeSend: disableSubmitFormButton($form),
-          timeout: 6000
-        }).done(function (xhr) {
-          trackEvent(getTrackEventParams($form))
-          showFormSuccess(xhr.message)
-          revealInitialPrompt()
-          setInitialAriaAttributes()
-          that.$activeForm.toggleClass(jshiddenClass)
-        }).fail(function (xhr) {
-          showError(xhr)
-          enableSubmitFormButton($form)
-        })
-      })
+      // much of the JS needed to support sending the form contents via this script is
+      // unsupported by IE, even IE11. This check causes IE to not intercept form submits
+      // and let them happen normally, which is handled already by the backend
+      if (typeof window.URLSearchParams === 'function') {
+        for (var f = 0; f < this.forms.length; f++) {
+          this.forms[f].addEventListener('submit', function (e) {
+            e.preventDefault()
+            var $form = e.target
+            var xhr = new XMLHttpRequest()
+            var url = $form.getAttribute('action')
+            var params = new FormData($form)
+            params = new URLSearchParams(params).toString()
+
+            xhr.open('POST', url, true)
+            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
+
+            xhr.onreadystatechange = function () {
+              if (xhr.readyState === 4 && xhr.status === 200) {
+                trackEvent(getTrackEventParams($form))
+                showFormSuccess(xhr.message)
+                revealInitialPrompt()
+                setInitialAriaAttributes()
+                thisModule.activeForm.classList.toggle(jshiddenClass)
+              } else {
+                showError(xhr)
+                enableSubmitFormButton($form)
+              }
+            }
+
+            disableSubmitFormButton($form)
+            xhr.send(params)
+          })
+        }
+      }
 
       function disableSubmitFormButton ($form) {
-        $form.find('input[type="submit"]').prop('disabled', true)
+        var formButton = $form.querySelector('[type="submit"]')
+        formButton.setAttribute('disabled', true)
       }
 
       function enableSubmitFormButton ($form) {
-        $form.find('input[type="submit"]').removeAttr('disabled')
+        var formButton = $form.querySelector('[type="submit"]')
+        formButton.removeAttribute('disabled')
       }
 
       function setInitialAriaAttributes () {
-        that.$forms.attr('aria-hidden', true)
-        that.$pageIsNotUsefulButton.attr('aria-expanded', false)
-        that.$somethingIsWrongButton.attr('aria-expanded', false)
+        for (var i = 0; i < thisModule.forms.length; i++) {
+          thisModule.forms[i].setAttribute('aria-hidden', true)
+        }
+        thisModule.pageIsNotUsefulButton.setAttribute('aria-expanded', false)
+        thisModule.somethingIsWrongButton.setAttribute('aria-expanded', false)
       }
 
       function setHiddenValues () {
-        that.$somethingIsWrongForm.append('<input type="hidden" name="javascript_enabled" value="true"/>')
-        that.$somethingIsWrongForm.append($('<input type="hidden" name="referrer">').val(document.referrer || 'unknown'))
-        that.somethingIsWrongForm.invalidInfoError = [
-          '<h2>',
-          '  Sorry, we’re unable to send your message as you haven’t given us any information.',
-          '</h2>',
-          '<p>Please tell us what you were doing or what went wrong</p>'
+        var javascriptEnabled = document.createElement('input')
+        javascriptEnabled.setAttribute('type', 'hidden')
+        javascriptEnabled.setAttribute('name', 'javascript_enabled')
+        javascriptEnabled.setAttribute('value', true)
+        thisModule.somethingIsWrongForm.appendChild(javascriptEnabled)
+
+        var referrer = document.createElement('input')
+        referrer.setAttribute('type', 'hidden')
+        referrer.setAttribute('name', 'referrer')
+        referrer.setAttribute('value', document.referrer || 'unknown')
+        thisModule.somethingIsWrongForm.appendChild(referrer)
+        thisModule.somethingIsWrongForm.invalidInfoError = [
+          '<h2>Sorry, we’re unable to send your message as you haven’t given us any information.</h2>',
+          ' <p>Please tell us what you were doing or what went wrong</p>'
         ].join('')
       }
 
       function setHiddenValuesNotUsefulForm (gaClientId) {
         var currentPathName = window.location.pathname.replace(/[^\s=?&]+(?:@|%40)[^\s=?&]+/, '[email]')
         var finalPathName = encodeURI(currentPathName)
-        that.surveyForm.invalidInfoError = [
-          '<h2>',
-          '  Sorry, we’re unable to send your message as you haven’t given us a valid email address. ',
-          '</h2>',
-          '<p>Enter an email address in the correct format, like name@example.com</p>'
+        thisModule.surveyForm.invalidInfoError = [
+          '<h2>Sorry, we’re unable to send your message as you haven’t given us a valid email address.</h2>',
+          ' <p>Enter an email address in the correct format, like name@example.com</p>'
         ].join('')
         if (document.querySelectorAll('[name="email_survey_signup[ga_client_id]"]').length === 0) {
-          that.$surveyForm.append($('<input name="email_survey_signup[ga_client_id]" type="hidden">').val(gaClientId || '0'))
+          var hiddenInput = document.createElement('input')
+          hiddenInput.setAttribute('type', 'hidden')
+          hiddenInput.setAttribute('name', 'email_survey_signup[ga_client_id]')
+          hiddenInput.setAttribute('value', gaClientId || '0')
+          thisModule.surveyForm.appendChild(hiddenInput)
         }
 
         if (document.querySelectorAll('.gem-c-feedback__email-link#take-survey').length === 0) {
-          that.$surveyWrapper.append('<a href="https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=' + finalPathName + '&amp;gcl=' + gaClientId + '" class="gem-c-feedback__email-link govuk-link" id="take-survey" target="_blank" rel="noopener noreferrer">Don’t have an email address?</a>')
+          var takeSurvey = document.createElement('a')
+          takeSurvey.setAttribute('href', 'https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=' + finalPathName + '&amp;gcl=' + gaClientId)
+          takeSurvey.setAttribute('class', 'gem-c-feedback__email-link govuk-link')
+          takeSurvey.setAttribute('id', 'take-survey')
+          takeSurvey.setAttribute('target', '_blank')
+          takeSurvey.setAttribute('rel', 'noopener noreferrer')
+          takeSurvey.innerHTML = 'Don’t have an email address?'
+          thisModule.surveyWrapper.appendChild(takeSurvey)
         }
       }
 
       function updateAriaAttributes (linkClicked) {
-        linkClicked.attr('aria-expanded', true)
-        $('#' + linkClicked.attr('aria-controls')).attr('aria-hidden', false)
+        linkClicked.setAttribute('aria-expanded', true)
+        var controls = linkClicked.getAttribute('aria-controls')
+        var ariaControls = document.querySelector('#' + controls)
+        ariaControls.setAttribute('aria-hidden', false)
       }
 
       function toggleForm (formId) {
-        that.activeForm = that.element.querySelector('#' + formId)
-        that.$activeForm = $(that.activeForm)
-        that.$activeForm.toggleClass(jshiddenClass)
-        that.$prompt.toggleClass(jshiddenClass)
+        thisModule.activeForm = thisModule.element.querySelector('#' + formId)
+        thisModule.activeForm.classList.toggle(jshiddenClass)
+        thisModule.prompt.classList.toggle(jshiddenClass)
 
-        var formIsVisible = !that.$activeForm.hasClass(jshiddenClass)
+        var formIsVisible = !thisModule.activeForm.classList.contains(jshiddenClass)
 
         if (formIsVisible) {
-          that.$activeForm.find('.gem-c-input').first().focus()
+          thisModule.activeForm.querySelector('.gem-c-input').focus()
         } else {
-          that.$activeForm = false
+          thisModule.activeForm = false
         }
       }
 
       function getTrackEventParams ($node) {
         return {
-          category: $node.data('track-category'),
-          action: $node.data('track-action')
+          category: $node.getAttribute('data-track-category'),
+          action: $node.getAttribute('data-track-action')
         }
       }
 
@@ -168,40 +204,42 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
       function showError (error) {
         var genericError = [
-          '<h2>',
-          '  Sorry, we’re unable to receive your message right now. ',
-          '</h2>',
-          '<p>If the problem persists, we have other ways for you to provide',
+          '<h2>Sorry, we’re unable to receive your message right now.</h2>',
+          ' <p>If the problem persists, we have other ways for you to provide',
           ' feedback on the <a href="/contact/govuk">contact page</a>.</p>'
         ].join('')
         // if the response is not a 404 or 500, show the error message if it exists
         // otherwise show the generic message
-        if (typeof (error.responseJSON) !== 'undefined') {
-          error = typeof (error.responseJSON.message) === 'undefined' ? genericError : error.responseJSON.message
-
-          if (error === 'email survey sign up failure') {
+        if ('response' in error) {
+          if (typeof error.response === 'object' && error.response !== null) {
+            error = error.response.message === 'email survey sign up failure' ? genericError : error.response.message
+          } else {
             error = genericError
           }
         } else if (error.status === 422) {
           // there's clobbering by nginx on all 422 requests, which is why the response returns a rendered html page instead of the expected JSON
-          // this is a temporary workaround to ensure that are are displaying relevant error messages to the users
-          error = that.activeForm.invalidInfoError || genericError
+          // this is a temporary workaround to ensure that we are displaying relevant error messages to the users
+          error = thisModule.activeForm.invalidInfoError || genericError
         } else {
-          // for all other, show generic error
           error = genericError
         }
-        var $errors = that.$activeForm.find('.js-errors')
-        $errors.html(error).removeClass(jshiddenClass).focus()
+        var $errors = thisModule.activeForm.querySelector('.js-errors')
+        $errors.innerHTML = error
+        $errors.classList.remove(jshiddenClass)
+        $errors.focus()
       }
 
       function showFormSuccess () {
-        that.$promptQuestions.addClass(jshiddenClass)
-        that.$promptSuccessMessage.removeClass(jshiddenClass).focus()
+        for (var i = 0; i < thisModule.promptQuestions.length; i++) {
+          thisModule.promptQuestions[i].classList.add(jshiddenClass)
+        }
+        thisModule.promptSuccessMessage.classList.remove(jshiddenClass)
+        thisModule.promptSuccessMessage.focus()
       }
 
       function revealInitialPrompt () {
-        that.$prompt.removeClass(jshiddenClass)
-        that.$prompt.focus()
+        thisModule.prompt.classList.remove(jshiddenClass)
+        thisModule.prompt.focus()
       }
     }
   }

data/app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js

@@ -98,7 +98,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       event = new window.CustomEvent(eventName, params)
     } else {
       event = document.createEvent('CustomEvent')
-      event.initCustomEvent(eventName, params.bubbles, params.cancelable)
+      event.initCustomEvent(eventName, params.bubbles, params.cancelable, null)
     }
 
     element.dispatchEvent(event)

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -74,7 +74,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Gemstepnav.prototype.addShowHideAllButton = function () {
     var showall = document.createElement('div')
-    showall.className = 'gem-c-step-nav__controls'
+    showall.className = 'gem-c-step-nav__controls govuk-!-display-none-print'
     showall.innerHTML = '<button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' +
       '<span class="gem-c-step-nav__button-text gem-c-step-nav__button-text--all js-step-controls-button-text">' + this.$module.actions.showAllText + '</span>' +
       '<span class="gem-c-step-nav__chevron js-step-controls-button-icon">' + this.$module.downChevronSvg + '</span>' +
@@ -98,7 +98,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         var commaSpan = document.createElement('span')
         var thisSectionSpan = document.createElement('span')
 
-        showHideSpan.className = 'gem-c-step-nav__toggle-link js-toggle-link'
+        showHideSpan.className = 'gem-c-step-nav__toggle-link js-toggle-link govuk-!-display-none-print'
         showHideSpanText.className = 'gem-c-step-nav__button-text js-toggle-link-text'
         showHideSpanIcon.className = 'gem-c-step-nav__chevron js-toggle-link-icon'
         commaSpan.className = 'govuk-visually-hidden'

data/app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js

@@ -10,7 +10,7 @@
       event = new window.CustomEvent(eventName, params)
     } else {
       event = document.createEvent('CustomEvent')
-      event.initCustomEvent(eventName, params.bubbles, params.cancelable)
+      event.initCustomEvent(eventName, params.bubbles, params.cancelable, null)
     }
 
     element.dispatchEvent(event)

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -1,6 +1,9 @@
 // This is the file that the application needs to include in order to use
 // the components.
 
+// feature flag for accessible link styles
+$govuk-new-link-styles: true;
+
 @import "govuk_publishing_components/govuk_frontend_support";
 @import "govuk_publishing_components/component_support";
 

data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss

@@ -4,22 +4,11 @@
 @import "govuk_frontend_support";
 
 @import "components/print/accordion";
-@import "components/print/attachment";
-@import "components/print/back-link";
 @import "components/print/button";
 @import "components/print/contents-list";
-@import "components/print/feedback";
 @import "components/print/govspeak-html-publication";
 @import "components/print/govspeak";
-@import "components/print/layout-header";
-@import "components/print/layout-footer";
-@import "components/print/metadata";
-@import "components/print/search";
-@import "components/print/share-links";
-@import "components/print/skip-link";
 @import "components/print/step-by-step-nav-header";
 @import "components/print/step-by-step-nav";
-@import "components/print/subscription-links";
 @import "components/print/textarea";
 @import "components/print/title";
-@import "components/print/translation-nav";

data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss

@@ -40,6 +40,7 @@ $gem-c-accordion-bottom-border-width: 1px;
     @include govuk-font($size: 16);
     @include govuk-link-common;
     @include govuk-link-style-default;
+
     // Remove default button focus outline in Firefox
     &::-moz-focus-inner {
       padding: 0;
@@ -47,21 +48,6 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
-  .gem-c-accordion__open-all:hover,
-  .gem-c-accordion__open-all-text:hover {
-    text-decoration: underline;
-    color: $govuk-link-colour;
-  }
-
-  // Focus state, also to change chervon icon to black
-  .gem-c-accordion__open-all:focus {
-    .gem-c-accordion__open-all-text,
-    .gem-c-accordion-nav__chevron {
-      color: $govuk-focus-text-colour;
-      text-decoration: none;
-    }
-  }
-
   // Create Chervon icon align with text
   .gem-c-accordion-nav__chevron {
     vertical-align: text-top;
@@ -73,6 +59,7 @@ $gem-c-accordion-bottom-border-width: 1px;
     margin-left: govuk-em(5, 14);
     border: govuk-em(1, 14) solid;
     border-radius: govuk-em(100, 14);
+
     // Main icon size across views, yet keep responsive for zoom
     @include govuk-media-query($from: tablet) {
       width: govuk-em(20, 16);
@@ -94,6 +81,7 @@ $gem-c-accordion-bottom-border-width: 1px;
       transform: rotate(-45deg);
       left: govuk-em(6, 14);
       bottom: govuk-em(5, 14);
+
       @include govuk-media-query($from: tablet) {
         width: govuk-em(6, 16);
         height: govuk-em(6, 16);
@@ -105,6 +93,22 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
+  .gem-c-accordion__open-all:hover,
+  .gem-c-accordion__section-button:hover {
+    .gem-c-accordion-nav__chevron {
+      color: $govuk-link-hover-colour;
+      text-decoration: none;
+    }
+  }
+
+  // Focus state, also to change chervon icon to black
+  .gem-c-accordion__open-all:focus {
+    .gem-c-accordion-nav__chevron {
+      color: $govuk-focus-text-colour;
+      text-decoration: none;
+    }
+  }
+
   // Rotate icon to create "Down" version
   .gem-c-accordion-nav__chevron--down {
     transform: rotate(180deg);
@@ -150,6 +154,10 @@ $gem-c-accordion-bottom-border-width: 1px;
     @include govuk-typography-common;
     width: 100%;
 
+    &:hover {
+      color: $govuk-link-hover-colour;
+    }
+
     &:active {
       z-index: 1;
       color: $govuk-link-active-colour;
@@ -163,26 +171,12 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
-  .gem-c-accordion__section-button:hover {
-    color: $govuk-link-colour;
-    // On hover, add underline to toggle link
-    .gem-c-accordion__toggle-text {
-      text-decoration: underline;
-      color: $govuk-link-colour;
-    }
-  }
-
   .gem-c-accordion__section-button:focus {
     @include govuk-focused-text;
     // Overwrite focus border to top
     box-shadow: 0 0, 0 -4px;
     border-top: 1px solid transparent;
 
-    // Focus state to change the toggle link within individual sections
-    .gem-c-accordion__toggle-text {
-      color: $govuk-focus-text-colour;
-      text-decoration: none;
-    }
     // Focus state to change chervon icon colour within individual sections
     .gem-c-accordion-nav__chevron {
       color: $govuk-text-colour;
@@ -225,10 +219,24 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
-  // Setting width of the text, so the icon doesn't shift (left / right) when toggled
   .gem-c-accordion__toggle-text {
-    min-width: govuk-em(40, 16);
     display: inline-block;
+    // Setting width of the text so the icon doesn't shift left or right when
+    // toggled:
+    min-width: govuk-em(40, 16);
+  }
+
+  // On hover add underline to toggle link only:
+  .gem-c-accordion__section-button:hover .gem-c-accordion__toggle-text {
+    color: $govuk-link-hover-colour;
+    @include govuk-link-decoration;
+    @include govuk-link-hover-decoration;
+  }
+
+  // Ensure the correct focus sstate text colour and no underline:
+  .gem-c-accordion__section-button:focus .gem-c-accordion__toggle-text {
+    color: $govuk-focus-text-colour;
+    text-decoration: none;
   }
 
   .gem-c-accordion__open-all-text {
@@ -237,6 +245,17 @@ $gem-c-accordion-bottom-border-width: 1px;
     text-align: left;
   }
 
+  .gem-c-accordion__open-all:hover {
+    .gem-c-accordion__open-all-text {
+      @include govuk-link-decoration;
+      @include govuk-link-hover-decoration;
+    }
+  }
+
+  .gem-c-accordion__open-all:focus .gem-c-accordion__open-all-text {
+    text-decoration: none;
+  }
+
   // Change the summary subheading size.
   .gem-c-accordion__section-summary {
     @include govuk-responsive-margin(1, "top");