Merge pull request #1594 from alphagov/character-count-associate-text…

…area

Refactor handling of count message in character count JS

CHANGELOG.md

@@ -34,6 +34,7 @@ Align ‘Warning text’ icon with first line of the content fixing [#1352](http
 - [Pull request #1587: Fix height and alignment issue within header in Chrome 76+](https://github.com/alphagov/govuk-frontend/pull/1587)
 - [Pull request #1589: Remove role="button" from header button](https://github.com/alphagov/govuk-frontend/pull/1589)
 - [Pull request #1595: Do not output conditionally revealed content for radios or checkboxes when it's empty](https://github.com/alphagov/govuk-frontend/pull/1595)
+- [Pull request #1594: Refactor handling of count message in character count Javascript](https://github.com/alphagov/govuk-frontend/pull/1594)
 
 ## 3.2.0 (Feature release)
 

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

@@ -5,6 +5,9 @@ import '../../vendor/polyfills/Element/prototype/classList'
 function CharacterCount ($module) {
   this.$module = $module
   this.$textarea = $module.querySelector('.govuk-js-character-count')
+  if (this.$textarea) {
+    this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]')
+  }
 }
 
 CharacterCount.prototype.defaults = {
@@ -17,10 +20,16 @@ CharacterCount.prototype.init = function () {
   // Check for module
   var $module = this.$module
   var $textarea = this.$textarea
-  if (!$textarea) {
+  var $countMessage = this.$countMessage
+
+  if (!$textarea || !$countMessage) {
     return
   }
 
+  // We move count message right after the field
+  // Kept for backwards compatibility
+  $textarea.insertAdjacentElement('afterend', $countMessage)
+
   // Read options set using dataset ('data-' values)
   this.options = this.getDataset($module)
 
@@ -38,23 +47,16 @@ CharacterCount.prototype.init = function () {
     return
   }
 
-  // Generate and reference message
-  var boundCreateCountMessage = this.createCountMessage.bind(this)
-  this.countMessage = boundCreateCountMessage()
+  // Remove hard limit if set
+  $module.removeAttribute('maxlength')
 
-  // If there's a maximum length defined and the count message exists
-  if (this.countMessage) {
-    // Remove hard limit if set
-    $module.removeAttribute('maxlength')
+  // Bind event changes to the textarea
+  var boundChangeEvents = this.bindChangeEvents.bind(this)
+  boundChangeEvents()
 
-    // Bind event changes to the textarea
-    var boundChangeEvents = this.bindChangeEvents.bind(this)
-    boundChangeEvents()
-
-    // Update count message
-    var boundUpdateCountMessage = this.updateCountMessage.bind(this)
-    boundUpdateCountMessage()
-  }
+  // Update count message
+  var boundUpdateCountMessage = this.updateCountMessage.bind(this)
+  boundUpdateCountMessage()
 }
 
 // Read data attributes
@@ -85,27 +87,6 @@ CharacterCount.prototype.count = function (text) {
   return length
 }
 
-// Generate count message and bind it to the input
-// returns reference to the generated element
-CharacterCount.prototype.createCountMessage = function () {
-  var countElement = this.$textarea
-  var elementId = countElement.id
-  // Check for existing info count message
-  var countMessage = document.getElementById(elementId + '-info')
-  // If there is no existing info count message we add one right after the field
-  if (elementId && !countMessage) {
-    countElement.insertAdjacentHTML('afterend', '<span id="' + elementId + '-info" class="govuk-hint govuk-character-count__message" aria-live="polite"></span>')
-    this.describedBy = countElement.getAttribute('aria-describedby')
-    this.describedByInfo = this.describedBy + ' ' + elementId + '-info'
-    countElement.setAttribute('aria-describedby', this.describedByInfo)
-    countMessage = document.getElementById(elementId + '-info')
-  } else {
-  // If there is an existing info count message we move it right after the field
-    countElement.insertAdjacentElement('afterend', countMessage)
-  }
-  return countMessage
-}
-
 // Bind input propertychange to the elements and update based on the change
 CharacterCount.prototype.bindChangeEvents = function () {
   var $textarea = this.$textarea
@@ -132,7 +113,7 @@ CharacterCount.prototype.checkIfValueChanged = function () {
 CharacterCount.prototype.updateCountMessage = function () {
   var countElement = this.$textarea
   var options = this.options
-  var countMessage = this.countMessage
+  var countMessage = this.$countMessage
 
   // Determine the remaining number of characters/words
   var currentLength = this.count(countElement.value)