hmrc-frontend 5.1.0 → 5.2.0

package/hmrc/VERSION.txt

@@ -1 +1 @@
-5.1.0
+5.2.0

package/hmrc/all.js

@@ -2757,10 +2757,9 @@
   function CharacterCount($module) {
     this.$module = $module;
     this.$textarea = $module.querySelector('.hmrc-js-character-count');
-
-    if (this.$textarea) {
-      this.$countMessage = $module.querySelector("[id=\"".concat(this.$textarea.id, "-info\"]"));
-    }
+    this.$visibleCountMessage = null;
+    this.$screenReaderCountMessage = null;
+    this.lastInputTimestamp = null;
   }
 
   CharacterCount.prototype.defaults = {
@@ -2769,18 +2768,35 @@
   }; // Initialize component
 
   CharacterCount.prototype.init = function () {
-    // Check for module
+    // Check that required elements are present
+    if (!this.$textarea) {
+      return;
+    } // Check for module
+
+
     var $module = this.$module;
     var $textarea = this.$textarea;
-    var $countMessage = this.$countMessage;
-
-    if (!$textarea || !$countMessage) {
-      return;
-    } // We move count message right after the field
+    var $fallbackLimitMessage = document.getElementById($textarea.id + '-info'); // Move the fallback count message to be immediately after the textarea
     // Kept for backwards compatibility
 
+    $textarea.insertAdjacentElement('afterend', $fallbackLimitMessage); // Create the *screen reader* specific live-updating counter
+    // This doesn't need any styling classes, as it is never visible
+
+    var $screenReaderCountMessage = document.createElement('div');
+    $screenReaderCountMessage.className = 'hmrc-character-count__sr-status govuk-visually-hidden';
+    $screenReaderCountMessage.setAttribute('aria-live', 'polite');
+    this.$screenReaderCountMessage = $screenReaderCountMessage;
+    $fallbackLimitMessage.insertAdjacentElement('afterend', $screenReaderCountMessage); // Create our live-updating counter element, copying the classes from the
+    // fallback element for backwards compatibility as these may have been configured
 
-    $textarea.insertAdjacentElement('afterend', $countMessage); // Read options set using dataset ('data-' values)
+    var $visibleCountMessage = document.createElement('div');
+    $visibleCountMessage.className = $fallbackLimitMessage.className;
+    $visibleCountMessage.classList.add('hmrc-character-count__status');
+    $visibleCountMessage.setAttribute('aria-hidden', 'true');
+    this.$visibleCountMessage = $visibleCountMessage;
+    $fallbackLimitMessage.insertAdjacentElement('afterend', $visibleCountMessage); // Hide the fallback limit message
+
+    $fallbackLimitMessage.classList.add('govuk-visually-hidden'); // Read options set using dataset ('data-' values)
 
     this.options = this.getDataset($module); // Determine the limit attribute (characters or words)
 
@@ -2798,22 +2814,18 @@
     } // Remove hard limit if set
 
 
-    $module.removeAttribute('maxlength'); // When the page is restored after navigating 'back' in some browsers the
+    $textarea.removeAttribute('maxlength');
+    this.bindChangeEvents(); // When the page is restored after navigating 'back' in some browsers the
     // state of the character count is not restored until *after* the DOMContentLoaded
-    // event is fired, so we need to sync after the pageshow event in browsers
-    // that support it.
+    // event is fired, so we need to manually update it after the pageshow event
+    // in browsers that support it.
 
     if ('onpageshow' in window) {
-      window.addEventListener('pageshow', this.sync.bind(this));
+      window.addEventListener('pageshow', this.updateCountMessage.bind(this));
     } else {
-      window.addEventListener('DOMContentLoaded', this.sync.bind(this));
+      window.addEventListener('DOMContentLoaded', this.updateCountMessage.bind(this));
     }
 
-    this.sync();
-  };
-
-  CharacterCount.prototype.sync = function () {
-    this.bindChangeEvents();
     this.updateCountMessage();
   }; // Read data attributes
 
