Add missing spellcheck param to character count

CHANGELOG.md

@@ -10,9 +10,10 @@ We darkened `govuk-colour("dark-grey")` to improve the readability of hint text.
 
 #### Add spellcheck parameter to input and textarea components
 
-Optional parameter added to the input and textarea components to enable or disable the spellcheck attribute
+Optional parameter added to the input, textarea and character count components to enable or disable the spellcheck attribute
 
 ([PR #1859](https://github.com/alphagov/govuk-frontend/pull/1859))
+([PR #1869](https://github.com/alphagov/govuk-frontend/pull/1869))
 
 ### Fixes
 

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

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

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,36 @@ 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', {