Merge pull request #1601 from alphagov/release-3.3.0

Release v3.3.0

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.3.0 (Feature release)
+
 ### New features
 
 #### Allow `lang` to be set on `<title>` and `<main>` of template

dist/VERSION.txt

@@ -1 +1 @@
-3.2.0
+3.3.0

package/govuk/all.js

@@ -1873,7 +1873,9 @@ ErrorSummary.prototype.getFragmentFromUrl = function (url) {
  *
  * Returns the first element that exists from this list:
  *
- * - The `<legend>` associated with the closest `<fieldset>` ancestor
+ * - The `<legend>` associated with the closest `<fieldset>` ancestor, as long
+ *   as the top of it is no more than half a viewport height away from the
+ *   bottom of the input
  * - The first `<label>` that is associated with the input using for="inputId"
  * - The closest parent `<label>`
  *
@@ -1888,7 +1890,32 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
     var legends = $fieldset.getElementsByTagName('legend');
 
     if (legends.length) {
-      return legends[0]
+      var $candidateLegend = legends[0];
+
+      // If the input type is radio or checkbox, always use the legend if there
+      // is one.
+      if ($input.type === 'checkbox' || $input.type === 'radio') {
+        return $candidateLegend
+      }
+
+      // For other input types, only scroll to the fieldset’s legend (instead of
+      // the label associated with the input) if the input would end up in the
+      // top half of the screen.
+      //
+      // This should avoid situations where the input either ends up off the
+      // screen, or obscured by a software keyboard.
+      var legendTop = $candidateLegend.getBoundingClientRect().top;
+      var inputRect = $input.getBoundingClientRect();
+
+      // If the browser doesn't support Element.getBoundingClientRect().height
+      // or window.innerHeight (like IE8), bail and just link to the label.
+      if (inputRect.height && window.innerHeight) {
+        var inputBottom = inputRect.top + inputRect.height;
+
+        if (inputBottom - legendTop < window.innerHeight / 2) {
+          return $candidateLegend
+        }
+      }
     }
   }
 

package/govuk/components/checkboxes/template.njk

@@ -16,7 +16,7 @@
 
 {% set isConditional = false %}
 {% for item in params.items %}
-  {% if item.conditional %}
+  {% if item.conditional.html %}
     {% set isConditional = true %}
   {% endif %}
 {% endfor %}
@@ -75,7 +75,7 @@
           <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
           {{-" checked" if item.checked }}
           {{-" disabled" if item.disabled }}
