@ministryofjustice/frontend 1.3.2 → 1.4.2

package/moj/all.js

@@ -711,11 +711,11 @@ if(MOJFrontend.dragAndDropSupported() && MOJFrontend.formDataSupported() && MOJF
   MOJFrontend.MultiFileUpload.prototype.getFileRowHtml = function(file) {
     var html = '';
     html += '<div class="govuk-summary-list__row moj-multi-file-upload__row">';
-    html += '  <dd class="govuk-summary-list__value moj-multi-file-upload__message">';
+    html += '  <div class="govuk-summary-list__value moj-multi-file-upload__message">';
     html +=       '<span class="moj-multi-file-upload__filename">'+file.name+'</span>';
     html +=       '<span class="moj-multi-file-upload__progress">0%</span>';
-    html += '  </dd>';
-    html += '  <dd class="govuk-summary-list__actions moj-multi-file-upload__actions"></dd>';
+    html += '  </div>';
+    html += '  <div class="govuk-summary-list__actions moj-multi-file-upload__actions"></div>';
     html += '</div>';
     return html;
   };
@@ -874,7 +874,7 @@ MOJFrontend.PasswordReveal = function(element) {
 };
 
 MOJFrontend.PasswordReveal.prototype.createButton = function() {
-  this.button = $('<button type="button" class="govuk-button govuk-button--secondary moj-password-reveal__button">Show</button>');
+  this.button = $('<button type="button" class="govuk-button govuk-button--secondary moj-password-reveal__button">Show <span class="govuk-visually-hidden">password</span></button>');
   this.container.append(this.button);
   this.button.on('click', $.proxy(this, 'onButtonClick'));
 };
@@ -882,10 +882,10 @@ MOJFrontend.PasswordReveal.prototype.createButton = function() {
 MOJFrontend.PasswordReveal.prototype.onButtonClick = function() {
   if (this.el.type === 'password') {
     this.el.type = 'text';
-    this.button.text('Hide');
+    this.button.html('Hide <span class="govuk-visually-hidden">password</span>');
   } else {
     this.el.type = 'password';
-    this.button.text('Show');
+    this.button.html('Show <span class="govuk-visually-hidden">password</span>');
   }
 };
 
@@ -1038,7 +1038,9 @@ MOJFrontend.SearchToggle = function(options) {
 
   this.options.search.container.data('moj-search-toggle-initialised', true);
 
-  this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">'+this.options.toggleButton.text+'</button>');
+  const svg = '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="moj-search-toggle__button__icon"><path d="M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z"></path></svg>';
+
+  this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">' + this.options.toggleButton.text + svg + '</button>');
 	this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick'));
   this.options.toggleButton.container.append(this.toggleButton);
 };

package/moj/components/banner/template.njk

@@ -1,4 +1,4 @@
-<div class="moj-banner{% if params.type == 'success' %} moj-banner--success{% elif params.type == 'warning' %} moj-banner--warning{% else %} {{- ' ' + params.classes if params.classes}}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-banner{% if params.type == 'success' %} moj-banner--success{% elif params.type == 'warning' %} moj-banner--warning{% else %} {{- ' ' + params.classes if params.classes}}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} role="region" aria-label="{{ params.iconFallbackText | default(params.type) | default("banner") }}">
 
   {% if params.type == 'success' %}
     <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"/></svg>
@@ -10,10 +10,7 @@
   {% endif %}
 
   <div class="moj-banner__message">
-    {% if params.iconFallbackText %}<span class="moj-banner__assistive">{{params.iconFallbackText}}</span>{% endif %}
     {{- params.html | safe if params.html else params.text -}}
   </div>
 
 </div>
-
-

package/moj/components/multi-file-upload/multi-file-upload.js

@@ -99,11 +99,11 @@ if(MOJFrontend.dragAndDropSupported() && MOJFrontend.formDataSupported() && MOJF
   MOJFrontend.MultiFileUpload.prototype.getFileRowHtml = function(file) {
     var html = '';
     html += '<div class="govuk-summary-list__row moj-multi-file-upload__row">';
-    html += '  <dd class="govuk-summary-list__value moj-multi-file-upload__message">';
+    html += '  <div class="govuk-summary-list__value moj-multi-file-upload__message">';
     html +=       '<span class="moj-multi-file-upload__filename">'+file.name+'</span>';
     html +=       '<span class="moj-multi-file-upload__progress">0%</span>';
-    html += '  </dd>';
-    html += '  <dd class="govuk-summary-list__actions moj-multi-file-upload__actions"></dd>';
+    html += '  </div>';
+    html += '  <div class="govuk-summary-list__actions moj-multi-file-upload__actions"></div>';
     html += '</div>';
     return html;
   };

package/moj/components/pagination/template.njk

@@ -1,29 +1,27 @@
-<nav class="moj-pagination {{- ' ' + params.classes if params.classes}}" aria-labelledby="pagination-label">
-
-  <p class="govuk-visually-hidden" id="pagination-label">Pagination navigation</p>
+<nav class="moj-pagination {{- ' ' + params.classes if params.classes}}" aria-label="Pagination navigation">
 
   <ul class="moj-pagination__list">
     {%- if params.previous %}
       <li class="moj-pagination__item  moj-pagination__item--prev">
-        <a class="moj-pagination__link" href="{{ params.previous.href }}">{{ params.previous.text }}<span class="govuk-visually-hidden"> set of pages</span></a>
+        <a class="moj-pagination__link" href="{{ params.previous.href }}">{{ params.previous.text }}<span class="govuk-visually-hidden"> page</span></a>
       </li>
     {% endif -%}
 
     {%- for item in params.items %}
       {%- if item.type == 'dots' %}
-        <li class="moj-pagination__item moj-pagination__item--dots">...</li>
+        <li class="moj-pagination__item moj-pagination__item--dots">…</li>
       {% else %}
         {%- if item.selected %}
-          <li class="moj-pagination__item moj-pagination__item--active">{{ item.text }}</li>
+          <li class="moj-pagination__item moj-pagination__item--active" aria-label="Page {{ item.text }} of {{ params.results.count }}" aria-current="page">{{ item.text }}</li>
         {% else %}
-          <li class="moj-pagination__item"><a class="moj-pagination__link" href="{{ item.href }}">{{ item.text }}</a></li>
+          <li class="moj-pagination__item"><a class="moj-pagination__link" href="{{ item.href }}" aria-label="Page {{ item.text }} of {{ params.results.count }}">{{ item.text }}</a></li>
         {% endif -%}
       {% endif -%}
     {% endfor -%}
 
     {%- if params.next %}
       <li class="moj-pagination__item  moj-pagination__item--next">
-        <a class="moj-pagination__link" href="{{ params.next.href }}">{{ params.next.text }}<span class="govuk-visually-hidden"> set of pages</span></a>
+        <a class="moj-pagination__link" href="{{ params.next.href }}">{{ params.next.text }}<span class="govuk-visually-hidden"> page</span></a>
       </li>
     {% endif -%}
   </ul>

package/moj/components/password-reveal/password-reveal.js

@@ -14,7 +14,7 @@ MOJFrontend.PasswordReveal = function(element) {
 };
 
 MOJFrontend.PasswordReveal.prototype.createButton = function() {
-  this.button = $('<button type="button" class="govuk-button govuk-button--secondary moj-password-reveal__button">Show</button>');
+  this.button = $('<button type="button" class="govuk-button govuk-button--secondary moj-password-reveal__button">Show <span class="govuk-visually-hidden">password</span></button>');
   this.container.append(this.button);
   this.button.on('click', $.proxy(this, 'onButtonClick'));
 };
@@ -22,9 +22,9 @@ MOJFrontend.PasswordReveal.prototype.createButton = function() {
 MOJFrontend.PasswordReveal.prototype.onButtonClick = function() {
   if (this.el.type === 'password') {
     this.el.type = 'text';
-    this.button.text('Hide');
+    this.button.html('Hide <span class="govuk-visually-hidden">password</span>');
   } else {
     this.el.type = 'password';
-    this.button.text('Show');
+    this.button.html('Show <span class="govuk-visually-hidden">password</span>');
   }
 };

package/moj/components/search-toggle/search-toggle.js

@@ -7,7 +7,9 @@ MOJFrontend.SearchToggle = function(options) {
 
   this.options.search.container.data('moj-search-toggle-initialised', true);
 
-  this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">'+this.options.toggleButton.text+'</button>');
+  const svg = '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="moj-search-toggle__button__icon"><path d="M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z"></path></svg>';
+
+  this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">' + this.options.toggleButton.text + svg + '</button>');
 	this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick'));
   this.options.toggleButton.container.append(this.toggleButton);
 };

package/moj/components/search-toggle/search-toggle.scss

@@ -12,15 +12,17 @@
   -webkit-font-smoothing: antialiased;
   -webkit-appearance: none;
 
-  &:after {
-    background-repeat: no-repeat;
-    background-image: url(#{$moj-images-path}icon-search-blue.svg);
-    content: '';
+  &__icon {
     display: inline-block;
     height: 20px;
     margin-left: govuk-spacing(2);
     vertical-align: middle;
     width: 20px;
+    fill: currentColor;
+
+    @media screen and (forced-colors: active) {
+      fill: windowText;
+    }
   }
 
   &:focus {
@@ -30,43 +32,30 @@
     outline: none;
     position: relative;
     z-index: 1;
-
-    &:after {
-      background-image: url(#{$moj-images-path}icon-search-black.svg);
-    }
   }
-
 }
 
-
 .moj-search--toggle {
-
   padding: govuk-spacing(3);
 
   @include govuk-media-query($until: desktop) {
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
-
 }
 
-
 // JS enabled
 .js-enabled .moj-search--toggle {
-
   @include govuk-media-query($until: desktop) {
     padding-top: 0 !important;
   }
-
 }
 
 .js-enabled .moj-search-toggle {
   position: relative;
 }
 
-
 .js-enabled .moj-search-toggle__search {
-
   background-color: govuk-colour("light-grey");
 
   @include govuk-media-query($from: desktop) {
@@ -77,5 +66,4 @@
     width: 450px;
     z-index: 10;
   }
-
 }

package/moj/components/timeline/_timeline.scss

@@ -85,6 +85,17 @@
 
 }
 
+.moj-timeline__document-icon {
+  float: left;
+  margin-top: 4px;
+  margin-right: 4px;
+  fill: currentColor;
+
+  @media screen and (forced-colors: active) {
+    fill: linkText;
+  }
+}
+
 .moj-timeline__document-link {
   background-image: url(#{$moj-images-path}icon-document.svg);
   background-repeat: no-repeat;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ministryofjustice/frontend",
   "description": "The MOJ Frontend contains the code you need to start building user interfaces for UK Ministry of Justice government services.",
-  "version": "1.3.2",
+  "version": "1.4.2",
   "main": "moj/all.js",
   "sass": "moj/all.scss",
   "engines": {