govuk_publishing_components 17.21.0 → 18.0.0

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

@@ -49,6 +49,12 @@
             }
         ]
     },
+    {
+        "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}/select/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}/skip-link/_skip-link.scss

@@ -5,7 +5,7 @@
 @include govuk-exports("govuk/component/skip-link") {
   .govuk-skip-link {
     @include govuk-visually-hidden-focusable;
-    @include govuk-link-common;
+    @include govuk-typography-common;
     @include govuk-link-style-text;
     @include govuk-typography-responsive($size: 16);
 
@@ -22,5 +22,10 @@
       padding-right: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-right})");
       padding-left: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-left})");
     }
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      background-color: $govuk-focus-colour;
+    }
   }
 }

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

@@ -80,7 +80,13 @@
                         "name": "classes",
                         "type": "string",
                         "required": false,
-                        "description": "Classes to add to the action item"
+                        "description": "Classes to add to the action item."
+                    },
+                    {
+                        "name": "attributes",
+                        "type": "object",
+                        "required": false,
+                        "description": "HTML attributes (for example data attributes) to add to the action item."
                     }
                 ]
             }

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

@@ -1,5 +1,5 @@
 {%- macro _actionLink(action) %}
-  <a class="govuk-link {%- if action.classes %} {{ action.classes }}{% endif %}" href="{{ action.href }}">
+  <a class="govuk-link {%- if action.classes %} {{ action.classes }}{% endif %}" href="{{ action.href }}" {%- for attribute, value in action.attributes %} {{attribute}}="{{value}}"{% endfor %}>
     {{ action.html | safe if action.html else action.text }}
     {%- if action.visuallyHiddenText -%}
       <span class="govuk-visually-hidden"> {{ action.visuallyHiddenText }}</span>

data/node_modules/govuk-frontend/{components → govuk/components}/table/_table.scss

@@ -22,6 +22,7 @@
     padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
     border-bottom: 1px solid $govuk-border-colour;
     text-align: left;
+    vertical-align: top;
     // GOV.UK Elements sets the font-size and line-height for all headers and cells
     // in tables.
     @include govuk-compatibility(govuk_elements) {

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

@@ -8,11 +8,11 @@
   <thead class="govuk-table__head">
     <tr class="govuk-table__row">
     {% for item in params.head %}
-      <th class="govuk-table__header
+      <th scope="col" class="govuk-table__header
       {%- if item.format %} govuk-table__header--{{ item.format }}{% endif %}
       {%- if item.classes %} {{ item.classes }}{% endif %}"
       {%- if item.colspan %} colspan="{{ item.colspan }}"{% endif %}
-      {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %}{% for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %} scope="col">{{ item.html |safe if item.html else item.text }}</th>
+      {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %}{% for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ item.html |safe if item.html else item.text }}</th>
     {% endfor %}
     </tr>
   </thead>
@@ -21,20 +21,20 @@
     {% for row in params.rows %}
     <tr class="govuk-table__row">
     {% for cell in row %}
