govuk_publishing_components 27.10.2 → 27.10.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2a92c889f37a998fd33eaa7d63a5023675379057a7b1d6c715faa9eaecfb4b96
-  data.tar.gz: a65094daf71f7c7092994bdcab43be1e0839c563dadd3c7932e8914ab77dd6f1
+  metadata.gz: 657e4c5dd25ccaf9fbcb4052fb9b48033884e4ea11a67853a774d4c94ff987c9
+  data.tar.gz: c315a4c225848b20d8a1db997a86844fc659cf26700a2297b74caf007bc2c96e
 SHA512:
-  metadata.gz: 8d9b2bf25703c953126dd01b6729d12e08c7d4dc626e7987cdeb7352b2426caf4825c299b3d21d1ddc7be736cb721947bc7baa92615014dabb2fa00732aa1156
-  data.tar.gz: 8770942781c1634da82bd444f57c98493d545ce6f52e776360c669905c9787a8557a78c3b5eb990b2fd7496b3068dfe98f8014e7a3f0a3b5580c9d9b8a2537a1
+  metadata.gz: dbbe3180641788a4f06261a5e5ef9a68fdae6f34a4d55d9585cf021aa22ab4ccd00b4da2afca6709eb78e06feb42896c8889e4ce8222268f37a98de565055f26
+  data.tar.gz: b172a6ff735e768886eac870678a6929cc5d288055756a3176b39b26255e50c6543b913728ee7bf1bc1f2333ebb9e1075b4f241cd675d98aa8e655b898776375

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -92,169 +92,72 @@
   }
 }
 
-$search-icon-size: 20px;
+$icon-size: 20px;
+$chevron-indent-spacing: 7px;
+
+@mixin chevron($colour, $update: false) {
+  @if ($update == true) {
+    border-bottom-color: $colour;
+    border-right-color: $colour;
+  } @else {
+    border-bottom: 3px solid $colour;
+    border-right: 3px solid $colour;
+    content: " ";
+    display: inline-block;
+    height: 8px;
+    margin: 0 8px 0 2px;
+    transform: translateY(-35%) rotate(45deg);
+    vertical-align: middle;
+    width: 8px;
+  }
+}
 
