dxw_govuk_frontend_rails 2.13.0 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7544ab1d9351e78171f987e7e1965fee46e117ed1b3aabdd80d2d75afa5f9979
-  data.tar.gz: 8f5f1fa82a10dec722b2ff803971319c3f1a8f2629d3753055a2461da14ca7fe
+  metadata.gz: e8b0ce31fa95a92870c71c1bad7cc7946fc4d7df301c729032a20ff6eb5088e5
+  data.tar.gz: 8a8b382053a24f041f7716e114821a2775c57c15451530780f2cec1092f634ae
 SHA512:
-  metadata.gz: f4fd3e6c7da6b30f9e0a52bf0cd2f288cf3cea3fb27ef0b63b2ce12a8dd4c9fe94523b5a3fa3ad754260895a626cd3fb63d46e2767b5724a1d87968b454f72e0
-  data.tar.gz: 73cb2d307f04cc5763410be064e049edc8270f01c8caa001f39be5be24c08ca5e06d2c5e172b82765a82d255023168168335aa9af1c0baae388ab4ba8a900466
+  metadata.gz: d50b314466a962dc265ce444796b56967f51e6535cf409b18f0e4470396cb81222a37e9045cd21dafd16f2dcfaf6eacd68f042aa1c03e24f9ffbb42fb8568cd5
+  data.tar.gz: 619f339b61e8d545969408f465ad269924555d74a3d6bfe74f55928a142482619cba8cc8f70715d1d15c04679cca6c4cd84e43581bf0d34aa0ab45dcdbf40dcc

data/README.md

@@ -65,14 +65,14 @@ https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-
 ## Tracking version
 We aim to tracking the version of GOVUK Frontend.
 
-## Contributing
+## Updating to a new Version of GOVUK Frontend
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/dxw_govuk_frontend_rails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+When a new version of the GOVUK Frontend is released:
 
-## License
-
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
-
-## Code of Conduct
-
-Everyone interacting in the DxwGovukFrontendRails project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/dxw_govuk_frontend_rails/blob/master/CODE_OF_CONDUCT.md).
+- set the new version number in `package.json` and `lib/dxw_govuk_frontend_rails/version.rb`
+- run  `npm update` to get the new release
+- run `bundle rake` to compile the new assets
+- commit the changes
+- tag with the same release number as GOVUK Frontend
+- push the changes
+- CircleCI will build the gem and push to Rubygems

data/Rakefile

@@ -13,8 +13,8 @@ task 'assets' do
 end
 
 task 'stylesheets' do
-  Rake::FileList['node_modules/govuk-frontend/**/*.scss'].each do |source|
-    target = source.sub('node_modules/govuk-frontend', 'vendor/assets/stylesheets')
+  Rake::FileList['node_modules/govuk-frontend/govuk/**/*.scss'].each do |source|
+    target = source.sub('node_modules/govuk-frontend/govuk', 'vendor/assets/stylesheets')
     mkdir_p(File.dirname(target))
     copy_file source, target
   end
@@ -22,9 +22,9 @@ end
 
 task 'fonts' do
   Rake::FileList[
-     'node_modules/govuk-frontend/assets/fonts/*.{eot,woff,woff2,ico,svg}'
+     'node_modules/govuk-frontend/govuk/assets/fonts/*.{eot,woff,woff2,ico,svg}'
    ].each do |source|
-     target = source.sub('node_modules/govuk-frontend', 'vendor')
+     target = source.sub('node_modules/govuk-frontend/govuk', 'vendor')
      mkdir_p(File.dirname(target))
      copy_file source, target
    end
@@ -32,17 +32,17 @@ task 'fonts' do
 
 task 'images' do
  Rake::FileList[
-    'node_modules/govuk-frontend/assets/images/*.{png,gif,jpg,ico,svg}'
+    'node_modules/govuk-frontend/govuk/assets/images/*.{png,gif,jpg,ico,svg}'
   ].each do |source|
-    target = source.sub('node_modules/govuk-frontend', 'vendor')
+    target = source.sub('node_modules/govuk-frontend/govuk', 'vendor')
     mkdir_p(File.dirname(target))
     copy_file source, target
   end
 end
 
 task 'javascripts' do
