govuk_publishing_components 17.21.0 → 18.0.0

data/node_modules/govuk-frontend/{components → govuk/components}/details/details.js

@@ -685,9 +685,6 @@ function generateUniqueID () {
  * 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;
@@ -771,7 +768,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;
   }

data/node_modules/govuk-frontend/{components → govuk/components}/details/template.njk

@@ -1,4 +1,4 @@
-<details {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-details {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
+<details {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-details {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="govuk-details" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
   <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       {{ params.summaryHtml | safe if params.summaryHtml else params.summaryText }}

data/node_modules/govuk-frontend/{components → govuk/components}/error-summary/_error-summary.scss

@@ -10,12 +10,11 @@
     @include govuk-text-colour;
     @include govuk-responsive-padding(4);
     @include govuk-responsive-margin(8, "bottom");
-    @include govuk-focusable;
 
-    border: $govuk-border-width-mobile solid $govuk-error-colour;
+    border: $govuk-border-width solid $govuk-error-colour;
 
-    @include govuk-media-query($from: tablet) {
-      border: $govuk-border-width solid $govuk-error-colour;
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
     }
   }
 
@@ -42,7 +41,6 @@
   }
 
   .govuk-error-summary__list a {
-    @include govuk-focusable-fill;
     @include govuk-typography-weight-bold;
 
     // Override default link styling to use error colour
@@ -53,19 +51,8 @@
       color: $govuk-error-colour;
     }
 
-    // When focussed, the text colour needs to be darker to ensure that colour
-    // contrast is still acceptable
     &:focus {
-      color: $govuk-focus-text-colour;
-    }
-
-    // alphagov/govuk_template includes a specific a:link:focus selector
-    // designed to make unvisited links a slightly darker blue when focussed, so
-    // we need to override the text colour for that combination of selectors.
-    @include govuk-compatibility(govuk_template) {
-      &:link:focus {
-        color: $govuk-error-colour;
-      }
+      @include govuk-focused-text;
     }
   }
 

data/node_modules/govuk-frontend/{components → govuk/components}/error-summary/error-summary.js

@@ -767,16 +767,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...)

data/node_modules/govuk-frontend/{components → govuk/components}/error-summary/template.njk

@@ -1,6 +1,6 @@
 <div class="govuk-error-summary
   {%- if params.classes %} {{ params.classes }}{% endif %}" aria-labelledby="error-summary-title" role="alert" tabindex="-1"
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="error-summary">
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="govuk-error-summary">
   <h2 class="govuk-error-summary__title" id="error-summary-title">
     {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
   </h2>

data/node_modules/govuk-frontend/{components → govuk/components}/fieldset/macro-options.json

@@ -3,7 +3,7 @@
         "name": "describedBy",
         "type": "string",
         "required": false,
-        "description": "Text or element id to add to the `aria-describedby` attribute to provide description of the group of fields for screenreader users."
+        "description": "One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users."
     },
     {
         "name": "legend",

data/node_modules/govuk-frontend/govuk/components/file-upload/_file-upload.scss

@@ -0,0 +1,81 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@import "../error-message/error-message";
+@import "../hint/hint";
+@import "../label/label";
+
+@include govuk-exports("govuk/component/file-upload") {
+  $component-padding: govuk-spacing(1);
+
+  .govuk-file-upload {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    padding-top: $component-padding;
+    padding-bottom: $component-padding;
+
+    &:focus {
+      // "Yank" the padding with negative margin to avoid a jump
+      // when element is focused
+      margin-right: -$component-padding;
+      margin-left: -$component-padding;
+      padding-right: $component-padding;
+      padding-left: $component-padding;
+
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      // Use `box-shadow` to add border instead of changing `border-width`
+      // (which changes element size) and since `outline` is already used for the
+      // yellow focus state.
+      box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
+
+      @include govuk-if-ie8 {
+        // IE8 doesn't support `box-shadow` so add an actual border
+        border: 4px solid $govuk-input-border-colour;
+      }
+    }
+
+    // Set "focus-within" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196
+    // so that component receives focus in Firefox.
+    // This can't be set together with `:focus` as all versions of IE fail
+    // to recognise `focus-within` and don't set any styles from the block
+    // when it's a selector.
+    &:focus-within {
+      margin-right: -$component-padding;
+      margin-left: -$component-padding;
+      padding-right: $component-padding;
+      padding-left: $component-padding;
+
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+
+      box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
+    }
+  }
+
+  .govuk-file-upload--error {
+    // As `upload--error` has border, it needs to have the same padding as
+    // the standard focused element.
+    margin-right: -$component-padding;
+    margin-left: -$component-padding;
+    padding-right: $component-padding;
+    padding-left: $component-padding;
+    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+
+    &:focus {
+      border-color: $govuk-input-border-colour;
+      // Remove `box-shadow` inherited from `:focus` as `file-upload--error`
+      // already has the thicker border.
+      box-shadow: none;
+    }
+
+    // Repeat `:focus` styles to prevent error styles from being applied when
+    // input button is pressed as this moves the focus to "within".
+    // This can't be set together with `:focus` as all versions of IE fail
+    // to recognise `focus-within` and don't set any styles from the block
+    // when it's a selector.
+    &:focus-within {
+      border-color: $govuk-input-border-colour;
+      box-shadow: none;
+    }
+  }
+}

data/node_modules/govuk-frontend/{components → govuk/components}/file-upload/macro-options.json

@@ -17,6 +17,12 @@
         "required": false,
         "description": "Optional initial value of the input"
     },