-@mixin chevron($colour) {
-  border-bottom: 3px solid govuk-colour($colour);
-  border-right: 3px solid govuk-colour($colour);
+@mixin make-selectable-area-bigger {
+  background: none;
+  bottom: 0;
   content: " ";
-  display: inline-block;
-  height: 8px;
-  margin: 0 8px 0 2px;
-  transform: translateY(-35%) rotate(45deg);
-  vertical-align: middle;
-  width: 8px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 
-%top-level-navigation-link-base {
+@mixin pseudo-underline {
   background: none;
-  @include govuk-font($size: 24, $weight: bold, $line-height: 20px);
-  border: 0;
-  box-sizing: border-box;
-  display: block;
-  margin: 0;
-  padding: govuk-spacing(6) govuk-spacing(3);
-  position: relative;
-  text-decoration: none;
-
-  &,
-  &:link,
-  &:visited {
-    color: $govuk-link-colour;
-  }
+  bottom: 0;
+  content: " ";
+  height: govuk-spacing(1);
+  left: govuk-spacing(4);
+  position: absolute;
+  right: govuk-spacing(4);
+  top: auto;
+}
 
+@mixin focus-and-focus-visible {
   &:focus {
-    background: $govuk-focus-colour;
-    border-color: $govuk-focus-text-colour;
-    border-top-color: $govuk-focus-colour;
-    color: $govuk-focus-text-colour;
-    outline: 3px solid transparent;
-    box-shadow: none;
-    z-index: 1;
-  }
-
-  @include govuk-media-query($from: "tablet") {
-    padding: govuk-spacing(6);
-  }
-
-  @include govuk-media-query($from: "desktop") {
-    @include govuk-font($size: 16, $weight: false, $line-height: 20px);
-    color: govuk-colour("white");
-    display: inherit;
-    height: govuk-spacing(9);
-    padding: govuk-spacing(4);
-
-    &:after {
-      background: govuk-colour("black");
-      bottom: 0;
-      content: " ";
-      display: block;
-      height: govuk-spacing(1);
-      left: govuk-spacing(4);
-      position: absolute;
-      right: govuk-spacing(4);
-    }
-
-    &:hover {
-      background: govuk-colour("black");
-      color: govuk-colour("mid-grey");
-
-      &:after {
-        background-color: govuk-colour("mid-grey");
-      }
-    }
-
-    &:focus {
-      @include govuk-focused-text;
-      box-shadow: none;
-
-      &:after {
-        background-color: $govuk-focus-text-colour;
-      }
-    }
-
-    &,
-    &:visited {
-      color: govuk-colour("white");
-    }
+    @content;
   }
-}
-
-%toggle-base {
-  @extend %top-level-navigation-link-base;
-  @include govuk-font($size: 16, $weight: false, $line-height: 20px);
-  border-radius: 0;
-  cursor: pointer;
-  padding: govuk-spacing(4);
-  right: 0;
-  top: 0;
 
-  @include govuk-media-query($from: "desktop") {
-    border: none;
+  &:focus-visible {
+    @content;
   }
 }
 
-%top-level-navigation-toggle-base {
-  @extend %toggle-base;
-  border-top: 1px solid govuk-colour("black");
-  height: govuk-spacing(9);
-
-  &:focus {
-    border-color: $govuk-focus-colour;
+@mixin focus-not-focus-visible {
+  & {
+    @content;
   }
 
-  &.gem-c-layout-super-navigation-header__open-button {
-    border-left-color: govuk-colour("black");
-    border-right-color: govuk-colour("black");
-
-    &,
-    &:hover {
-      background: govuk-colour("light-grey");
-      color: govuk-colour("light-grey");
-    }
-
-    &:focus {
-      color: $govuk-focus-colour;
-      background: $govuk-focus-colour;
-    }
-
-    &:before,
-    &:after {
-      $width: govuk-spacing(4);
-      $height: 4px;
-
-      border: none;
-      content: " ";
-      display: block;
-      margin: 0;
-      width: $width;
-      height: $height;
-      background: govuk-colour("black");
-      transform-origin: center;
-      position: absolute;
-      top: calc(50% - #{$height / 2});
-      left: calc(50% - #{$width / 2});
-    }
-
-    &:before {
-      transform: rotate(45deg);
-    }
-
-    &:after {
-      transform: rotate(-45deg);
-    }
+  &:focus:not(:focus-visible) {
+    @content;
   }
 }
 
-%search-icon {
-  height: $search-icon-size;
-  pointer-events: none;
-  width: $search-icon-size;
-}
-
 // Header layout - black bar and logo.
 .gem-c-layout-super-navigation-header {
   background: govuk-colour("black");
+  border-top: 1px solid govuk-colour("black");
+  margin-top: -1px;
   position: relative;
 
   .lte-ie8 & {
@@ -276,8 +179,8 @@ $search-icon-size: 20px;
 
 .gem-c-layout-super-navigation-header__header-logo {
   height: govuk-spacing(6);
-  padding-top: govuk-spacing(3);
   padding-bottom: govuk-spacing(3);
+  padding-top: govuk-spacing(3);
 
   @include govuk-media-query($from: "desktop") {
     display: block;
@@ -292,6 +195,10 @@ $search-icon-size: 20px;
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-toggle-wrapper {
+  position: relative;
+}
+
 // Top level navigation and search.
 .gem-c-layout-super-navigation-header__navigation-items,
 .gem-c-layout-super-navigation-header__search-items {
@@ -314,6 +221,10 @@ $search-icon-size: 20px;
 }
 
 .gem-c-layout-super-navigation-header__navigation-items {
+  @include govuk-media-query($from: "desktop") {
+    display: inline-block;
+  }
+
   .js-module-initialised & {
     padding: 0 0 govuk-spacing(9) 0;
 
@@ -325,94 +236,276 @@ $search-icon-size: 20px;
 
 .gem-c-layout-super-navigation-header__navigation-item,
 .gem-c-layout-super-navigation-header__search-item {
-  margin-right: 0;
-  padding: 0;
+  display: block;
+  margin: 0 govuk-spacing(3);
+  position: relative;
+
+  @include govuk-media-query($from: "tablet") {
+    margin: 0 govuk-spacing(6);
+  }
 
   @include govuk-media-query($from: "desktop") {
-    border-bottom: none;
+    background: govuk-colour("black");
+    display: block;
     float: left;
+    margin: 0;
     padding: 0;
+    position: static;
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-item {
-  &:after {
-    background-color: $govuk-border-colour;
-    content: " ";
-    display: block;
-    height: 1px;
-    left: 0;
-    right: 0;
-    position: absolute;
-  }
+  border-bottom: 1px solid $govuk-border-colour;
 
   @include govuk-media-query($from: "desktop") {
-    &:after {
-      content: none;
-    }
+    border-bottom: 0;
   }
 }
 
-// Top level navigation links.
-.gem-c-layout-super-navigation-header__navigation-item-link {
-  @extend %top-level-navigation-link-base;
+// Top level navigation links and search link.
+.gem-c-layout-super-navigation-header__navigation-item-link,
+.gem-c-layout-super-navigation-header__search-item-link,
+.gem-c-layout-super-navigation-header__navigation-second-toggle-button {
+  @include govuk-link-common;
+  @include govuk-link-style-no-visited-state;
+  @include govuk-link-style-no-underline;
+
+  display: inline-block;
+  font-size: 19px;
+  font-size: govuk-px-to-rem(19px);
+  font-weight: bold;
+  margin: govuk-spacing(3) 0;
+
+  @include govuk-media-query($from: "desktop") {
+    display: block;
+    margin: 0;
+  }
+
+  &:hover {
+    @include govuk-link-hover-decoration;
+  }
 
   &,
-  &:link, // 👈 required to override govuk-template
+  &:link,
   &:visited {
-    color: $govuk-link-colour;
+    @include focus-and-focus-visible {
+      @include govuk-focused-text;
+    }
 
-    &:hover {
-      color: $govuk-link-hover-colour;
+    // Undoes the :focus styles *only* for browsers that support :focus-visible.
+    // See https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+    &:focus:not(:focus-visible) {
+      background: none;
+      box-shadow: none;
+      color: $govuk-link-colour;
 
-      @include govuk-media-query($from: "desktop") {
-        color: govuk-colour("mid-grey");
+      &:hover {
+        @include govuk-link-decoration;
+        @include govuk-link-hover-decoration;
+        color: $govuk-link-hover-colour;
       }
     }
 
-    &:focus {
-      color: $govuk-focus-text-colour;
+    &:after {
+      @include make-selectable-area-bigger;
     }
 
     @include govuk-media-query($from: "desktop") {
-      color: govuk-colour("white");
+      float: left;
+      font-size: 16px;
+      font-size: govuk-px-to-rem(16px);
+      height: govuk-spacing(4);
+      padding: govuk-spacing(4);
+      position: relative;
+
+      &:before {
+        @include chevron(govuk-colour("white"), true);
+      }
+
+      &:hover {
+        color: govuk-colour("mid-grey");
+
+        &:after {
+          background: govuk-colour("mid-grey");
+        }
+      }
+
+      // stylelint-disable max-nesting-depth
+      @include focus-and-focus-visible {
+        box-shadow: none;
+        color: $govuk-focus-text-colour;
+
+        &:after {
+          background: $govuk-focus-text-colour;
+        }
+      }
+
+      @include focus-not-focus-visible {
+        &,
+        &:hover {
+          color: govuk-colour("white");
+          text-decoration: none;
+        }
+      }
+      // stylelint-enable max-nesting-depth
+
+      &:focus:not(:focus-visible) {
+        &:after {
+          background: none;
+        }
+      }
+
+      &:after {
+        @include pseudo-underline;
+      }
     }
   }
 
-  // This :link:focus selector is required to override the `govuk-template`
-  // defaults.
-  &:link:focus {
-    color: $govuk-focus-text-colour;
+  &:after {
+    @include make-selectable-area-bigger;
   }
+}
 
+.gem-c-layout-super-navigation-header__navigation-item-link {
   .js-module-initialised & {
-    @include govuk-media-query($until: "desktop") {
-      padding: govuk-spacing(6) govuk-spacing(3) govuk-spacing(6) govuk-spacing(9);
+    margin-left: govuk-spacing(4);
+  }
+}
+
+.gem-c-layout-super-navigation-header__navigation-second-toggle-button {
+  background: none;
+  border: 0;
+  color: $govuk-link-colour;
+  cursor: pointer;
+  padding: 0;
+
+  @include focus-not-focus-visible {
+    &:before {
+      @include chevron($govuk-link-colour);
+    }
+  }
+
+  @include focus-not-focus-visible {
+    &:hover {
+      &:before {
+        @include chevron($govuk-link-hover-colour, true);
+      }
+    }
+  }
+
+  &:focus {
+    &:before {
+      @include chevron($govuk-focus-text-colour, true);
+    }
+  }
+
+  @include govuk-media-query($from: "desktop") {
+    &:after {
+      @include pseudo-underline;
     }
 
-    @include govuk-media-query($until: "tablet") {
-      padding-left: govuk-spacing(7);
+    @include focus-not-focus-visible {
+      color: govuk-colour("white");
+      float: left;
+      font-size: 16px;
+      font-size: govuk-px-to-rem(16px);
+      height: govuk-spacing(9);
+      padding: govuk-spacing(4);
+      position: relative;
+      text-decoration: none;
+
+      &:before {
+        @include chevron(govuk-colour("white"), true);
+      }
+    }
+    @include focus-not-focus-visible {
+      &:hover {
+        color: govuk-colour("mid-grey");
+        text-decoration: none;
+
+        &:after {
+          background: govuk-colour("mid-grey");
+        }
+
+        &:before {
+          @include chevron(govuk-colour("mid-grey"), true);
+        }
+      }
+    }
+
+    @include focus-and-focus-visible {
+      color: $govuk-focus-text-colour;
+
+      &:after {
+        background: $govuk-focus-text-colour;
+      }
+
+      &:before {
+        @include chevron($govuk-focus-text-colour, true);
+      }
+    }
+  }
+
+  &.gem-c-layout-super-navigation-header__open-button {
+    @include focus-not-focus-visible {
+      &:before {
+        transform: translateY(0) rotate(225deg);
+      }
+    }
+
+    @include govuk-media-query($from: "desktop") {
+      @include focus-not-focus-visible {
+        background: govuk-colour("light-grey");
+        color: $govuk-link-colour;
+
+        &:before {
+          @include chevron($govuk-link-colour, true);
+        }
+
+        &:after {
+          background-color: $govuk-link-colour;
+        }
+      }
+
+      @include focus-and-focus-visible {
+        background-color: $govuk-focus-colour;
+        color: $govuk-focus-text-colour;
+
+        &:before {
+          @include chevron($govuk-focus-text-colour, true);
+        }
+
+        &:after {
+          background: $govuk-focus-text-colour;
+        }
+      }
     }
   }
 }
 
 // Search link and dropdown.
 .gem-c-layout-super-navigation-header__search-item-link {
-  @extend %top-level-navigation-link-base;
+  &:link,
+  &:visited {
+    @include govuk-media-query($from: "desktop") {
+      background: $govuk-brand-colour;
 
-  @include govuk-media-query($from: "desktop") {
-    background: $govuk-link-colour;
-    margin-left: 0;
+      &:hover {
+        background: none;
 
-    &:focus:hover:after,
-    &:after {
-      content: none;
-    }
+        &:before {
+          left: 0;
+          right: 0;
+        }
+      }
 
-    &:hover:after {
-      content: " ";
-      left: 0;
-      right: 0;
+      &:focus {
+        background: $govuk-focus-colour;
+
+        &:before {
+          content: none;
+        }
+      }
     }
   }
 }
@@ -423,18 +516,17 @@ $search-icon-size: 20px;
   }
 }
 
-.gem-c-layout-super-navigation-header__search-item-link-icon {
-  @extend %search-icon;
-  display: none;
-
-  @include govuk-media-query($from: "desktop") {
-    display: block;
-  }
+.gem-c-layout-super-navigation-header__search-item-link-icon,
+.gem-c-layout-super-navigation-header__search-toggle-button-link-icon {
+  height: $icon-size;
+  pointer-events: none;
+  width: $icon-size;
 }
 
-.gem-c-layout-super-navigation-header__search-toggle-button-link-icon {
-  @extend %search-icon;
-  display: block;
+.gem-c-layout-super-navigation-header__search-item-link-icon {
+  @include govuk-media-query($until: "desktop") {
+    @include govuk-visually-hidden;
+  }
 }
 
 // Search and popular content dropdown.
@@ -450,223 +542,189 @@ $search-icon-size: 20px;
 
 // Styles for top level navigation toggle button.
 .gem-c-layout-super-navigation-header__navigation-top-toggle-button {
-  @extend %top-level-navigation-toggle-base;
-  border-left: 1px solid govuk-colour("mid-grey");
+  @include govuk-font($size: 19, $weight: "bold", $line-height: 20px);
+  background: govuk-colour("black");
+  border: 0;
+  border-left: 1px solid govuk-colour("white");
+  border-right: 1px solid govuk-colour("white");
+  box-sizing: border-box;
   color: govuk-colour("white");
+  cursor: pointer;
+  height: govuk-spacing(9);
+  margin-right: -1px;
+  padding: govuk-spacing(4);
   position: absolute;
-  right: 45px;
-
-  &.gem-c-layout-super-navigation-header__open-button {
-    border-top-color: govuk-colour("black");
-  }
+  right: (govuk-spacing(9) - govuk-spacing(3));
+  top: 0;
 
   @include govuk-media-query($from: 360px) {
-    &:before {
-      @include chevron("white");
-    }
-  }
+    right: govuk-spacing(9);
 
-  &:focus {
     &:before {
-      border-color: $govuk-focus-text-colour;
+      @include chevron(govuk-colour("white"));
     }
   }
 
-  @include govuk-media-query(360px) {
-    right: 60px;
-  }
+  @include focus-and-focus-visible {
+    @include govuk-focused-text;
+    border-color: $govuk-focus-colour;
+    box-shadow: none;
+    z-index: 10;
 
-  @include govuk-media-query($from: "desktop") {
-    display: none;
+    @include govuk-media-query($from: 360px) {
+      &:before {
+        @include chevron(govuk-colour("black"), true);
+      }
+    }
   }
-}
 
-// styles for search toggle button
-.gem-c-layout-super-navigation-header__search-toggle-button {
-  @extend %top-level-navigation-toggle-base;
-  border-top: 1px solid transparent;
-  border-left: 1px solid govuk-colour("mid-grey");
-  color: govuk-colour("white");
-  position: absolute;
-  right: (0 - govuk-spacing(3));
-
-  &:after {
-    background-color: $govuk-link-colour;
-    content: " ";
-    left: 0;
-    right: 0;
-  }
+  // Undoes the :focus styles *only* for browsers that support :focus-visible.
+  // See https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+  @include focus-not-focus-visible {
+    background: none;
+    border-color: govuk-colour("white");
+    box-shadow: none;
+    color: govuk-colour("white");
 
-  &:not(.gem-c-layout-super-navigation-header__open-button):focus {
-    &:hover,
-    &:after {
-      background-color: $govuk-focus-colour;
-      border-top-color: $govuk-focus-colour;
+    @include govuk-media-query($from: 360px) {
+      &:before {
+        @include chevron(govuk-colour("white"), true);
+      }
     }
   }
 
-  @include govuk-media-query($from: 360px) {
-    right: 0;
-  }
-
-  @include govuk-media-query($from: "desktop") {
-    background-color: $govuk-link-colour;
-    border-left: 0;
-    height: govuk-spacing(9);
-    margin-left: govuk-spacing(3);
-    padding: govuk-spacing(4);
-    position: relative;
-    float: right;
-
-    &.gem-c-layout-super-navigation-header__open-button {
-      border-top-color: govuk-colour("black");
+  // Open button modifier
+  &.gem-c-layout-super-navigation-header__open-button {
+    @include focus-and-focus-visible {
+      @include govuk-focused-text;
+      border-color: $govuk-focus-colour;
+      box-shadow: none;
+      color: $govuk-focus-colour;
 
-      &:hover:after {
-        content: " ";
+      @include govuk-media-query($from: 360px) {
+        &:before {
+          @include chevron($govuk-focus-colour, true);
+        }
       }
     }
 
-    // To avoid the 'sticky hover' problem, we need to stop the hover state on
-    // touch screen devices.
-    //
-    // One solution is to use `@media(hover: hover)`. This turns on the hover
-    // state only for devices that aren't touchscreen, but means that browsers
-    // that don't support this media query won't get a hover state at all.
-    //
-    // To get around this, we do the opposite - we turn off the hover state for
-    // for touchscreen devices.
-    @media (hover: none), (pointer: coarse) {
-      &:not(:focus):hover {
-        background-color: $govuk-link-colour;
-        color: govuk-colour("white");
+    @include focus-not-focus-visible {
+      background: govuk-colour("light-grey");
+      color: govuk-colour("light-grey");
 
-        &:after {
-          background-color: $govuk-link-colour;
+      @include govuk-media-query($from: 360px) {
+        &:before {
+          @include chevron(govuk-colour("light-grey"));
         }
       }
     }
   }
 }
 
-// styles for second level navigation toggle buttons
-.gem-c-layout-super-navigation-header__navigation-second-toggle-button {
-  @extend %toggle-base;
-  @include govuk-font($size: 24, $weight: false, $line-height: 20px);
+// Styles for search toggle button.
+.gem-c-layout-super-navigation-header__search-toggle-button {
+  @include govuk-font($size: 19, $weight: "bold", $line-height: 20px);
+  background: govuk-colour("black");
   border: 0;
-  margin: 0;
-  padding: govuk-spacing(6) govuk-spacing(3);
-  position: relative;
-  text-align: left;
-  text-decoration: none;
-  width: 100%;
+  border-left: 1px solid govuk-colour("white");
+  color: govuk-colour("white");
+  cursor: pointer;
+  height: govuk-spacing(9);
+  padding: govuk-spacing(4);
+  position: absolute;
+  right: (0 - govuk-spacing(3));
+  top: 0;
+  width: govuk-spacing(9);
 
-  &:before {
-    @include chevron("black");
+  @include focus-and-focus-visible {
+    @include govuk-focused-text;
+    border-color: $govuk-focus-colour;
+    box-shadow: none;
   }
 
-  &,
-  &:visited {
-    color: $govuk-link-colour;// FIXME: contrast against govuk-colour("light-grey") not high enough
-
-    @include govuk-media-query($from: "desktop") {
-      color: govuk-colour("white");
-    }
+  &:focus:not(:focus-visible) {
+    background: none;
+    border-color: govuk-colour("white");
+    box-shadow: none;
+    color: govuk-colour("white");
   }
 
-  @include govuk-media-query($from: "tablet") {
-    padding: govuk-spacing(6);
+  @include govuk-media-query($from: 360px) {
+    right: 0;
   }
 
   @include govuk-media-query($from: "desktop") {
-    @include govuk-font($size: 16, $weight: false, $line-height: 20px);
-    border-top: 1px solid transparent;
-    color: govuk-colour("white");
-    height: govuk-spacing(9);
-    padding: govuk-spacing(4);
-    position: relative;
-
-    &:before {
-      border-color: govuk-colour("white");
+    @include focus-not-focus-visible {
+      background: $govuk-brand-colour;
+      border-bottom: govuk-spacing(1) solid $govuk-brand-colour;
+      border-left: none;
+      position: relative;
     }
 
     &:hover {
+      background: govuk-colour("black");
+      border-bottom-color: govuk-colour("mid-grey");
       color: govuk-colour("mid-grey");
-
-      &:after {
-        background-color: govuk-colour("mid-grey");
-      }
-
-      &:before {
-        border-color: govuk-colour("mid-grey");
-      }
     }
 
-    &:focus {
-      color: $govuk-focus-text-colour;
-
-      &:after {
-        background-color: $govuk-focus-text-colour;
-      }
-
-      &:before {
-        border-color: $govuk-focus-text-colour;
-      }
+    @include focus-and-focus-visible {
+      @include govuk-focused-text;
+      border-bottom-color: $govuk-focus-colour;
+      box-shadow: none;
     }
   }
 
+  // Open button modifier
   &.gem-c-layout-super-navigation-header__open-button {
-    border-top-color: govuk-colour("black");
-
-    &:before {
-      transform: translateY(20%) rotate(225deg);
-    }
-
-    @include govuk-media-query($from: "desktop") {
-      background-color: govuk-colour("light-grey");
-      color: $govuk-link-colour;
-
-      &:after {
-        background: $govuk-link-colour;
-      }
-
-      &:before {
-        border-color: $govuk-link-colour;
-      }
-
-      &:focus {
-        background-color: $govuk-focus-colour;
-        color: $govuk-focus-text-colour;
-
-        &:after {
-          background-color: $govuk-focus-text-colour;
-        }
+    @include focus-and-focus-visible {
+      @include govuk-focused-text;
+      border-color: $govuk-focus-colour;
+      box-shadow: none;
+      color: $govuk-focus-colour;
 
+      @include govuk-media-query($from: 360px) {
         &:before {
-          border-color: $govuk-focus-text-colour;
+          @include chevron($govuk-focus-colour, true);
         }
       }
+    }
 
-      &:active {
-        background-color: govuk-colour("light-grey");
-        color: $govuk-link-colour;
-
-        &:before {
-          border-color: $govuk-link-colour;
-        }
-      }
+    @include focus-not-focus-visible {
+      background: govuk-colour("light-grey");
+      border-bottom-color: govuk-colour("light-grey");
+      color: govuk-colour("light-grey");
     }
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon {
+  color: $govuk-text-colour;
+  display: none;
+  font-size: 36px;
+  font-weight: normal;
+  left: 0;
+  line-height: 22px;
+  padding: govuk-spacing(4) 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 0;
+
+  .gem-c-layout-super-navigation-header__open-button & {
+    display: block;
+  }
+}
+
 // Dropdown menu.
 .gem-c-layout-super-navigation-header__navigation-dropdown-menu {
-  background: govuk-colour("white");
+  background: govuk-colour("light-grey");
 
   @include govuk-media-query($from: "desktop") {
-    background: govuk-colour("light-grey");
     left: 0;
     position: absolute;
     right: 0;
+    top: govuk-spacing(9);
   }
 }
 
@@ -682,7 +740,12 @@ $search-icon-size: 20px;
 
 // Dropdown menu items.
 .gem-c-layout-super-navigation-header__dropdown-list-item {
+  margin: 0 0 0 $chevron-indent-spacing;
+  padding: govuk-spacing(2) 0;
+  position: relative;
+
   @include govuk-media-query($from: "desktop") {
+    margin: 0;
     padding: govuk-spacing(2) 0;
   }
 }
@@ -720,11 +783,11 @@ $search-icon-size: 20px;
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link {
-  display: inline-block;
-  padding: govuk-spacing(2) 0;
+  &:after {
+    @include make-selectable-area-bigger;
+  }
 
   @include govuk-media-query($from: "desktop") {
-    display: inline;
     font-weight: bold;
     padding: 0;
   }
@@ -732,8 +795,8 @@ $search-icon-size: 20px;
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
   @include govuk-font($size: 19, $weight: bold);
-  margin-top: govuk-spacing(2);
   margin-bottom: 0;
+  margin-top: govuk-spacing(2);
 }
 
 // Dropdown menu footer links.
@@ -754,11 +817,14 @@ $search-icon-size: 20px;
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-footer-item {
+  padding: govuk-spacing(2) 0 govuk-spacing(2) $chevron-indent-spacing;
+  position: relative;
+
   @include govuk-media-query($from: "desktop") {
     box-sizing: border-box;
     float: left;
-    width: 50%;
     padding: 0 govuk-spacing(3);
+    width: 50%;
   }
 }
 
@@ -766,7 +832,10 @@ $search-icon-size: 20px;
   @include govuk-font($size: 19, $weight: bold);
   display: inline-block;
   margin: govuk-spacing(1) 0;
-  padding: govuk-spacing(2) 0;
+
+  &:after {
+    @include make-selectable-area-bigger;
+  }
 
   @include govuk-media-query($from: "desktop") {
     display: inline;
@@ -791,7 +860,6 @@ $search-icon-size: 20px;
       left: 0;
       position: absolute;
       right: 0;
-      top: 60px;
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-super-navigation-header.scss

@@ -1,3 +1,3 @@
-.gem-c-super-navigation-header a:after {
-  content: " ( " attr(href) " ) ";
+.gem-c-layout-super-navigation-header__content {
+  display: none;
 }

data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb

@@ -18,7 +18,8 @@
 <header role="banner" class="gem-c-layout-super-navigation-header">
   <div class="gem-c-layout-super-navigation-header__container govuk-width-container govuk-clearfix">
     <div class="gem-c-layout-super-navigation-header__header-logo">
-      <a class="govuk-header__link govuk-header__link--homepage"
+      <a
+        class="govuk-header__link govuk-header__link--homepage"
         data-module="gem-track-click"
         data-track-action="logoLink"
         data-track-category="headerClicked"
@@ -27,26 +28,30 @@
         data-track-dimension-index="29"
         href="<%= logo_link %>"
         id="logo"
-        title="<%= logo_link_title %>">
+        title="<%= logo_link_title %>"
+      >
         <span class="govuk-header__logotype">
-          <svg aria-hidden="true"
+          <!--[if gt IE 8]><!-->
+          <svg
+            aria-hidden="true"
             class="govuk-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown"
             focusable="false"
             height="30"
             viewBox="0 0 132 97"
+            width="36"
             xmlns="http://www.w3.org/2000/svg"
-            width="36">
-            <path fill="currentColor"
+          >
+            <path
+              d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
+              fill="currentColor"
               fill-rule="evenodd"
-              d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z">
+            >
             </path>
-            <image class="govuk-header__logotype-crown-fallback-image"
-              height="30"
-              src="<%= asset_path('govuk-logotype-crown.png') %>"
-              width="36"
-              xlink:href="">
-            </image>
           </svg>
+          <!--<![endif]-->
+          <!--[if IE 8]>
+          <img src="<%= asset_path('govuk-logotype-crown.png') %>" alt="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
+          <![endif]-->
           <span class="govuk-header__logotype-text">
             <%= logo_text %>
           </span>
@@ -76,6 +81,13 @@
         type="button"
       >
         Menu
+        <span
+          aria-hidden="true"
+          class="gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon"
+          focusable="false"
+        >
+          &times;
+        </span>
       </button>
       <ul id="super-navigation-menu" class="gem-c-layout-super-navigation-header__navigation-items">
         <% navigation_links.each_with_index do | link, index | %>
@@ -89,34 +101,38 @@
             tracking_label = link[:label].downcase.gsub(/\s+/, "")
           %>
           <%= tag.li class: li_classes do %>
-            <%= link_to link[:label], link[:href], {
-              class: "gem-c-layout-super-navigation-header__navigation-item-link",
-              data: {
-                module: "gem-track-click",
-                track_action: "#{tracking_label}Link",
-                track_category: "headerClicked",
-                track_label: link[:href],
-                track_dimension: link[:label],
-                track_dimension_index: "29",
-              }
-            } %>
+            <div class="gem-c-layout-super-navigation-header__navigation-toggle-wrapper govuk-clearfix">
+              <%= link_to link[:label], link[:href], {
+                class: "gem-c-layout-super-navigation-header__navigation-item-link",
+                data: {
+                  module: "gem-track-click",
+                  track_action: "#{tracking_label}Link",
+                  track_category: "headerClicked",
+                  track_label: link[:href],
+                  track_dimension: link[:label],
+                  track_dimension_index: "29",
+                }
+              } %>
+              <%= content_tag(:button, link[:label], {
+                aria: {
+                  controls: "super-navigation-menu__section-#{unique_id}",
+                  expanded: false,
+                  label: show_menu_text,
+                },
+                class: "gem-c-layout-super-navigation-header__navigation-second-toggle-button",
+                data: {
+                  text_for_hide: hide_menu_text,
+                  text_for_show: show_menu_text,
+                  toggle_desktop_group: "top",
+                  toggle_mobile_group: "second",
+                  tracking_key: tracking_label,
+                },
+                hidden: true,
+                id: "super-navigation-menu__section-#{unique_id}-toggle",
+                type: "button",
+              }) if has_children %>
+            </div>
             <% if has_children %>
-              <button
-                aria-controls="super-navigation-menu__section-<%= unique_id %>"
-                aria-expanded="false"
-                aria-label="<%= show_menu_text %>"
-                class="gem-c-layout-super-navigation-header__navigation-second-toggle-button"
-                data-text-for-hide="<%= hide_menu_text %>"
-                data-text-for-show="<%= show_menu_text %>"
-                data-toggle-desktop-group="top"
-                data-toggle-mobile-group="second"
-                data-tracking-key="<%= tracking_label %>"
-                hidden
-                id="super-navigation-menu__section-<%= unique_id %>-toggle"
-                type="button"
-              >
-                <%= link[:label] %>
-              </button>
               <div
                 hidden
                 class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
@@ -152,7 +168,7 @@
                                     track_dimension_index: "29",
                                   }
                                 } %>
-                                <%= tag.p item[:description], class: "govuk-body govuk-!-margin-0" if has_description %>
+                                <%= tag.p item[:description], class: "govuk-body govuk-!-margin-0 govuk-!-margin-top-1" if has_description %>
                               </li>
                             <% end %>
                           </ul>
@@ -214,9 +230,17 @@
           <%= search_text %>
         </span>
         <%=
-          render "govuk_publishing_components/components/search/search_icon",
-            classes: %W[gem-c-layout-super-navigation-header__search-toggle-button-link-icon]
+          render "govuk_publishing_components/components/search/search_icon", {
+            classes: %w[gem-c-layout-super-navigation-header__search-toggle-button-link-icon],
+          }
         %>
+        <span
+          aria-hidden="true"
+          class="gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon"
+          focusable="false"
+        >
+          &times;
+        </span>
       </button>
 
       <div id="super-search-menu" class="gem-c-layout-super-navigation-header__search-items">
@@ -243,14 +267,16 @@
                 cy="10.0161"
                 r="8.51613"
                 stroke="currentColor"
-                stroke-width="3" />
+                stroke-width="3"
+              />
               <line
                 x1="15.8668"
                 y1="16.3587"
                 x2="25.4475"
                 y2="25.9393"
                 stroke="currentColor"
-                stroke-width="3" />
+                stroke-width="3"
+              />
             </svg>
           </a>
         </div>
@@ -288,16 +314,20 @@
               <ul class="govuk-list">
                 <% popular_links.each do | popular_link | %>
                   <li class="gem-c-layout-super-navigation-header__popular-item">
-                    <a class="govuk-link gem-c-layout-super-navigation-header__popular-link"
-                      href="<%= popular_link[:href] %>"
-                      data-module="gem-track-click"
-                      data-track-action="popularLink"
-                      data-track-category="headerClicked"
-                      data-track-label="<%= popular_link[:href] %>"
-                      data-track-dimension="<%= popular_link[:label] %>"
-                      data-track-dimension-index="29">
-                      <%= popular_link[:label] %>
-                    </a>
+                    <%= link_to popular_link[:label], popular_link[:href], {
+                      class: [
+                        "govuk-link",
+                        "gem-c-layout-super-navigation-header__popular-link",
+                      ],
+                      data: {
+                        module: "gem-track-click",
+                        track_action: "popularLink",
+                        track_category: "headerClicked",
+                        track_label: popular_link[:href],
+                        track_dimension: popular_link[:label],
+                        track_dimension_index: "29",
+                      }
+                    } %>
                   </li>
                 <% end %>
               </ul>

data/app/views/govuk_publishing_components/components/docs/layout_super_navigation_header.yml

@@ -16,12 +16,21 @@ accessibility_criteria: |
 
   * have a role of banner at the root of the component (<header>) (ARIA 1.1)
 accessibility_excluded_rules:
-  - landmark-banner-is-top-level # The header element can not be top level in the examples
-  - landmark-no-duplicate-banner # banners will be duplicated in component examples list
+   # The header element can not be top level in the examples.
+  - landmark-banner-is-top-level
+  # Banners will be duplicated in component examples list.
+  - duplicate-id
+  - duplicate-id-active
+  - duplicate-id-aria
+  - landmark-no-duplicate-banner
+  - landmark-unique
 examples:
   default:
   with_custom_logo_link:
-    description: The header logo links to root by default. This option allows us to override that in certain instances. Remember to change the title, as the default is "Go to the GOV.UK homepage".
+    description: |
+      The header logo links to root by default. This option allows us to override that in certain instances.
+
+      Remember to update the title, as the default is "Go to the GOV.UK homepage".
     data:
       logo_link: "https://www.example.com"
       logo_link_title: "Go to example"

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "27.10.2".freeze
+  VERSION = "27.10.3".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 27.10.2
+  version: 27.10.3
 platform: ruby
 authors:
 - GOV.UK Dev