Refactor character count to inject new element

Changes the character count to inject a new element that is
live updated, instead of overwriting the content of the initial
HTML hint.

This is intended to resolve an issue where screen readers are
reading out all elements referenced in aria-describedby for
each keystroke, and not just the updated counter element.

#2539

src/govuk/components/character-count/character-count.js

@@ -6,7 +6,7 @@ function CharacterCount ($module) {
   this.$module = $module
   this.$textarea = $module.querySelector('.govuk-js-character-count')
   if (this.$textarea) {
-    this.$countMessage = document.getElementById(this.$textarea.id + '-info')
+    this.$fallbackLimitMessage = document.getElementById(this.$textarea.id + '-info')
   }
 }
 
@@ -20,15 +20,26 @@ CharacterCount.prototype.init = function () {
   // Check for module
   var $module = this.$module
   var $textarea = this.$textarea
-  var $countMessage = this.$countMessage
+  var $fallbackLimitMessage = this.$fallbackLimitMessage
 
-  if (!$textarea || !$countMessage) {
+  if (!$textarea) {
     return
   }
 
-  // We move count message right after the field
+  // We move fallback count message right after the field
   // Kept for backwards compatibility
-  $textarea.insertAdjacentElement('afterend', $countMessage)
+  $textarea.insertAdjacentElement('afterend', $fallbackLimitMessage)
+
+  // Create our live-updating counter element, copying the classes from the
+  // fallback element for backwards compatibility as these may have been configured
+  var $countMessage = document.createElement('div')
+  $countMessage.className = $fallbackLimitMessage.className
+  $countMessage.setAttribute('aria-live', 'polite')
+  this.$countMessage = $countMessage
+  $fallbackLimitMessage.insertAdjacentElement('afterend', $countMessage)
+
+  // Hide the fallback limit message
+  $fallbackLimitMessage.classList.add('govuk-visually-hidden')
 
   // Read options set using dataset ('data-' values)
   this.options = this.getDataset($module)

src/govuk/components/character-count/template.njk

@@ -29,9 +29,6 @@
   {{ govukHint({
     text: 'You can enter up to ' + (params.maxlength or params.maxwords) + (' words' if params.maxwords else ' characters'),
     id: params.id + '-info',
-    classes: 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes),
-    attributes: {
-      'aria-live': 'polite'
-    }
+    classes: 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes)
   }) }}
 </div>