-  files = Rake::FileList['node_modules/govuk-frontend/all.js'].each do |source|
-    target = source.sub('node_modules/govuk-frontend', 'vendor/assets/javascripts')
+  files = Rake::FileList['node_modules/govuk-frontend/govuk/all.js'].each do |source|
+    target = source.sub('node_modules/govuk-frontend/govuk', 'vendor/assets/javascripts')
     target = target.sub('all.js', 'govuk_frontend_rails.js')
     mkdir_p(File.dirname(target))
     copy_file source, target

data/dxw_govuk_frontend_rails.gemspec

@@ -8,9 +8,9 @@ Gem::Specification.new do |spec|
   spec.version       = DxwGovukFrontendRails::VERSION
   spec.authors       = ["mec", "pezholio"]
 
-  spec.summary       = %q{Adds the GOVUK frontend to a Rails application.}
-  spec.description   = %q{Adds the GOVUK frontend to a Rails application.}
-  spec.homepage      = "https://github.com/mec/dxw_govuk_frontend_rails"
+  spec.summary       = %q{Adds the GOVUK frontend to a Rails application that uses the Asset Pipeline.}
+  spec.description   = %q{Adds the GOVUK frontend to a Rails application that uses the Asset Pipeline.}
+  spec.homepage      = "https://github.com/dxw/dxw_govuk_frontend_rails"
   spec.license       = "MIT"
 
   # Specify which files should be added to the gem when it is released.

data/lib/dxw_govuk_frontend_rails/version.rb

@@ -1,3 +1,3 @@
 module DxwGovukFrontendRails
-  VERSION = "2.13.0"
+  VERSION = "3.0.0"
 end

data/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "govuk-frontend": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-2.13.0.tgz",
-      "integrity": "sha512-6XDtTt5plSrPQvPgLFN4LCtb9ULuqoXCgkHy5c7XE/70/sVm47RPbLR11tYGPcmV8cOApBhW0wL8y8ryspHfpw=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.0.0.tgz",
+      "integrity": "sha512-GCrEeaQZEnsthNtfmOUFlgsieNjHOeoamSWMdD4Gdq0RPxCA9uzfrT2i3jVnlBORekKjOL0C8eFZQBSNnjtz2A=="
     }
   }
 }

data/package.json

@@ -21,6 +21,6 @@
   },
   "homepage": "https://github.com/mec/dxw_govuk_frontend_rails#readme",
   "dependencies": {
-    "govuk-frontend": "2.13.0"
+    "govuk-frontend": "3.0.0"
   }
 }

data/vendor/assets/javascripts/govuk_frontend_rails.js

@@ -1291,28 +1291,21 @@ if (detect) return
 })
 .call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
-/**
- * JavaScript 'shim' to trigger the click event of element(s) when the space key is pressed.
- *
- * Created since some Assistive Technologies (for example some Screenreaders)
- * will tell a user to press space on a 'button', so this functionality needs to be shimmed
- * See https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270
- *
- * Usage instructions:
- * the 'shim' will be automatically initialised
- */
-
 var KEY_SPACE = 32;
 var DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
