Merge pull request alphagov#2032 from alphagov/release-3.10.0

Release v3.10.0
lhokktyn · Nov 23, 2020 · 0ec483f · 0ec483f
2 parents 0ac715b + 0c06c30
commit 0ec483f
Show file tree

Hide file tree

Showing 56 changed files with 1,503 additions and 264 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,7 +14,7 @@ This was added in [pull request #1935: Create notification banner component](htt
 
 #### Customise input mode in the date component
 
-You can now change which keyboard type displays for mobile and tablet users. This enables users to enter characters other than numbers when they use the date input. To change the keyboard type, set the `inputmode` when you use the Nunjucks macro options.```
+You can now change which keyboard type displays for mobile and tablet users. This enables users to enter characters other than numbers when they use the date input. To change the keyboard type, set the `inputmode` when you use the Nunjucks macro options.
 
 This was added in [pull request #1975: Enable custom inputmode for date input component](https://github.com/alphagov/govuk-frontend/pull/1975). Thanks to [@foaly-nr1](https://github.com/foaly-nr1) for contributing this issue.
 

diff --git a/dist/VERSION.txt b/dist/VERSION.txt
@@ -1 +1 @@
-3.9.1
+3.10.0
diff --git a/dist/govuk-frontend-3.10.0.min.css b/dist/govuk-frontend-3.10.0.min.css
diff --git a/dist/govuk-frontend-3.9.1.min.js → dist/govuk-frontend-3.10.0.min.js b/dist/govuk-frontend-3.9.1.min.js → dist/govuk-frontend-3.10.0.min.js
diff --git a/dist/govuk-frontend-3.9.1.min.css b/dist/govuk-frontend-3.9.1.min.css
diff --git a/dist/govuk-frontend-ie8-3.9.1.min.css → dist/govuk-frontend-ie8-3.10.0.min.css b/dist/govuk-frontend-ie8-3.9.1.min.css → dist/govuk-frontend-ie8-3.10.0.min.css
diff --git a/package/govuk/all.js b/package/govuk/all.js
@@ -1959,6 +1959,58 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
     $input.closest('label')
 };
 
+function NotificationBanner ($module) {
+  this.$module = $module;
+}
+
+/**
+ * Initialise the component
+ */
+NotificationBanner.prototype.init = function () {
+  var $module = this.$module;
+  // Check for module
+  if (!$module) {
+    return
+  }
+
+  this.setFocus();
+};
+
+/**
+ * Focus the element
+ *
+ * If `role="alert"` is set, focus the element to help some assistive technologies
+ * prioritise announcing it.
+ *
+ * You can turn off the auto-focus functionality by setting `data-disable-auto-focus="true"` in the
+ * component HTML. You might wish to do this based on user research findings, or to avoid a clash
+ * with another element which should be focused when the page loads.
+ */
+NotificationBanner.prototype.setFocus = function () {
+  var $module = this.$module;
+
+  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+    return
+  }
+
+  if ($module.getAttribute('role') !== 'alert') {
+    return
+  }
+
+  // Set tabindex to -1 to make the element focusable with JavaScript.
+  // Remove the tabindex on blur as the component doesn't need to be focusable after the page has
+  // loaded.
+  if (!$module.getAttribute('tabindex')) {
+    $module.setAttribute('tabindex', '-1');
+
+    $module.addEventListener('blur', function () {
+      $module.removeAttribute('tabindex');
+    });
+  }
+
+  $module.focus();
+};
+
 function Header ($module) {
   this.$module = $module;
   this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle');
@@ -2476,6 +2528,11 @@ function initAll (options) {
   var $toggleButton = scope.querySelector('[data-module="govuk-header"]');
   new Header($toggleButton).init();
 
+  var $notificationBanners = scope.querySelectorAll('[data-module="govuk-notification-banner"]');
+  nodeListForEach($notificationBanners, function ($notificationBanner) {
+    new NotificationBanner($notificationBanner).init();
+  });
+
   var $radios = scope.querySelectorAll('[data-module="govuk-radios"]');
   nodeListForEach($radios, function ($radio) {
     new Radios($radio).init();

diff --git a/package/govuk/components/_all.scss b/package/govuk/components/_all.scss
@@ -19,6 +19,7 @@
 @import "input/index";
 @import "inset-text/index";
 @import "label/index";
+@import "notification-banner/index";
 @import "panel/index";
 @import "phase-banner/index";
 @import "tabs/index";

diff --git a/package/govuk/components/accordion/fixtures.json b/package/govuk/components/accordion/fixtures.json
@@ -138,6 +138,7 @@
         {
             "name": "classes",
             "options": {
+                "id": "accordion-classes",
                 "classes": "myClass",
                 "items": [
                     {
@@ -150,11 +151,12 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-accordion myClass\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion myClass\" data-module=\"govuk-accordion\" id=\"accordion-classes\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-classes-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-classes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-classes-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
         },
         {
             "name": "attributes",
             "options": {
+                "id": "accordion-attributes",
                 "attributes": {
                     "data-attribute": "value"
                 },
@@ -169,11 +171,12 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\" data-attribute=\"value\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-attributes\" data-attribute=\"value\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-attributes-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-attributes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-attributes-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
         },
         {
             "name": "custom heading level",
             "options": {
+                "id": "accordion-heading",
                 "headingLevel": 3,
                 "items": [
                     {
@@ -186,11 +189,12 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h3 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h3>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h3 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-heading-1\">\n              Section A\n            </span>\n          </h3>\n          \n        </div>\n        <div id=\"accordion-heading-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
         },
         {
             "name": "heading html",
             "options": {
+                "id": "accordion-heading-html",
                 "items": [
                     {
                         "heading": {
@@ -202,11 +206,12 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              <span class=\"myClass\">Section A</span>\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading-html\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-html-heading-1\">\n              <span class=\"myClass\">Section A</span>\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-heading-html-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-html-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
         },
         {
             "name": "with falsey values",
             "options": {
+                "id": "accordion-falsey",
                 "items": [
                     {
                         "heading": {
@@ -229,7 +234,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n    \n  \n    \n  \n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-5\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-5\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-5\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-falsey\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-falsey-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n    \n  \n    \n  \n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-5\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-falsey-content-5\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-heading-5\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
         }
     ]
 }
diff --git a/package/govuk/components/back-link/macro-options.json b/package/govuk/components/back-link/macro-options.json
@@ -2,14 +2,14 @@
     {
         "name": "text",
         "type": "string",
-        "required": true,
-        "description": "If `html` is set, this is not required. Text to use within the back link component. If `html` is provided, the `text` argument will be ignored."
+        "required": false,
+        "description": "Text to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to \"Back\"."
     },
     {
         "name": "html",
         "type": "string",
-        "required": true,
-        "description": "If `text` is set, this is not required. HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored."
+        "required": false,
+        "description": "HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to \"Back\"."
     },
     {
         "name": "href",

diff --git a/package/govuk/components/breadcrumbs/fixtures.json b/package/govuk/components/breadcrumbs/fixtures.json
@@ -112,19 +112,29 @@
         {
             "name": "classes",
             "options": {
-                "classes": "app-breadcrumbs--custom-modifier"
+                "classes": "app-breadcrumbs--custom-modifier",
+                "items": [
+                    {
+                        "text": "Home"
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-breadcrumbs app-breadcrumbs--custom-modifier\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n  </ol>\n</div>"
+            "html": "<div class=\"govuk-breadcrumbs app-breadcrumbs--custom-modifier\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n    \n  \n  </ol>\n</div>"
         },
         {
             "name": "attributes",
             "options": {
                 "attributes": {
                     "id": "my-navigation",
                     "role": "navigation"
-                }
+                },
+                "items": [
+                    {
+                        "text": "Home"
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \" id=\"my-navigation\" role=\"navigation\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n  </ol>\n</div>"
+            "html": "<div class=\"govuk-breadcrumbs \" id=\"my-navigation\" role=\"navigation\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n    \n  \n  </ol>\n</div>"
         },
         {
             "name": "item attributes",

diff --git a/package/govuk/components/breadcrumbs/macro-options.json b/package/govuk/components/breadcrumbs/macro-options.json
@@ -26,6 +26,7 @@
             {
                 "name": "attributes",
                 "type": "object",
+                "required": false,
                 "description": "HTML attributes (for example data attributes) to add to the individual crumb."
             }
         ]