+    {
+        "name": "describedBy",
+        "type": "string",
+        "required": false,
+        "description": "One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users."
+    },
     {
         "name": "label",
         "type": "object",

data/node_modules/govuk-frontend/{components → govuk/components}/file-upload/template.njk

@@ -4,7 +4,7 @@
 
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
-{% set describedBy = "" %}
+{% set describedBy = params.describedBy if params.describedBy else "" %}
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
   {{ govukLabel({
     html: params.label.html,

data/node_modules/govuk-frontend/{components → govuk/components}/footer/_footer.scss

@@ -7,11 +7,24 @@
 @include govuk-exports("govuk/component/footer") {
 
   $govuk-footer-background: $govuk-canvas-background-colour;
-  $govuk-footer-border-top: #a1acb2;
-  $govuk-footer-border: govuk-colour("grey-2");
-  $govuk-footer-text: #454a4c;
+  $govuk-footer-border: $govuk-border-colour;
+  // This variable can be removed entirely once the legacy palette goes away,
+  // as it'll just be the same as $govuk-footer-border.
+  $govuk-footer-border-top: $govuk-border-colour;
+  $govuk-footer-text: $govuk-text-colour;
   $govuk-footer-link: $govuk-footer-text;
-  $govuk-footer-link-hover: #171819;
+  $govuk-footer-link-hover: false;
+
+  @if ($govuk-use-legacy-palette) {
+    // sass-lint:disable no-color-literals
+    $govuk-footer-border-top: #a1acb2;
+    $govuk-footer-border: govuk-colour("grey-2");
+    $govuk-footer-text: #454a4c;
+    $govuk-footer-link: $govuk-footer-text;
+
+    // Only used with the legacy palette
+    $govuk-footer-link-hover: #171819;
+  }
 
   // Based on the govuk-crest-2x.png image dimensions.
   $govuk-footer-crest-image-width-2x: 250px;
@@ -31,22 +44,27 @@
   }
 
   .govuk-footer__link {
-    @include govuk-focusable-fill;
-
-    &:link,
-    &:visited {
-      color: $govuk-footer-link;
-    }
+    @if ($govuk-use-legacy-palette) {
+      &:link,
+      &:visited {
+        color: $govuk-footer-link;
+      }
 
-    &:hover,
-    &:active {
-      color: $govuk-footer-link-hover;
+      &:hover,
+      &:active {
+        color: $govuk-footer-link-hover;
+      }
+    } @else {
+      &:link,
+      &:visited,
+      &:hover,
+      &:active {
+        color: $govuk-footer-link;
+      }
     }
 
-    // When focussed, the text colour needs to be darker to ensure that colour
-    // contrast is still acceptable
     &:focus {
-      color: $govuk-focus-text-colour;
+      @include govuk-focused-text;
     }
 
     // alphagov/govuk_template includes a specific a:link:focus selector
@@ -59,6 +77,19 @@
     }
   }
 
+  // Internet Explorer 8 does not support `:not()` selectors, so don't conditionally show underlines.
+  @include govuk-not-ie8 {
+    .govuk-footer__inline-list .govuk-footer__link,
+    .govuk-footer__list .govuk-footer__link {
+      text-decoration: none;
+
+      &:hover:not(:focus),
+      &:active:not(:focus) {
+        text-decoration: underline;
+      }
+    }
+  }
+
   .govuk-footer__section-break {
     margin: 0; // Reset `<hr>` default margins
     @include govuk-responsive-margin(8, "bottom");

data/node_modules/govuk-frontend/{components → govuk/components}/footer/macro-options.json

@@ -5,6 +5,11 @@
         "required": false,
         "description": "Object containing options for the meta navigation.",
         "params": [
+            {
+                "name": "visuallyHiddenTitle",
+                "type": "string",
+                "description": "Title for a meta item section, which defaults to Support links"
+            },
             {
                 "name": "html",
                 "type": "string",

data/node_modules/govuk-frontend/{components → govuk/components}/footer/template.njk

@@ -32,8 +32,8 @@
     <div class="govuk-footer__meta">
       <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
         {% if params.meta %}
+          <h2 class="govuk-visually-hidden">{{ params.meta.visuallyHiddenTitle | default("Support links") }}</h2>
           {% if params.meta.items %}
-            <h2 class="govuk-visually-hidden">Support links</h2>
             <ul class="govuk-footer__inline-list">
               {% for item in params.meta.items %}
                 <li class="govuk-footer__inline-list-item">

data/node_modules/govuk-frontend/{components → govuk/components}/header/_header.scss

@@ -46,9 +46,11 @@
   }
 
   .govuk-header__logotype-crown {
+    position: relative;
+    top: -1px;
     margin-right: 1px;
     fill: currentColor;
-    vertical-align: middle;
+    vertical-align: top;
   }
 
   .govuk-header__logotype-crown-fallback-image {
@@ -59,14 +61,12 @@
   }
 
   .govuk-header__product-name {
-    @include govuk-font($size: 24);
+    @include govuk-font($size: 24, $line-height: 1);
     display: inline-table;
     padding-right: govuk-spacing(2);
   }
 
   .govuk-header__link {
-    @include govuk-focusable-fill;
-
     text-decoration: none;
 
     &:link,
@@ -78,10 +78,8 @@
       text-decoration: underline;
     }
 
-    // When focussed, the text colour needs to be darker to ensure that colour
-    // contrast is still acceptable
     &:focus {
-      color: $govuk-focus-text-colour;
+      @include govuk-focused-text;
     }
 
     // alphagov/govuk_template includes a specific a:link:focus selector
@@ -101,7 +99,7 @@
 
     display: inline-block;
     font-size: 30px; // We don't have a mixin that produces 30px font size
-    line-height: 30px;
+    line-height: 1;
 
     &:link,
     &:visited {
@@ -116,6 +114,12 @@
       // specified currentColor explicitly IE8 would ignore this rule.
       border-bottom: 1px solid;
     }
+
+    // Remove any borders that show when focused and hovered.
+    &:focus {
+      margin-bottom: 0;
+      border-bottom: 0;
+    }
   }
 
   .govuk-header__link--service-name {
@@ -165,14 +169,16 @@
       text-decoration: underline;
     }
 
+    &:focus {
+      @include govuk-focused-text;
+    }
+
     &::after {
       @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
       content: "";
       margin-left: govuk-spacing(1);
     }
 
-    @include govuk-focusable;
-
     @include mq ($from: tablet) {
       top: govuk-spacing(3);
     }
@@ -287,18 +293,25 @@
     }
   }
 
-  // Begin adjustments for font baseline offset
-  // These should be removed when the font is updated with the correct baseline
-  .govuk-header__logotype-crown,
-  .govuk-header__logotype-crown-fallback-image {
-    position: relative;
-    top: -4px;
-  }
+  @if $govuk-use-legacy-font {
+    // Begin adjustments for font baseline offset
+    // These should be removed when the font is updated with the correct baseline
+    .govuk-header__logotype-crown,
+    .govuk-header__logotype-crown-fallback-image {
+      position: relative;
+      top: -4px;
+      vertical-align: middle;
+    }
 
-  .govuk-header {
-    $offset: 3px;
-    padding-top: $offset;
+    .govuk-header {
+      $offset: 3px;
+      padding-top: $offset;
+    }
+
+    .govuk-header__link--homepage {
+      line-height: 30px;
+    }
+    // End adjustments
   }
-  // End adjustments
 
 }