-          {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
+          {%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
           {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
           {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
           {{ govukLabel({
@@ -95,7 +95,7 @@
           }) | indent(6) | trim }}
           {% endif %}
         </div>
-        {% if item.conditional %}
+        {% if item.conditional.html %}
           <div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
             {{ item.conditional.html | safe }}
           </div>

package/govuk/components/date-input/macro-options.json

@@ -14,7 +14,7 @@
     {
         "name": "items",
         "type": "array",
-        "required": true,
+        "required": false,
         "description": "An array of input objects with name, value and classes.",
         "params": [
             {

package/govuk/components/error-summary/error-summary.js

@@ -798,7 +798,9 @@ ErrorSummary.prototype.getFragmentFromUrl = function (url) {
  *
  * Returns the first element that exists from this list:
  *
- * - The `<legend>` associated with the closest `<fieldset>` ancestor
+ * - The `<legend>` associated with the closest `<fieldset>` ancestor, as long
+ *   as the top of it is no more than half a viewport height away from the
+ *   bottom of the input
  * - The first `<label>` that is associated with the input using for="inputId"
  * - The closest parent `<label>`
  *
@@ -813,7 +815,32 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
     var legends = $fieldset.getElementsByTagName('legend');
 
     if (legends.length) {
-      return legends[0]
+      var $candidateLegend = legends[0];
+
+      // If the input type is radio or checkbox, always use the legend if there
+      // is one.
+      if ($input.type === 'checkbox' || $input.type === 'radio') {
+        return $candidateLegend
+      }
+
+      // For other input types, only scroll to the fieldset’s legend (instead of
+      // the label associated with the input) if the input would end up in the
+      // top half of the screen.
+      //
+      // This should avoid situations where the input either ends up off the
+      // screen, or obscured by a software keyboard.
+      var legendTop = $candidateLegend.getBoundingClientRect().top;
+      var inputRect = $input.getBoundingClientRect();
+
+      // If the browser doesn't support Element.getBoundingClientRect().height
+      // or window.innerHeight (like IE8), bail and just link to the label.
+      if (inputRect.height && window.innerHeight) {
+        var inputBottom = inputRect.top + inputRect.height;
+
+        if (inputBottom - legendTop < window.innerHeight / 2) {
+          return $candidateLegend
+        }
+      }
     }
   }
 

package/govuk/components/header/_header.scss

@@ -42,6 +42,7 @@
   }
 
   .govuk-header__logotype {
+    display: inline-block;
     margin-right: govuk-spacing(1);
   }
 

package/govuk/components/header/template.njk

@@ -60,7 +60,7 @@
     </a>
     {% endif %}
     {% if params.navigation %}
-    <button type="button" role="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
+    <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
     <nav>
       <ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="Top Level Navigation">
         {% for item in params.navigation %}

package/govuk/components/input/_input.scss

@@ -13,6 +13,9 @@
     box-sizing: border-box;
     width: 100%;
     height: 40px;
+    @if $govuk-typography-use-rem {
+      height: govuk-px-to-rem(40px);
+    }
     margin-top: 0;
 
     padding: govuk-spacing(1);

package/govuk/components/radios/template.njk

@@ -13,7 +13,7 @@
 
 {% set isConditional = false %}
 {% for item in params.items %}
-  {% if item.conditional %}
+  {% if item.conditional.html %}
     {% set isConditional = true %}
   {% endif %}
 {% endfor %}
@@ -69,7 +69,7 @@
           <input class="govuk-radios__input" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
           {{-" checked" if item.checked }}
           {{-" disabled" if item.disabled }}
-          {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
+          {%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
           {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
           {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
           {{ govukLabel({
@@ -89,7 +89,7 @@
           }) | indent(6) | trim }}
           {% endif %}
         </div>
-        {% if item.conditional %}
+        {% if item.conditional.html %}
           <div class="govuk-radios__conditional{% if not item.checked %} govuk-radios__conditional--hidden{% endif %}" id="{{ conditionalId }}">
             {{ item.conditional.html | safe }}
           </div>

package/govuk/components/select/_select.scss

@@ -13,6 +13,9 @@
     box-sizing: border-box; // should this be global?
     max-width: 100%;
     height: 40px;
+    @if $govuk-typography-use-rem {
+      height: govuk-px-to-rem(40px);
+    }
     padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
 

package/govuk/components/warning-text/_warning-text.scss

@@ -5,9 +5,6 @@
 @include govuk-exports("govuk/component/warning-text") {
 
   .govuk-warning-text {
-    @include govuk-font($size: 19);
-    @include govuk-text-colour;
-
     position: relative;
     @include govuk-responsive-margin(6, "bottom");
     padding: govuk-spacing(2) 0;
@@ -23,13 +20,15 @@
     display: inline-block;
 
     position: absolute;
-    top: 50%;
     left: 0;
 
-    min-width: 32px;
+    min-width: 29px;
     min-height: 29px;
-    margin-top: -20px; // Half the height of the circle (adjusted for NTA)
-    padding-top: 3px;
+    margin-top: -7px;
+
+    @include govuk-media-query($from: tablet) {
+      margin-top: -5px;
+    }
 
     // When a user customises their colours the background colour will often be removed.
     // Adding a border to the component keeps it's shape as a circle.
@@ -39,7 +38,7 @@
     color: govuk-colour("white");
     background: govuk-colour("black");
 
-    font-size: 1.6em;
+    font-size: 30px;
     line-height: 29px;
 
     text-align: center;
@@ -53,7 +52,9 @@
   }
 
   .govuk-warning-text__text {
+    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-text-colour;
     display: block;
-    padding-left: 50px;
+    padding-left: 45px;
   }
 }

package/govuk/overrides/_display.scss

@@ -15,4 +15,8 @@
   .govuk-\!-display-block {
     display: block !important;
   }
+
+  .govuk-\!-display-none {
+    display: none !important;
+  }
 }

package/govuk/template.njk

@@ -7,7 +7,7 @@
 <html lang="{{ htmlLang | default('en') }}" class="govuk-template {{ htmlClasses }}">
   <head>
     <meta charset="utf-8" />
-    <title>{% block pageTitle %}GOV.UK - The best place to find government services and information{% endblock %}</title>
+    <title{% if pageTitleLang %} lang="{{ pageTitleLang }}"{% endif %}>{% block pageTitle %}GOV.UK - The best place to find government services and information{% endblock %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <meta name="theme-color" content="{{ themeColor | default('#0b0c0c') }}" /> {# Hardcoded value of $govuk-black #}
     {# Ensure that older IE versions always render with the correct rendering engine #}
@@ -45,7 +45,7 @@
     {% block main %}
       <div class="govuk-width-container">
         {% block beforeContent %}{% endblock %}
-        <main class="govuk-main-wrapper {{ mainClasses }}" id="main-content" role="main">
+        <main class="govuk-main-wrapper {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
           {% block content %}{% endblock %}
         </main>
       </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "govuk-frontend",
   "description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "main": "govuk/all.js",
   "sass": "govuk/all.scss",
   "engines": {