Character count count message is not associated with textarea

[36degrees]

The character count info message is (I believe) meant to be associated with the textarea using aria-describedby. However, this association is only made if there is no existing error message:

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

Lines 94 to 105 in fe36aa3

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

We always provide an existing info message as of 7b534bf:

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

Lines 26 to 28 in fe36aa3

	<span id="{{ params.id }}-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
	You can enter up to {{ params.maxlength or params.maxwords }} {{'words' if params.maxwords else 'characters' }}
	</span>

This means that the association will never be created.

From testing with Voiceover / Safari, the limit is still announced when it changes (because of the aria-live on the message), but it is no longer announced when focussing the field which I believe it should be.

[alex-ju]

Steven Proctor reported this a while ago and, at least at that point, an update on the textarea component was needed to be able pass the described by attribute to the element.

[36degrees]

This was fixed by #1347