From f1ff89a8945837c60f2b6bd95d41beb9cb4b137a Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 10 Jun 2019 14:40:21 +0100 Subject: [PATCH 1/2] 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 | 4 ++++ src/components/character-count/character-count.test.js | 8 ++++++++ 2 files changed, 12 insertions(+) diff --git a/src/components/character-count/character-count.js b/src/components/character-count/character-count.js index 93ec55e620..27f7dceba1 100644 --- a/src/components/character-count/character-count.js +++ b/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 diff --git a/src/components/character-count/character-count.test.js b/src/components/character-count/character-count.test.js index 932e2bf388..004b724aa7 100644 --- a/src/components/character-count/character-count.test.js +++ b/src/components/character-count/character-count.test.js @@ -124,6 +124,10 @@ 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 () => { @@ -131,6 +135,10 @@ describe('Character count', () => { 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() }) }) }) From 6bc9986dee281fd4e7e5602b7033f3dfb79f5dff Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 10 Jun 2019 14:55:39 +0100 Subject: [PATCH 2/2] Add CHANGELOG entry --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3279f817c2..ce8c1aa558 100644 --- a/CHANGELOG.md +++ b/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.