+      {% set commonAttributes %}
+        {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
+        {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
+      {% endset %}
       {% if loop.first and params.firstCellIsHeader %}
-      <th class="govuk-table__header" scope="row">{{ cell.html | safe if cell.html else cell.text }}</th>
-      {% elseif loop.first %}
-      <td class="govuk-table__cell
-      {%- if cell.format %} govuk-table__cell--{{ cell.format }}{% endif %}
-      {%- if cell.classes %} {{ cell.classes }}{% endif %}"
-      {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
-      {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ cell.html | safe if cell.html else cell.text }}</td>
+      <th scope="row" class="govuk-table__header{%- if cell.classes %} {{ cell.classes }}{% endif %}"
+        {{- commonAttributes | safe -}}
+      >{{ cell.html | safe if cell.html else cell.text }}</th>
       {% else %}
-      <td class="govuk-table__cell 
-      {%- if cell.format %} govuk-table__cell--{{ cell.format }}{% endif %}
-      {%- if cell.classes %} {{ cell.classes }}{% endif %}"
-      {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
-      {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ cell.html | safe if cell.html else cell.text }}</td>
+      <td class="govuk-table__cell
+        {%- if cell.format %} govuk-table__cell--{{ cell.format }}{% endif %}
+        {%- if cell.classes %} {{ cell.classes }}{% endif %}"
+        {{- commonAttributes | safe -}}
+      >{{ cell.html | safe if cell.html else cell.text }}</td>
       {% endif %}
     {% endfor %}
     </tr>

data/node_modules/govuk-frontend/govuk/components/tabs/_tabs.scss

@@ -0,0 +1,142 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/tabs") {
+
+  .govuk-tabs {
+    @include govuk-responsive-margin(1, "top");
+    @include govuk-responsive-margin(6, "bottom");
+  }
+
+  .govuk-tabs__title {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-tabs__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    @include govuk-responsive-margin(6, "bottom");
+  }
+
+  .govuk-tabs__list-item {
+    @include govuk-font($size: 19);
+    margin-left: govuk-spacing(5);
+
+    &::before {
+      @include govuk-text-colour;
+      content: "\2014 "; // "— "
+      margin-left: - govuk-spacing(5);
+      padding-right: govuk-spacing(1);
+    }
+  }
+
+  .govuk-tabs__tab {
+    @include govuk-link-style-default;
+
+    display: inline-block;
+    margin-bottom: govuk-spacing(2);
+
+    // Focus state for mobile and when JavaScript is disabled
+    // It is removed for JS-enabled desktop styles
+    &:focus {
+      @include govuk-focused-text;
+    }
+  }
+
+  .govuk-tabs__panel {
+    @include govuk-responsive-margin(8, "bottom");
+  }
+
+  // JavaScript enabled
+  .js-enabled {
+
+    @include govuk-media-query($from: tablet) {
+
+      .govuk-tabs__list {
+        @include govuk-clearfix;
+        margin-bottom: 0;
+        border-bottom: 1px solid $govuk-border-colour;
+      }
+
+      .govuk-tabs__title {
+        display: none;
+      }
+
+      .govuk-tabs__list-item {
+        position: relative;
+
+        margin-right: govuk-spacing(1);
+        margin-bottom: 0;
+        margin-left: 0;
+        padding: govuk-spacing(2) govuk-spacing(4);
+
+        float: left;
+        background-color: govuk-colour("light-grey", $legacy: "grey-4");
+        text-align: center;
+
+        &::before {
+          content: none;
+        }
+      }
+
+      .govuk-tabs__list-item--selected {
+        $border-width: 1px;
+
+        position: relative;
+
+        margin-top: - govuk-spacing(1);
+
+        // Compensation for border (otherwise we get a shift)
+        margin-bottom: -$border-width;
+        padding-top: govuk-spacing(3) - $border-width;
+        padding-right: govuk-spacing(4) - $border-width;
+        padding-bottom: govuk-spacing(3) + $border-width;
+        padding-left: govuk-spacing(4) - $border-width;
+
+        border: $border-width solid $govuk-border-colour;
+        border-bottom: 0;
+
+        background-color: $govuk-body-background-colour;
+
+        .govuk-tabs__tab {
+          text-decoration: none;
+        }
+      }
+
+      .govuk-tabs__tab {
+        @include govuk-link-style-text;
+
+        margin-bottom: 0;
+
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+        }
+      }
+
+      .govuk-tabs__panel {
+        @include govuk-responsive-margin(0, "bottom");
+        padding: govuk-spacing(6) govuk-spacing(4);
+        border: 1px solid $govuk-border-colour;
+        border-top: 0;
+
+        & > :last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .govuk-tabs__panel--hidden {
+        display: none;
+      }
+    }
+
+  }
+}

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

@@ -744,6 +744,54 @@ if (detect) return
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
+(function(undefined) {
+
+    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b09a5d2acf3314b46a6c8f8d0c31b85c
+    var detect = (
+      'Element' in this && "nextElementSibling" in document.documentElement
+    );
+
+    if (detect) return
+
+
+    (function (global) {
+
+      // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-404b69b4750d18dea4174930a49170fd
+      Object.defineProperty(Element.prototype, "nextElementSibling", {
+        get: function(){
+          var el = this.nextSibling;
+          while (el && el.nodeType !== 1) { el = el.nextSibling; }
+          return (el.nodeType === 1) ? el : null;
+        }
+      });
+
+    }(this));
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+(function(undefined) {
+
+    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-a162235fbc9c0dd40d4032265f44942e
+    var detect = (
+      'Element' in this && 'previousElementSibling' in document.documentElement
+    );
+
+    if (detect) return
+
+    (function (global) {
+      // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b45a1197b842728cb76b624b6ba7d739
+      Object.defineProperty(Element.prototype, 'previousElementSibling', {
+        get: function(){
+          var el = this.previousSibling;
+          while (el && el.nodeType !== 1) { el = el.previousSibling; }
+          return (el.nodeType === 1) ? el : null;
+        }
+      });
+
+    }(this));
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
 (function(undefined) {
 
 // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js
@@ -1169,6 +1217,7 @@ Tabs.prototype.setAttributes = function ($tab) {
   $tab.setAttribute('id', 'tab_' + panelId);
   $tab.setAttribute('role', 'tab');
   $tab.setAttribute('aria-controls', panelId);
+  $tab.setAttribute('aria-selected', 'false');
   $tab.setAttribute('tabindex', '-1');
 
   // set panel attributes
@@ -1183,6 +1232,7 @@ Tabs.prototype.unsetAttributes = function ($tab) {
   $tab.removeAttribute('id');
   $tab.removeAttribute('role');
   $tab.removeAttribute('aria-controls');
+  $tab.removeAttribute('aria-selected');
   $tab.removeAttribute('tabindex');
 
   // unset panel attributes
@@ -1193,6 +1243,10 @@ Tabs.prototype.unsetAttributes = function ($tab) {
 };
 
 Tabs.prototype.onTabClick = function (e) {
+  if (!e.target.classList.contains('govuk-tabs__tab')) {
+  // Allow events on child DOM elements to bubble up to tab parent
+    return false
+  }
   e.preventDefault();
   var $newTab = e.target;
   var $currentTab = this.getCurrentTab();
@@ -1232,7 +1286,7 @@ Tabs.prototype.activateNextTab = function () {
   var currentTab = this.getCurrentTab();
   var nextTabListItem = currentTab.parentNode.nextElementSibling;
   if (nextTabListItem) {
-    var nextTab = nextTabListItem.firstElementChild;
+    var nextTab = nextTabListItem.querySelector('.govuk-tabs__tab');
   }
   if (nextTab) {
     this.hideTab(currentTab);
@@ -1246,7 +1300,7 @@ Tabs.prototype.activatePreviousTab = function () {
   var currentTab = this.getCurrentTab();
   var previousTabListItem = currentTab.parentNode.previousElementSibling;
   if (previousTabListItem) {
-    var previousTab = previousTabListItem.firstElementChild;
+    var previousTab = previousTabListItem.querySelector('.govuk-tabs__tab');
   }
   if (previousTab) {
     this.hideTab(currentTab);
@@ -1273,18 +1327,18 @@ Tabs.prototype.hidePanel = function (tab) {
 
 Tabs.prototype.unhighlightTab = function ($tab) {
   $tab.setAttribute('aria-selected', 'false');
-  $tab.classList.remove('govuk-tabs__tab--selected');
+  $tab.parentNode.classList.remove('govuk-tabs__list-item--selected');
   $tab.setAttribute('tabindex', '-1');
 };
 
 Tabs.prototype.highlightTab = function ($tab) {
   $tab.setAttribute('aria-selected', 'true');
-  $tab.classList.add('govuk-tabs__tab--selected');
+  $tab.parentNode.classList.add('govuk-tabs__list-item--selected');
   $tab.setAttribute('tabindex', '0');
 };
 
 Tabs.prototype.getCurrentTab = function () {
-  return this.$module.querySelector('.govuk-tabs__tab--selected')
+  return this.$module.querySelector('.govuk-tabs__list-item--selected .govuk-tabs__tab')
 };
 
 // this is because IE doesn't always return the actual value but a relative full path

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

@@ -1,18 +1,17 @@
 {#- If an id 'prefix' is not passed, fall back to using the name attribute
    instead. We need this for error messages and hints as well -#}
-{% set idPrefix = params.idPrefix if params.idPrefix %}
+{% set idPrefix = params.idPrefix if params.idPrefix -%}
 
-<div {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-tabs {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} data-module="tabs">
+<div {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-tabs {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} data-module="govuk-tabs">
   <h2 class="govuk-tabs__title">
     {{ params.title | default ("Contents") }}
   </h2>
-
   {% if(params.items) %}
   <ul class="govuk-tabs__list">
     {% for item in params.items %}
     {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
-      <li class="govuk-tabs__list-item">
-        <a class="govuk-tabs__tab{% if loop.index == 1 %} govuk-tabs__tab--selected{% endif %}" href="#{{ id }}"
+      <li class="govuk-tabs__list-item{% if loop.index == 1 %} govuk-tabs__list-item--selected{% endif %}">
+        <a class="govuk-tabs__tab" href="#{{ id }}"
            {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
           {{ item.label }}
         </a>
@@ -20,7 +19,6 @@
     {% endfor %}
   </ul>
   {% endif %}
-
   {% for item in params.items %}
   {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
   <section class="govuk-tabs__panel{% if loop.index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>