Ensure that invisible character count message is hidden to all users

We use `visibility` to ensure the character count keeps the same size in the page, but this requires additional work to ensure it's not visible to an assistive technology like a screen reader.

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