Merge pull request #1442 from alphagov/ensure-character-count-message…

…-is-hidden-when-not-visible

Ensure character count message is hidden to assistive technologies when not visible

CHANGELOG.md

@@ -351,6 +351,10 @@
 
   ([PR #1441](https://github.com/alphagov/govuk-frontend/pull/1441))
 
+- Ensure character count message is hidden to assistive technologies when not visible
+
+  ([PR #1442](https://github.com/alphagov/govuk-frontend/pull/1442))
+
 - Stop appending hash when error summary link clicked
 
   This prevents incorrectly focusing the form element with the hash id, instead of the error summary, when form is re-submitted with the hash in the URL and there are further errors.

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

@@ -144,8 +144,12 @@ CharacterCount.prototype.updateCountMessage = function () {
   var thresholdValue = maxLength * thresholdPercent / 100
   if (thresholdValue > currentLength) {
     countMessage.classList.add('govuk-character-count__message--disabled')
+    // Ensure threshold is hidden for users of assistive technologies
+    countMessage.setAttribute('aria-hidden', true)
   } else {
     countMessage.classList.remove('govuk-character-count__message--disabled')
+    // Ensure threshold is visible for users of assistive technologies
+    countMessage.removeAttribute('aria-hidden')
   }
 
   // Update styles

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

@@ -124,13 +124,21 @@ describe('Character count', () => {
         it('does not show the limit until the threshold is reached', async () => {
           const visibility = await page.$eval('.govuk-character-count__message', el => window.getComputedStyle(el).visibility)
           expect(visibility).toEqual('hidden')
+
+          // Ensure threshold is hidden for users of assistive technologies
+          const ariaHidden = await page.$eval('.govuk-character-count__message', el => el.getAttribute('aria-hidden'))
+          expect(ariaHidden).toEqual('true')
         })
 
         it('becomes visible once the threshold is reached', async () => {
           await page.type('.js-character-count', 'A'.repeat(8))
 
           const visibility = await page.$eval('.govuk-character-count__message', el => window.getComputedStyle(el).visibility)
           expect(visibility).toEqual('visible')
+
+          // Ensure threshold is visible for users of assistive technologies
+          const ariaHidden = await page.$eval('.govuk-character-count__message', el => el.getAttribute('aria-hidden'))
+          expect(ariaHidden).toBeFalsy()
         })
       })
     })