Refactor handling of count message in character count JS

[hannalaakso]

The “count message” refers to the “You have x characters remaining” message in the character count (govuk-character-count__message).

Original issue

The original issue #1106 raised by @36degrees was fixed by #1347. This allowed a value for aria-describedby to be passed through to the textarea component. This means that the character count component can correctly pass the id of the count message to the textarea component to associate the two.

Fixes in this PR

There was a bit of refactoring to do in terms of how the JS of the character count handles defining the count message so this PR does that. I’ve tried to break the changes into smaller commits to make it clear what’s going on but can squash them before merging if that makes more sense.

Making the count message markup required

The count message markup is now always present (since 7b534bf). This PR makes the markup for it required, instead of giving the option to add it with Javascript - the message markup should always exist so that user is notified of the character limit, even if JS doesn’t run.

This PR removes the branching logic and the code that added the count message markup dynamically in createCountMessage(). It’s worth nothing that the code inside the block hasn’t been executed since 7b534bf. As using the character count without the count message markup and relying it to be added with JS is not part of the public API, removing this functionality is not considered a breaking change.

Defining the count message

The count message DOM element is now defined at the top of the module with the other required DOM elements.

We check whether the textarea is present before getting its id to get the count message DOM element - the check prevents an error with getting $textarea.id if the script is run without component markup being present present on the page. Alternatively we could define the count message in init() after doing a check for textarea which would require another check for it and wouldn’t make it as clear that it’s required as when placed at the top of module. See below for the code. Thoughts?

CharacterCount.prototype.init = function () {
  var $module = this.$module
  var $textarea = this.$textarea

  if (!$textarea) {
    return
  }

  this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]')

  if (!$countMessage) {
    return
  }

Moving the count message markup inside govuk-form-group

The original code for checking/creating the count message markup moves it in the DOM to be inside govuk-form-group. This was probably useful when the message markup was created dynamically. This PR retains the bit of code that moves the element for backwards compatibility. It’s important that the count message markup is inside govuk-form-group so that it gets wrapped within the error block (see screen grab below).

However we should look to remove moving the markup with JS and instead change the component markup so that the count message is inside govuk-form-group. This would be a breaking change, have created an issue: #1602

[36degrees]

Couple of minor typos in the commit messages:

3b52b27

We check whether the textarea is present before trying to its id to find the count message

814935a

It’s worth nothing that the code inside the block hasn’t been executed since [].

[hannalaakso]

Thanks @36degrees I've just fixed those

[36degrees]

Great cleanup, thanks @hannalaakso. Just a couple of minor things I've spotted.

[36degrees]

I think we tend to avoid inline if statements like this

Suggested change

	if (this.$textarea) this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]')
	if (this.$textarea) {
	this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]')
	}

[36degrees]

Can we just use $countMessage here? Alternatively, as we're currently only using $countMessage in one place, can we remove the local variable and just use this.$countMessage?

[hannalaakso]

Yeps good catch 👍

[36degrees]

LGTM, thanks @hannalaakso