@@ -2854,7 +2866,7 @@
 
   CharacterCount.prototype.bindChangeEvents = function () {
     var $textarea = this.$textarea;
-    $textarea.addEventListener('keyup', this.checkIfValueChanged.bind(this)); // Bind focus/blur events to start/stop polling
+    $textarea.addEventListener('keyup', this.handleKeyUp.bind(this)); // Bind focus/blur events to start/stop polling
 
     $textarea.addEventListener('focus', this.handleFocus.bind(this));
     $textarea.addEventListener('blur', this.handleBlur.bind(this));
@@ -2870,43 +2882,63 @@
       this.$textarea.oldValue = this.$textarea.value;
       this.updateCountMessage();
     }
-  }; // Update message box
+  }; // Helper function to update both the visible and screen reader-specific
+  // counters simultaneously (e.g. on init)
 
 
   CharacterCount.prototype.updateCountMessage = function () {
-    var countElement = this.$textarea;
-    var options = this.options;
-    var countMessage = this.$countMessage; // Determine the remaining number of characters/words
-
-    var currentLength = this.count(countElement.value);
-    var maxLength = this.maxLength;
-    var remainingNumber = maxLength - currentLength; // Set threshold if presented in options
+    this.updateVisibleCountMessage();
+    this.updateScreenReaderCountMessage();
+  }; // Update visible counter
 
-    var thresholdPercent = options.threshold ? options.threshold : 0;
-    var thresholdValue = maxLength * thresholdPercent / 100;
 
