diff --git a/src/govuk/components/character-count/character-count.test.js b/src/govuk/components/character-count/character-count.test.js index b48ec24ab3..fc59259997 100644 --- a/src/govuk/components/character-count/character-count.test.js +++ b/src/govuk/components/character-count/character-count.test.js @@ -4,6 +4,8 @@ const configPaths = require('../../../../config/paths.json') const PORT = configPaths.ports.test const baseUrl = `http://localhost:${PORT}` +const { render } = require('../../../../lib/jest-helpers') + const goToExample = (exampleName = false) => { const url = exampleName ? `${baseUrl}/components/character-count/${exampleName}/preview` @@ -143,6 +145,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 counting words', () => { it('shows the dynamic message', async () => { await goToExample('with-word-count') 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),