Merge pull request #1148 from alphagov/fix-hover-states-accordion

Remove hover state for accordion sections on mobile
alphagov · Jan 17, 2019 · 9a11120 · 9a11120
2 parents c64847e + 037e1b6
commit 9a11120
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,10 @@
 
   ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
 
+- Remove hover state for accordion sections on mobile
+
+  ([PR #1148](https://github.com/alphagov/govuk-frontend/pull/1148))
+
 ## 2.5.1 (Fix release)
 
 🔧 Fixes:

diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
@@ -83,6 +83,11 @@
     // 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;
+      }
     }
 
     // Setting focus styles on header so that summary that is not part of the button is included in focus