From 3e0401186acabb0a2c3e0d0e3874bd5bd0ef4c1e Mon Sep 17 00:00:00 2001
From: Vanita Barrett <vanita.barrett@digital.cabinet-office.gov.uk>
Date: Fri, 17 Jul 2020 09:56:28 +0100
Subject: [PATCH] Add missing spellcheck param to character count

We added a new spellcheck param to the textarea component in https://github.com/alphagov/govuk-frontend/pull/1859

However, we forgot to add the param to the character count component, which meant it couldn't be passed through to the textarea. This adds the missing param.
---
 .../character-count/character-count.yaml      |  4 +++
 .../components/character-count/template.njk   |  1 +
 .../character-count/template.test.js          | 32 +++++++++++++++++++
 3 files changed, 37 insertions(+)

diff --git a/src/govuk/components/character-count/character-count.yaml b/src/govuk/components/character-count/character-count.yaml
index f84d65f6b4..308744e3e9 100644
--- a/src/govuk/components/character-count/character-count.yaml
+++ b/src/govuk/components/character-count/character-count.yaml
@@ -59,6 +59,10 @@ params:
   type: object
   required: false
   description: HTML attributes (for example data attributes) to add to the textarea.
+- name: spellcheck
+  type: boolean
+  required: false
+  description: Optional field to enable or disable the spellcheck attribute on the character count.
 - name: countMessage
   type: object
   required: false
diff --git a/src/govuk/components/character-count/template.njk b/src/govuk/components/character-count/template.njk
index d63c86e448..d1eb46b1e7 100644
--- a/src/govuk/components/character-count/template.njk
+++ b/src/govuk/components/character-count/template.njk
@@ -10,6 +10,7 @@
     name: params.name,
     describedBy: params.id + '-info',
     rows: params.rows,
+    spellcheck: params.spellcheck,
     value: params.value,
     formGroup: params.formGroup,
     classes: 'govuk-js-character-count' + (' govuk-textarea--error' if params.errorMessage) + (' ' + params.classes if params.classes),
diff --git a/src/govuk/components/character-count/template.test.js b/src/govuk/components/character-count/template.test.js
index 2fd3bb7baa..f7eff6e9b0 100644
--- a/src/govuk/components/character-count/template.test.js
+++ b/src/govuk/components/character-count/template.test.js
@@ -137,6 +137,7 @@ describe('Character count', () => {
       const $countMessage = $('.govuk-character-count__message')
       expect($countMessage.hasClass('app-custom-count-message')).toBeTruthy()
     })
+
     it('renders with aria live set to polite', () => {
       const $ = render('character-count', {})
 
@@ -145,6 +146,37 @@ describe('Character count', () => {
     })
   })
 
+  describe('when it has the spellcheck attribute', () => {
+    it('renders the textarea with spellcheck attribute set to true', () => {
+      const $ = render('character-count', {
+        spellcheck: true
+      })
+
+      const $component = $('.govuk-character-count .govuk-textarea')
+      expect($component.attr('spellcheck')).toEqual('true')
+    })
+
+    it('renders the textarea with spellcheck attribute set to false', () => {
+      const $ = render('character-count', {
+        name: 'my-char-count-name',
+        spellcheck: false
+      })
+
+      const $component = $('.govuk-character-count .govuk-textarea')
+      expect($component.attr('spellcheck')).toEqual('false')
+    })
+
+    it('renders the textarea without spellcheck attribute by default', () => {
+      const $ = render('character-count', {
+        name: 'my-char-count-name'
+      })
+
+      const $component = $('.govuk-character-count .govuk-textarea')
+      expect($component.attr('spellcheck')).toBeUndefined()
+    })
+  })
+
+
   describe('when it includes a hint', () => {
     it('renders with hint', () => {
       const $ = render('character-count', {