@ministryofjustice/frontend 1.3.1 → 1.4.1

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>');
   }
 };
 

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}}" id="pagination-label">
-
-  <p class="govuk-visually-hidden" aria-labelledby="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/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.1",
+  "version": "1.4.1",
   "main": "moj/all.js",
   "sass": "moj/all.scss",
   "engines": {