Merge pull request #1324 from alphagov/new-focus-accordion

Update accordion to use new WCAG 2.1 compliant focus style
alphagov · May 13, 2019 · 8bc4d9c · 8bc4d9c
2 parents 027902e + d439c62
commit 8bc4d9c
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,12 @@
 
   ([PR #1326](https://github.com/alphagov/govuk-frontend/pull/1326))
 
+- Update accordion to use new WCAG 2.1 compliant focus style
+
+  To migrate: [TODO add migration instructions before we ship v3.0.0]
+
+  ([PR #1324](https://github.com/alphagov/govuk-frontend/pull/1324))
+
 - Update form inputs to use new WCAG 2.1 compliant focus style
 
   To migrate: [TODO add migration instructions before we ship v3.0.0]
@@ -150,6 +156,10 @@
 
 🔧 Fixes:
 
+- Update accordion focus styles to remove firefox outlines
+
+  ([PR #1324](https://github.com/alphagov/govuk-frontend/pull/1324))
+
 - Rename `$govuk-border-width-mobile` to `$govuk-border-width-narrow`
 
   This better reflects how the variable is used.

diff --git a/src/components/accordion/_accordion.scss b/src/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,24 @@
     // 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;
+      margin-right: 5px;
+      padding: 0;
       border-width: 0;
       color: $govuk-link-colour;
       background: none;
       cursor: pointer;
+      -webkit-appearance: none;
+
+      @include govuk-link-common;
+      @include govuk-link-style-default;
 
-      &:focus {
-        background: none;
+      // Remove default button focus outline in Firefox
+      &::-moz-focus-inner {
+        padding: 0;
+        border: 0;
       }
     }
 
@@ -87,47 +100,79 @@
       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--expanded .govuk-accordion__section-header {
+      border-top-color: $govuk-accordion-link-colour;
+      box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour;
+    }
+
     .govuk-accordion__section-header:hover {
-      background-color: govuk-colour("light-grey", $legacy: "grey-4");
+      border-top-color: $govuk-accordion-link-hover-colour;
+      box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-hover-colour;
+    }
 
-      // 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;
+    .govuk-accordion__section--expanded .govuk-accordion__section-header--focused {
+      @include govuk-not-ie8 {
+        border-top-color: $govuk-focus-colour;
+      }
+      // When colours are overridden, for example when users have a dark mode,
+      // backgrounds and box-shadows disappear, so we need to ensure there's a
+      // transparent outline which will be set to a visible colour.
+      outline: $govuk-focus-width solid transparent;
       outline-offset: 0;
+      color: $govuk-text-colour;
+      // sass-lint:disable indentation
+      box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-focus-colour,
+                  inset 0 ($govuk-accordion-border-width + $govuk-focus-width) 0 0 $govuk-text-colour;
+      // sass-lint:enable indentation
     }
 
     // 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;
+
+      @include govuk-not-ie8 {
+        // Ensure the default focus styles are not shown for buttons
+        &:focus {
+          outline: none;
+          background: none;
+        }
+      }
 
-      &:focus {
-        outline: none;
-        background: none;
+      @include govuk-if-ie8 {
+        &:focus {
+          color: $govuk-text-colour;
+          background: $govuk-focus-colour;
+        }
+      }
+
+      // Remove default button focus outline in Firefox
+      &::-moz-focus-inner {
+        padding: 0;
+        border: 0;
       }
     }
 
@@ -141,6 +186,25 @@
       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;
+      }
+    }
+
+    // The accordion component has two focus state depending on if a section is expanded or closed.
+    // We also want to avoid styling when the secttion is pressed or `:active`
+    // to avoid the different focus styles from flashing quickly while the user interacts with the section.
+    .govuk-accordion__section:not(.govuk-accordion__section--expanded) .govuk-accordion__section-button:focus:not(:active) {
+      @include govuk-focusable-text;
+    }
+
     .govuk-accordion__controls {
       text-align: right;
     }

diff --git a/src/components/accordion/accordion.yaml b/src/components/accordion/accordion.yaml
@@ -130,3 +130,16 @@ examples:
             <ul class="govuk-list govuk-list--bullet">
               <li>Example item 2</li>
             </ul>
+
+- name: with focusable elements inside
+  data:
+    id: with-focusable-elements
+    items:
+      - heading:
+          text: Section A
+        content:
+          html: <a class="govuk-link" href="#">Link A</a>
+      - heading:
+          text: Section B
+        content:
+          html: <a class="govuk-link" href="#">Link B</a>
diff --git a/src/helpers/_focusable.scss b/src/helpers/_focusable.scss
@@ -33,6 +33,29 @@
   }
 }
 
+@mixin govuk-focusable-text {
+  // When colours are overridden, for example when users have a dark mode,
+  // backgrounds and box-shadows disappear, so we need to ensure there's a
+  // transparent outline which will be set to a visible colour.
+
+  // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
+  @include govuk-not-ie8 {
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: 0;
+  }
+  color: $govuk-text-colour;
+  background-color: $govuk-focus-colour;
+  // sass-lint:disable indentation
+  box-shadow: -5px -1px 0 1px $govuk-focus-colour,
+              5px -1px 0 1px $govuk-focus-colour,
+              -3px 1px 0 3px $govuk-text-colour,
+              3px 1px 0 3px $govuk-text-colour;
+  // sass-lint:enable indentation
+  // When link is focussed, hide the default underline since the
+  // box shadow adds the "underline"
+  text-decoration: none;
+}
+
 /// Focusable with box-shadow
 ///
 /// Removes the visible outline and replace with box-shadow and background colour.
@@ -42,25 +65,6 @@
 
 @mixin govuk-focusable-text-link {
   &:focus {
-    // When colours are overridden, for example when users have a dark mode,
-    // backgrounds and box-shadows disappear, so we need to ensure there's a
-    // transparent outline which will be set to a visible colour.
-
-    // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
-    @include govuk-not-ie8 {
-      outline: $govuk-focus-width solid transparent;
-      outline-offset: 0;
-    }
-    color: $govuk-text-colour;
-    background-color: $govuk-focus-colour;
-    // sass-lint:disable indentation
-    box-shadow: -5px -1px 0 1px $govuk-focus-colour,
-                5px -1px 0 1px $govuk-focus-colour,
-                -3px 1px 0 3px $govuk-text-colour,
-                3px 1px 0 3px $govuk-text-colour;
-    // sass-lint:enable indentation
-    // When link is focussed, hide the default underline since the
-    // box shadow adds the "underline"
-    text-decoration: none;
+    @include govuk-focusable-text;
   }
 }
diff --git a/tasks/gulp/compile-assets.js b/tasks/gulp/compile-assets.js
@@ -19,7 +19,7 @@ const cssnano = require('cssnano')
 const postcsspseudoclasses = require('postcss-pseudo-classes')({
   // Work around a bug in pseudo classes plugin that badly transforms
   // :not(:whatever) pseudo selectors
-  blacklist: [':not(', ':disabled)', ':last-child)', ':focus)']
+  blacklist: [':not(', ':disabled)', ':last-child)', ':focus)', ':active)']
 })
 
 // Compile CSS and JS task --------------