-var debounceFormSubmitTimer = null;
 
 function Button ($module) {
   this.$module = $module;
+  this.debounceFormSubmitTimer = null;
 }
 
 /**
-* if the event target element has a role='button' and the event is key space pressed
-* then it prevents the default event and triggers a click event
+* JavaScript 'shim' to trigger the click event of element(s) when the space key is pressed.
+*
+* Created since some Assistive Technologies (for example some Screenreaders)
+* will tell a user to press space on a 'button', so this functionality needs to be shimmed
+* See https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270
+*
 * @param {object} event event
 */
 Button.prototype.handleKeyDown = function (event) {
@@ -1339,14 +1332,14 @@ Button.prototype.debounce = function (event) {
   }
 
   // If the timer is still running then we want to prevent the click from submitting the form
-  if (debounceFormSubmitTimer) {
+  if (this.debounceFormSubmitTimer) {
     event.preventDefault();
     return false
   }
 
-  debounceFormSubmitTimer = setTimeout(function () {
-    debounceFormSubmitTimer = null;
-  }, DEBOUNCE_TIMEOUT_IN_SECONDS * 1000);
+  this.debounceFormSubmitTimer = setTimeout(function () {
+    this.debounceFormSubmitTimer = null;
+  }.bind(this), DEBOUNCE_TIMEOUT_IN_SECONDS * 1000);
 };
 
 /**
@@ -1363,9 +1356,6 @@ Button.prototype.init = function () {
  * and 'shim' to add accessiblity enhancements for all browsers
  *
  * http://caniuse.com/#feat=details
- *
- * Usage instructions:
- * the 'polyfill' will be automatically initialised
  */
 
 var KEY_ENTER = 13;
@@ -1449,7 +1439,9 @@ Details.prototype.init = function () {
   $summary.setAttribute('aria-controls', $content.id);
 
   // Set tabIndex so the summary is keyboard accessible for non-native elements
-  // http://www.saliences.com/browserBugs/tabIndex.html
+  //
+  // We have to use the camelcase `tabIndex` property as there is a bug in IE6/IE7 when we set the correct attribute lowercase:
+  // See http://web.archive.org/web/20170120194036/http://www.saliences.com/browserBugs/tabIndex.html for more information.
   if (!NATIVE_DETAILS) {
     $summary.tabIndex = 0;
   }
@@ -1511,7 +1503,7 @@ Details.prototype.destroy = function (node) {
 
 function CharacterCount ($module) {
   this.$module = $module;
-  this.$textarea = $module.querySelector('.js-character-count');
+  this.$textarea = $module.querySelector('.govuk-js-character-count');
 }
 
 CharacterCount.prototype.defaults = {
@@ -1651,8 +1643,12 @@ CharacterCount.prototype.updateCountMessage = function () {
   var thresholdValue = maxLength * thresholdPercent / 100;
   if (thresholdValue > currentLength) {
     countMessage.classList.add('govuk-character-count__message--disabled');
+    // Ensure threshold is hidden for users of assistive technologies
+    countMessage.setAttribute('aria-hidden', true);
   } else {
     countMessage.classList.remove('govuk-character-count__message--disabled');
+    // Ensure threshold is visible for users of assistive technologies
+    countMessage.removeAttribute('aria-hidden');
   }
 
   // Update styles
@@ -1853,16 +1849,6 @@ ErrorSummary.prototype.focusTarget = function ($target) {
     return false
   }
 
-  // Prefer using the history API where possible, as updating
-  // window.location.hash causes the viewport to jump to the input briefly
-  // before then scrolling to the label/legend in IE10, IE11 and Edge (as tested
-  // in Edge 17).
-  if (window.history.pushState) {
-    window.history.pushState(null, null, '#' + inputId);
-  } else {
-    window.location.hash = inputId;
-  }
-
   // Scroll the legend or label into view *before* calling focus on the input to
   // avoid extra scrolling in browsers that don't support `preventScroll` (which
   // at time of writing is most of them...)
@@ -1929,7 +1915,7 @@ Header.prototype.init = function () {
   }
 
   // Check for button
-  var $toggleButton = $module.querySelector('.js-header-toggle');
+  var $toggleButton = $module.querySelector('.govuk-js-header-toggle');
   if (!$toggleButton) {
     return
   }
@@ -1972,12 +1958,11 @@ Header.prototype.handleClick = function (event) {
 
 function Radios ($module) {
   this.$module = $module;
-  this.$inputs = $module.querySelectorAll('input[type="radio"]');
 }
 
 Radios.prototype.init = function () {
   var $module = this.$module;
-  var $inputs = this.$inputs;
+  var $inputs = $module.querySelectorAll('input[type="radio"]');
 
   /**
   * Loop over all items with [data-controls]
@@ -2004,26 +1989,88 @@ Radios.prototype.init = function () {
 };
 
 Radios.prototype.setAttributes = function ($input) {
-  var inputIsChecked = $input.checked;
-  $input.setAttribute('aria-expanded', inputIsChecked);
+  var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
+
+  if ($content && $content.classList.contains('govuk-radios__conditional')) {
+    var inputIsChecked = $input.checked;
+
+    $input.setAttribute('aria-expanded', inputIsChecked);
 
-  var $content = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
-  if ($content) {
     $content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
   }
 };
 
 Radios.prototype.handleClick = function (event) {
-  nodeListForEach(this.$inputs, function ($input) {
-    // If a radio with aria-controls, handle click
-    var isRadio = $input.getAttribute('type') === 'radio';
-    var hasAriaControls = $input.getAttribute('aria-controls');
-    if (isRadio && hasAriaControls) {
+  var $clickedInput = event.target;
+  // We only want to handle clicks for radio inputs
+  if ($clickedInput.type !== 'radio') {
+    return
+  }
+  // Because checking one radio can uncheck a radio in another $module,
+  // we need to call set attributes on all radios in the same form, or document if they're not in a form.
+  //
+  // We also only want radios which have aria-controls, as they support conditional reveals.
+  var $allInputs = document.querySelectorAll('input[type="radio"][aria-controls]');
+  nodeListForEach($allInputs, function ($input) {
+    // Only inputs with the same form owner should change.
+    var hasSameFormOwner = ($input.form === $clickedInput.form);
+
+    // In radios, only radios with the same name will affect each other.
+    var hasSameName = ($input.name === $clickedInput.name);
+    if (hasSameName && hasSameFormOwner) {
       this.setAttributes($input);
     }
   }.bind(this));
 };
 
+(function(undefined) {
+
+    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b09a5d2acf3314b46a6c8f8d0c31b85c
+    var detect = (
+      'Element' in this && "nextElementSibling" in document.documentElement
+    );
+
+    if (detect) return
+
+
+    (function (global) {
+
+      // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-404b69b4750d18dea4174930a49170fd
+      Object.defineProperty(Element.prototype, "nextElementSibling", {
+        get: function(){
+          var el = this.nextSibling;
+          while (el && el.nodeType !== 1) { el = el.nextSibling; }
+          return (el.nodeType === 1) ? el : null;
+        }
+      });
+
+    }(this));
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+(function(undefined) {
+
+    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-a162235fbc9c0dd40d4032265f44942e
+    var detect = (
+      'Element' in this && 'previousElementSibling' in document.documentElement
+    );
+
+    if (detect) return
+
+    (function (global) {
+      // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b45a1197b842728cb76b624b6ba7d739
+      Object.defineProperty(Element.prototype, 'previousElementSibling', {
+        get: function(){
+          var el = this.previousSibling;
+          while (el && el.nodeType !== 1) { el = el.previousSibling; }
+          return (el.nodeType === 1) ? el : null;
+        }
+      });
+
+    }(this));
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
 function Tabs ($module) {
   this.$module = $module;
   this.$tabs = $module.querySelectorAll('.govuk-tabs__tab');
@@ -2165,6 +2212,7 @@ Tabs.prototype.setAttributes = function ($tab) {
   $tab.setAttribute('id', 'tab_' + panelId);
   $tab.setAttribute('role', 'tab');
   $tab.setAttribute('aria-controls', panelId);
+  $tab.setAttribute('aria-selected', 'false');
   $tab.setAttribute('tabindex', '-1');
 
   // set panel attributes
@@ -2179,6 +2227,7 @@ Tabs.prototype.unsetAttributes = function ($tab) {
   $tab.removeAttribute('id');
   $tab.removeAttribute('role');
   $tab.removeAttribute('aria-controls');
+  $tab.removeAttribute('aria-selected');
   $tab.removeAttribute('tabindex');
 
   // unset panel attributes
@@ -2189,6 +2238,10 @@ Tabs.prototype.unsetAttributes = function ($tab) {
 };
 
 Tabs.prototype.onTabClick = function (e) {
+  if (!e.target.classList.contains('govuk-tabs__tab')) {
+  // Allow events on child DOM elements to bubble up to tab parent
+    return false
+  }
   e.preventDefault();
   var $newTab = e.target;
   var $currentTab = this.getCurrentTab();
@@ -2228,7 +2281,7 @@ Tabs.prototype.activateNextTab = function () {
   var currentTab = this.getCurrentTab();
   var nextTabListItem = currentTab.parentNode.nextElementSibling;
   if (nextTabListItem) {
-    var nextTab = nextTabListItem.firstElementChild;
+    var nextTab = nextTabListItem.querySelector('.govuk-tabs__tab');
   }
   if (nextTab) {
     this.hideTab(currentTab);
@@ -2242,7 +2295,7 @@ Tabs.prototype.activatePreviousTab = function () {
   var currentTab = this.getCurrentTab();
   var previousTabListItem = currentTab.parentNode.previousElementSibling;
   if (previousTabListItem) {
-    var previousTab = previousTabListItem.firstElementChild;
+    var previousTab = previousTabListItem.querySelector('.govuk-tabs__tab');
   }
   if (previousTab) {
     this.hideTab(currentTab);
@@ -2269,18 +2322,18 @@ Tabs.prototype.hidePanel = function (tab) {
 
 Tabs.prototype.unhighlightTab = function ($tab) {
   $tab.setAttribute('aria-selected', 'false');
-  $tab.classList.remove('govuk-tabs__tab--selected');
+  $tab.parentNode.classList.remove('govuk-tabs__list-item--selected');
   $tab.setAttribute('tabindex', '-1');
 };
 
 Tabs.prototype.highlightTab = function ($tab) {
   $tab.setAttribute('aria-selected', 'true');
-  $tab.classList.add('govuk-tabs__tab--selected');
+  $tab.parentNode.classList.add('govuk-tabs__list-item--selected');
   $tab.setAttribute('tabindex', '0');
 };
 
 Tabs.prototype.getCurrentTab = function () {
-  return this.$module.querySelector('.govuk-tabs__tab--selected')
+  return this.$module.querySelector('.govuk-tabs__list-item--selected .govuk-tabs__tab')
 };
 
 // this is because IE doesn't always return the actual value but a relative full path
@@ -2300,45 +2353,45 @@ function initAll (options) {
   // Defaults to the entire document if nothing is set.
   var scope = typeof options.scope !== 'undefined' ? options.scope : document;
 
-  // Find all buttons with [role=button] on the scope to enhance.
-  new Button(scope).init();
+  var $buttons = scope.querySelectorAll('[data-module="govuk-button"]');
+  nodeListForEach($buttons, function ($button) {
+    new Button($button).init();
+  });
 
-  // Find all global accordion components to enhance.
-  var $accordions = scope.querySelectorAll('[data-module="accordion"]');
+  var $accordions = scope.querySelectorAll('[data-module="govuk-accordion"]');
   nodeListForEach($accordions, function ($accordion) {
     new Accordion($accordion).init();
   });
 
-  // Find all global details elements to enhance.
-  var $details = scope.querySelectorAll('details');
+  var $details = scope.querySelectorAll('[data-module="govuk-details"]');
   nodeListForEach($details, function ($detail) {
     new Details($detail).init();
   });
 
-  var $characterCount = scope.querySelectorAll('[data-module="character-count"]');
-  nodeListForEach($characterCount, function ($characterCount) {
+  var $characterCounts = scope.querySelectorAll('[data-module="govuk-character-count"]');
+  nodeListForEach($characterCounts, function ($characterCount) {
     new CharacterCount($characterCount).init();
   });
 
-  var $checkboxes = scope.querySelectorAll('[data-module="checkboxes"]');
+  var $checkboxes = scope.querySelectorAll('[data-module="govuk-checkboxes"]');
   nodeListForEach($checkboxes, function ($checkbox) {
     new Checkboxes($checkbox).init();
   });
 
   // Find first error summary module to enhance.
-  var $errorSummary = scope.querySelector('[data-module="error-summary"]');
+  var $errorSummary = scope.querySelector('[data-module="govuk-error-summary"]');
   new ErrorSummary($errorSummary).init();
 
   // Find first header module to enhance.
-  var $toggleButton = scope.querySelector('[data-module="header"]');
+  var $toggleButton = scope.querySelector('[data-module="govuk-header"]');
   new Header($toggleButton).init();
 
-  var $radios = scope.querySelectorAll('[data-module="radios"]');
+  var $radios = scope.querySelectorAll('[data-module="govuk-radios"]');
   nodeListForEach($radios, function ($radio) {
     new Radios($radio).init();
   });
 
-  var $tabs = scope.querySelectorAll('[data-module="tabs"]');
+  var $tabs = scope.querySelectorAll('[data-module="govuk-tabs"]');
   nodeListForEach($tabs, function ($tabs) {
     new Tabs($tabs).init();
   });

data/vendor/assets/stylesheets/components/accordion/_accordion.scss

@@ -5,6 +5,10 @@
 
 @include govuk-exports("govuk/component/accordion") {
 
+  $govuk-accordion-link-colour: $govuk-link-colour;
+  $govuk-accordion-link-hover-colour: govuk-colour("light-blue");
+  $govuk-accordion-border-width: 3px;
+
   .govuk-accordion {
     @include govuk-responsive-margin(6, "bottom");
   }
@@ -15,6 +19,7 @@
   }
 
   .govuk-accordion__section-header {
+    padding-top: govuk-spacing(3);
     padding-bottom: govuk-spacing(3);
   }
 
@@ -52,7 +57,6 @@
     // Borders between accordion sections
     .govuk-accordion__section {
       padding-top: 0;
-      border-top: 1px solid $govuk-border-colour;
     }
 
     // Hide the body of collapsed sections
@@ -70,15 +74,23 @@
     // This is styled to look like a link not a button
     .govuk-accordion__open-all {
       @include govuk-font($size: 16);
-      @include govuk-link-common;
-      display: inline;
+      position: relative;
+      z-index: 1;
+      margin: 0;
+      padding: 0;
       border-width: 0;
       color: $govuk-link-colour;
       background: none;
       cursor: pointer;
+      -webkit-appearance: none;
 
-      &:focus {
-        background: none;
+      @include govuk-link-common;
+      @include govuk-link-style-default;
+
+      // Remove default button focus outline in Firefox
+      &::-moz-focus-inner {
+        padding: 0;
+        border: 0;
       }
     }
 
@@ -87,46 +99,42 @@
       position: relative;
       // Safe area on the right to avoid clashing with icon
       padding-right: 40px;
+      border-top: 1px solid $govuk-border-colour;
+      color: $govuk-accordion-link-colour;
       cursor: pointer;
     }
 
-    // Section headers have a grey background on hover as an additional affodance
-    .govuk-accordion__section-header:hover {
-      background-color: govuk-colour("grey-4");
-      // For devices that can't hover such as touch devices,
-      // remove hover state as it can be stuck in that state (iOS).
-      @media (hover: none) {
-        background-color: initial;
+    // For devices that can't hover such as touch devices,
+    // remove hover state as it can be stuck in that state (iOS).
+    @media (hover: none) {
+      .govuk-accordion__section-header:hover {
+        border-top-color: $govuk-accordion-link-colour;
+        box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour;
       }
     }
 
-    // Setting focus styles on header so that summary that is not part of the button is included in focus
-    .govuk-accordion__section-header--focused {
-      // These replicate @mixin govuk-focusable (the mixin can't be used as the header doesn't get the focus)
-      outline: $govuk-focus-width solid $govuk-focus-colour;
-      outline-offset: 0;
-    }
-
     // Buttons within the headers don’t need default styling
     .govuk-accordion__section-button {
-      @include govuk-link-common;
-      width: 100%;
+      @include govuk-typography-common;
       margin-top: 0;
       margin-bottom: 0;
       margin-left: 0;
-      padding-top: govuk-spacing(3);
-      padding-bottom: 0;
-      padding-left: 0;
+      padding: 0;
       border-width: 0;
-      // Headings in section headers have link colours as an additional affodance
-      color: $govuk-link-colour;
+      color: inherit;
       background: none;
       text-align: left;
       cursor: pointer;
+      -webkit-appearance: none;
 
       &:focus {
-        outline: none;
-        background: none;
+        @include govuk-focused-text;
+      }
+
+      // Remove default button focus outline in Firefox
+      &::-moz-focus-inner {
+        padding: 0;
+        border: 0;
       }
     }
 
@@ -140,6 +148,18 @@
       left: 0;
     }
 
+    .govuk-accordion__section-button:hover:not(:focus) {
+      text-decoration: underline;
+    }
+
+    // For devices that can't hover such as touch devices,
+    // remove hover state as it can be stuck in that state (iOS).
+    @media (hover: none) {
+      .govuk-accordion__section-button:hover {
+        text-decoration: none;
+      }
+    }
+
     .govuk-accordion__controls {
       text-align: right;
     }