-    if (thresholdValue > currentLength) {
-      countMessage.classList.add('hmrc-character-count__message--disabled'); // Ensure threshold is hidden for users of assistive technologies
+  CharacterCount.prototype.updateVisibleCountMessage = function () {
+    var $textarea = this.$textarea;
+    var $visibleCountMessage = this.$visibleCountMessage;
+    var remainingNumber = this.maxLength - this.count($textarea.value); // If input is over the threshold, remove the disabled class which renders the
+    // counter invisible.
 
-      countMessage.setAttribute('aria-hidden', true);
+    if (this.isOverThreshold()) {
+      $visibleCountMessage.classList.remove('hmrc-character-count__message--disabled');
     } else {
-      countMessage.classList.remove('hmrc-character-count__message--disabled'); // Ensure threshold is visible for users of assistive technologies
-
-      countMessage.removeAttribute('aria-hidden');
+      $visibleCountMessage.classList.add('hmrc-character-count__message--disabled');
     } // Update styles
 
 
     if (remainingNumber < 0) {
-      countElement.classList.add('govuk-textarea--error');
-      countMessage.classList.remove('govuk-hint');
-      countMessage.classList.add('govuk-error-message');
+      $textarea.classList.add('govuk-textarea--error');
+      $visibleCountMessage.classList.remove('govuk-hint');
+      $visibleCountMessage.classList.add('govuk-error-message');
+    } else {
+      $textarea.classList.remove('govuk-textarea--error');
+      $visibleCountMessage.classList.remove('govuk-error-message');
+      $visibleCountMessage.classList.add('govuk-hint');
+    } // Update message
+
+
+    $visibleCountMessage.innerHTML = this.formattedUpdateMessage();
+  }; // Update screen reader-specific counter
+
+
+  CharacterCount.prototype.updateScreenReaderCountMessage = function () {
+    var $screenReaderCountMessage = this.$screenReaderCountMessage; // If over the threshold, remove the aria-hidden attribute, allowing screen
+    // readers to announce the content of the element.
+
+    if (this.isOverThreshold()) {
+      $screenReaderCountMessage.removeAttribute('aria-hidden');
     } else {
-      countElement.classList.remove('govuk-textarea--error');
-      countMessage.classList.remove('govuk-error-message');
-      countMessage.classList.add('govuk-hint');
+      $screenReaderCountMessage.setAttribute('aria-hidden', true);
     } // Update message
 
 
+    $screenReaderCountMessage.innerHTML = this.formattedUpdateMessage();
+  }; // Format update message
+
+
+  CharacterCount.prototype.formattedUpdateMessage = function () {
+    var $textarea = this.$textarea;
+    var options = this.options;
+    var remainingNumber = this.maxLength - this.count($textarea.value);
     var isWelsh = this.options.language === 'cy';
     var charVerb;
     var charNoun;
@@ -2931,12 +2963,41 @@
     }
 
     var displayNumber = Math.abs(remainingNumber);
-    countMessage.innerHTML = charStartMessage + displayNumber + ' ' + charNoun + ' ' + charVerb;
+    return charStartMessage + displayNumber + ' ' + charNoun + ' ' + charVerb;
+  }; // Checks whether the value is over the configured threshold for the input.
+  // If there is no configured threshold, it is set to 0 and this function will
+  // always return true.
+
+
+  CharacterCount.prototype.isOverThreshold = function () {
+    var $textarea = this.$textarea;
+    var options = this.options; // Determine the remaining number of characters/words
+
+    var currentLength = this.count($textarea.value);
+    var maxLength = this.maxLength; // Set threshold if presented in options
+
+    var thresholdPercent = options.threshold ? options.threshold : 0;
+    var thresholdValue = maxLength * thresholdPercent / 100;
+    return thresholdValue <= currentLength;
+  }; // Update the visible character counter and keep track of when the last update
+  // happened for each keypress
+
+
+  CharacterCount.prototype.handleKeyUp = function () {
+    this.updateVisibleCountMessage();
+    this.lastInputTimestamp = Date.now();
   };
 
   CharacterCount.prototype.handleFocus = function () {
-    // Check if value changed on focus
-    this.valueChecker = setInterval(this.checkIfValueChanged.bind(this), 1000);
+    // If the field is focused, and a keyup event hasn't been detected for at
+    // least 1000 ms (1 second), then run the manual change check.
+    // This is so that the update triggered by the manual comparison doesn't
+    // conflict with debounced KeyboardEvent updates.
+    this.valueChecker = setInterval(function () {
+      if (!this.lastInputTimestamp || Date.now() - 500 >= this.lastInputTimestamp) {
+        this.checkIfValueChanged();
+      }
+    }.bind(this), 1000);
   };
 
   CharacterCount.prototype.handleBlur = function () {

package/hmrc/components/character-count/character-count.js

@@ -14,9 +14,9 @@ import 'govuk-frontend/govuk/vendor/polyfills/Element/prototype/classList';
 function CharacterCount($module) {
   this.$module = $module;
   this.$textarea = $module.querySelector('.hmrc-js-character-count');
-  if (this.$textarea) {
-    this.$countMessage = $module.querySelector(`[id="${this.$textarea.id}-info"]`);
-  }
+  this.$visibleCountMessage = null;
+  this.$screenReaderCountMessage = null;
+  this.lastInputTimestamp = null;
 }
 
 CharacterCount.prototype.defaults = {
@@ -26,18 +26,39 @@ CharacterCount.prototype.defaults = {
 
 // Initialize component
 CharacterCount.prototype.init = function () {
+  // Check that required elements are present
+  if (!this.$textarea) {
+    return
+  }
+
   // Check for module
   var $module = this.$module;
   var $textarea = this.$textarea;
-  var $countMessage = this.$countMessage;
-
-  if (!$textarea || !$countMessage) {
-    return;
-  }
+  var $fallbackLimitMessage = document.getElementById($textarea.id + '-info');
 
-  // We move count message right after the field
+  // Move the fallback count message to be immediately after the textarea
   // Kept for backwards compatibility
-  $textarea.insertAdjacentElement('afterend', $countMessage);
+  $textarea.insertAdjacentElement('afterend', $fallbackLimitMessage);
+
+  // Create the *screen reader* specific live-updating counter
+  // This doesn't need any styling classes, as it is never visible
+  var $screenReaderCountMessage = document.createElement('div');
+  $screenReaderCountMessage.className = 'hmrc-character-count__sr-status govuk-visually-hidden';
+  $screenReaderCountMessage.setAttribute('aria-live', 'polite');
+  this.$screenReaderCountMessage = $screenReaderCountMessage;
+  $fallbackLimitMessage.insertAdjacentElement('afterend', $screenReaderCountMessage);
+
+  // Create our live-updating counter element, copying the classes from the
+  // fallback element for backwards compatibility as these may have been configured
+  var $visibleCountMessage = document.createElement('div');
+  $visibleCountMessage.className = $fallbackLimitMessage.className;
+  $visibleCountMessage.classList.add('hmrc-character-count__status');
+  $visibleCountMessage.setAttribute('aria-hidden', 'true');
+  this.$visibleCountMessage = $visibleCountMessage;
+  $fallbackLimitMessage.insertAdjacentElement('afterend', $visibleCountMessage);
+
+  // Hide the fallback limit message
+  $fallbackLimitMessage.classList.add('govuk-visually-hidden');
 
   // Read options set using dataset ('data-' values)
   this.options = this.getDataset($module);
@@ -57,23 +78,19 @@ CharacterCount.prototype.init = function () {
   }
 
   // Remove hard limit if set
-  $module.removeAttribute('maxlength');
+  $textarea.removeAttribute('maxlength');
+
+  this.bindChangeEvents();
 
   // When the page is restored after navigating 'back' in some browsers the
   // state of the character count is not restored until *after* the DOMContentLoaded
-  // event is fired, so we need to sync after the pageshow event in browsers
-  // that support it.
+  // event is fired, so we need to manually update it after the pageshow event
+  // in browsers that support it.
   if ('onpageshow' in window) {
-    window.addEventListener('pageshow', this.sync.bind(this));
+    window.addEventListener('pageshow', this.updateCountMessage.bind(this));
   } else {
-    window.addEventListener('DOMContentLoaded', this.sync.bind(this));
+    window.addEventListener('DOMContentLoaded', this.updateCountMessage.bind(this));
   }
-
-  this.sync();
-};
-
-CharacterCount.prototype.sync = function () {
-  this.bindChangeEvents();
   this.updateCountMessage();
 };
 
@@ -108,7 +125,7 @@ CharacterCount.prototype.count = function (text) {
 // Bind input propertychange to the elements and update based on the change
 CharacterCount.prototype.bindChangeEvents = function () {
   var $textarea = this.$textarea;
-  $textarea.addEventListener('keyup', this.checkIfValueChanged.bind(this));
+  $textarea.addEventListener('keyup', this.handleKeyUp.bind(this));
 
   // Bind focus/blur events to start/stop polling
   $textarea.addEventListener('focus', this.handleFocus.bind(this));
@@ -126,42 +143,64 @@ CharacterCount.prototype.checkIfValueChanged = function () {
   }
 };
 
-// Update message box
+// Helper function to update both the visible and screen reader-specific
+// counters simultaneously (e.g. on init)
 CharacterCount.prototype.updateCountMessage = function () {
-  var countElement = this.$textarea;
-  var options = this.options;
-  var countMessage = this.$countMessage;
+  this.updateVisibleCountMessage();
+  this.updateScreenReaderCountMessage();
+};
 
-  // Determine the remaining number of characters/words
-  var currentLength = this.count(countElement.value)
-  var maxLength = this.maxLength
-  var remainingNumber = maxLength - currentLength
+// Update visible counter
+CharacterCount.prototype.updateVisibleCountMessage = function () {
+  var $textarea = this.$textarea;
+  var $visibleCountMessage = this.$visibleCountMessage;
+  var remainingNumber = this.maxLength - this.count($textarea.value);
 
-  // Set threshold if presented in options
-  var thresholdPercent = options.threshold ? options.threshold : 0;
-  var thresholdValue = (maxLength * thresholdPercent) / 100;
-  if (thresholdValue > currentLength) {
-    countMessage.classList.add('hmrc-character-count__message--disabled');
-    // Ensure threshold is hidden for users of assistive technologies
-    countMessage.setAttribute('aria-hidden', true);
+  // If input is over the threshold, remove the disabled class which renders the
+  // counter invisible.
+  if (this.isOverThreshold()) {
+    $visibleCountMessage.classList.remove('hmrc-character-count__message--disabled');
   } else {
-    countMessage.classList.remove('hmrc-character-count__message--disabled');
-    // Ensure threshold is visible for users of assistive technologies
-    countMessage.removeAttribute('aria-hidden');
+    $visibleCountMessage.classList.add('hmrc-character-count__message--disabled');
   }
 
   // Update styles
   if (remainingNumber < 0) {
-    countElement.classList.add('govuk-textarea--error');
-    countMessage.classList.remove('govuk-hint');
-    countMessage.classList.add('govuk-error-message');
+    $textarea.classList.add('govuk-textarea--error');
+    $visibleCountMessage.classList.remove('govuk-hint');
+    $visibleCountMessage.classList.add('govuk-error-message');
   } else {
-    countElement.classList.remove('govuk-textarea--error');
-    countMessage.classList.remove('govuk-error-message');
-    countMessage.classList.add('govuk-hint');
+    $textarea.classList.remove('govuk-textarea--error');
+    $visibleCountMessage.classList.remove('govuk-error-message');
+    $visibleCountMessage.classList.add('govuk-hint');
   }
 
   // Update message
+  $visibleCountMessage.innerHTML = this.formattedUpdateMessage();
+};
+
+// Update screen reader-specific counter
+CharacterCount.prototype.updateScreenReaderCountMessage = function () {
+  var $screenReaderCountMessage = this.$screenReaderCountMessage;
+
+  // If over the threshold, remove the aria-hidden attribute, allowing screen
+  // readers to announce the content of the element.
+  if (this.isOverThreshold()) {
+    $screenReaderCountMessage.removeAttribute('aria-hidden');
+  } else {
+    $screenReaderCountMessage.setAttribute('aria-hidden', true);
+  }
+
+  // Update message
+  $screenReaderCountMessage.innerHTML = this.formattedUpdateMessage();
+};
+
+// Format update message
+CharacterCount.prototype.formattedUpdateMessage = function () {
+  var $textarea = this.$textarea;
+  var options = this.options;
+  var remainingNumber = this.maxLength - this.count($textarea.value);
+
   var isWelsh = this.options.language === 'cy';
   var charVerb;
   var charNoun;
@@ -188,12 +227,44 @@ CharacterCount.prototype.updateCountMessage = function () {
 
   const displayNumber = Math.abs(remainingNumber);
 
-  countMessage.innerHTML = charStartMessage + displayNumber + ' ' + charNoun + ' ' + charVerb;
+  return charStartMessage + displayNumber + ' ' + charNoun + ' ' + charVerb;
+};
+
+// Checks whether the value is over the configured threshold for the input.
+// If there is no configured threshold, it is set to 0 and this function will
+// always return true.
+CharacterCount.prototype.isOverThreshold = function () {
+  var $textarea = this.$textarea;
+  var options = this.options;
+
+  // Determine the remaining number of characters/words
+  var currentLength = this.count($textarea.value);
+  var maxLength = this.maxLength;
+
+  // Set threshold if presented in options
+  var thresholdPercent = options.threshold ? options.threshold : 0;
+  var thresholdValue = maxLength * thresholdPercent / 100;
+
+  return (thresholdValue <= currentLength)
+};
+
+// Update the visible character counter and keep track of when the last update
+// happened for each keypress
+CharacterCount.prototype.handleKeyUp = function () {
+  this.updateVisibleCountMessage();
+  this.lastInputTimestamp = Date.now();
 };
 
 CharacterCount.prototype.handleFocus = function () {
-  // Check if value changed on focus
-  this.valueChecker = setInterval(this.checkIfValueChanged.bind(this), 1000);
+  // If the field is focused, and a keyup event hasn't been detected for at
+  // least 1000 ms (1 second), then run the manual change check.
+  // This is so that the update triggered by the manual comparison doesn't
+  // conflict with debounced KeyboardEvent updates.
+  this.valueChecker = setInterval(function () {
+    if (!this.lastInputTimestamp || (Date.now() - 500) >= this.lastInputTimestamp) {
+      this.checkIfValueChanged();
+    }
+  }.bind(this), 1000);
 };
 
 CharacterCount.prototype.handleBlur = function () {

package/hmrc/components/character-count/template.njk

@@ -31,19 +31,13 @@
       {{ govukHint({
         text: 'Gallwch nodi hyd at ' + (params.maxlength or params.maxwords) + (' o eiriau' if params.maxwords else ' o gymeriadau'),
         id: params.id + '-info',
-        classes: 'hmrc-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes),
-        attributes: {
-          'aria-live': 'polite'
-        }
+        classes: 'hmrc-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes)
       }) }}
   {% else %}
       {{ govukHint({
         text: 'You can enter up to ' + (params.maxlength or params.maxwords) + (' words' if params.maxwords else ' characters'),
         id: params.id + '-info',
-        classes: 'hmrc-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes),
-        attributes: {
-          'aria-live': 'polite'
-        }
+        classes: 'hmrc-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes)
       }) }}
   {% endif %}
 </div>